/*
 * DINET 재해보고시스템 · 밝은 테마
 * 지도/목록/사건 상세와 대화창에만 적용한다.
 * /now/drs/write/ 의 독립된 작성 페이지 스타일은 변경하지 않는다.
 */

body:has(.drs-body) {
    background: #fff;
}

.drs-body {
    --drs-bg: #fff;
    --drs-panel: #fff;
    --drs-card: #f5f7fa;
    --drs-line: #dce3ea;
    --drs-text: #192638;
    --drs-sub: #687b90;
    color: var(--drs-text);
    background: #fff;
}

.drs-body .drs-layout,
.drs-body .drs-map-wrap,
.drs-body #drs-map {
    background: #f1f5f3;
}

.drs-body .drs-sidebar {
    background: #fff;
    border-left: 1px solid var(--drs-line);
    box-shadow: -3px 0 20px #1d30410a;
}

.drs-body .drs-sidebar-head h1,
.drs-body .drs-detail-header h2,
.drs-body .drs-detail-section h3,
.drs-body .drs-list-heading strong,
.drs-body .drs-timeline-head h3 {
    color: #192638;
}

.drs-body .drs-sidebar-head {
    padding-top: 24px;
    padding-bottom: 17px;
}

.drs-body .drs-auth-bar {
    color: #66788b;
    border-color: #e2e7ec;
}

.drs-body .drs-auth-bar button,
.drs-body .drs-archive-controls button {
    background: #fff;
    border-color: #d5dfe8;
    color: #33475c;
}

.drs-body .drs-side-nav {
    border-color: #dce3ea;
}

.drs-body .drs-side-nav button {
    color: #6b7d8f;
}

.drs-body .drs-side-nav button.active {
    color: #192638;
}

.drs-body .drs-panel {
    color: #26364a;
}

.drs-body .drs-search-wrap input,
.drs-body .drs-filters select,
.drs-body .drs-archive-controls input {
    background: #fff;
    color: #223248;
    border: 1px solid #d6e0e8;
    color-scheme: light;
}

.drs-body .drs-search-wrap input::placeholder {
    color: #64778a;
}

.drs-body .drs-inline-notice {
    background: #f6f8fa;
    border-color: #dfe6ec;
    color: #657689;
}

.drs-body .drs-inline-notice.error {
    background: #fff2ef;
    color: #a8372c;
    border-color: #f2c8c0;
}

.drs-body .drs-item {
    color: #1a2a3d;
    background: #fff;
    border: 1px solid #e1e6ec;
    border-radius: 12px;
    box-shadow: 0 1px 3px #22324808;
}

.drs-body .drs-item:hover,
.drs-body .drs-item:focus-visible,
.drs-body .drs-item.selected {
    border-color: #f97316;
    background: #fff9f4;
}

.drs-body .drs-item-summary {
    color: #52667b;
}

.drs-body .drs-item-meta,
.drs-body .drs-list-heading small,
.drs-body .drs-muted,
.drs-body .drs-archive-controls {
    color: #718397;
}

.drs-body .drs-status {
    background: #f2f4f6;
    border-color: #d9e1e8;
    color: #52677c;
    font-size: 11px;
    padding: 4px 9px;
}

.drs-body .drs-status.active {
    color: #ae5520;
    background: #fff5e9;
    border-color: #efcfac;
}

.drs-body .drs-status.resolution_pending {
    color: #365c9c;
    background: #eef4ff;
    border-color: #c5d5f4;
}

.drs-body .drs-status.recheck_needed {
    color: #9b6413;
    background: #fff8e6;
    border-color: #ecd7a2;
}

.drs-body .drs-sidebar-foot {
    border-color: #e0e6ec;
}

.drs-body .drs-sidebar-foot p {
    color: #718397;
}

.drs-body .drs-sidebar-foot a,
.drs-body .drs-back {
    color: #586d83;
}

.drs-body .drs-back:hover {
    color: #ef6c14;
}

/* 지도 위 컨트롤은 흰색 UI에 통일한다. */
.drs-body .drs-map-tabs {
    background: #fff;
    border: 1px solid #dae2e9;
    box-shadow: 0 6px 24px #24384b1a;
}

.drs-body .drs-map-tabs button {
    color: #546a80;
}

.drs-body .drs-map-tabs button.active {
    color: #ffffff;
    background: #f97316;
}

.drs-body .drs-map-small-btn {
    background: #fff;
    border: 1px solid #dae2e9;
    box-shadow: 0 6px 24px #24384b1a;
    color: #344b62;
}

.drs-body .drs-map-attribution {
    color: #4c657c;
    border-top: 1px solid #dce3ea;
}

/* 공통 사건 헤더: 제목과 세부 현상 중심 */
.drs-body .drs-detail-header {
    padding: 2px 0 12px;
    margin-bottom: 0;
}

.drs-body .drs-detail-status-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 12px;
}

.drs-body .drs-detail-type {
    font-size: 12px;
    color: #6d8194;
}

.drs-body .drs-detail-header h2 {
    margin: 0 0 12px;
    font-size: clamp(20px, 2vw, 25px);
    line-height: 1.35;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
}

.drs-body .drs-detail-tags {
    margin: 8px 0 13px;
    gap: 8px;
}

.drs-body .drs-tag {
    background: #fff4eb;
    color: #af5418;
    border: 1px solid #f1d0b7;
    border-radius: 7px;
    padding: 6px 9px;
    font-size: 12px;
}

.drs-body .drs-detail-desc {
    color: #50657a;
    font-size: 13px;
    line-height: 1.75;
}

/* 사건 상세 탭은 목록 탭과 분리한다. */
.drs-body .drs-detail-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #dce3eb;
    gap: 2px;
    margin-top: 6px;
    margin-bottom: 19px;
}

.drs-body .drs-detail-tabs button {
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    border-radius: 0;
    padding: 13px 6px;
    background: transparent;
    color: #76889b;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.drs-body .drs-detail-tabs button.active {
    border-bottom-color: #f97316;
    color: #202e42;
    font-weight: 800;
}

.drs-body .drs-detail-tabs button:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: -3px;
}

.drs-body .drs-detail-tab-panel[hidden] {
    display: none !important;
}

.drs-body .drs-meta-grid {
    background: #f7f9fb;
    border-color: #e0e5eb;
    border-radius: 12px;
    padding: 17px;
    gap: 17px 12px;
    margin: 0 0 14px;
}

.drs-body .drs-meta-grid small {
    color: #77899a;
    font-size: 12px;
    margin-bottom: 6px;
}

.drs-body .drs-meta-grid strong {
    color: #25374b;
    font-size: 13px;
    font-weight: 700;
}

.drs-body .drs-focus-button {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border-color: #d9e1e9;
    color: #40566d;
    margin: 1px 0 13px;
}

.drs-body .drs-detail-section {
    margin: 20px 0;
}

.drs-body .drs-detail-section h3 {
    font-size: 15px;
    margin-bottom: 12px;
}

.drs-body .drs-phenomenon-list {
    display: grid;
    gap: 0;
    border: 1px solid #e1e7ee;
    border-radius: 10px;
    overflow: hidden;
}

.drs-body .drs-phenomenon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid #e8edf2;
    padding: 12px 14px;
}

.drs-body .drs-phenomenon-row:last-child {
    border-bottom: 0;
}

.drs-body .drs-phenomenon-name {
    font-size: 13px;
    color: #273950;
}

.drs-body .drs-phenomenon-state {
    flex: 0 0 auto;
    font-size: 11px;
    color: #697c8d;
    padding: 4px 8px;
    background: #f3f6f9;
    border-radius: 6px;
}

.drs-body .drs-phenomenon-state.ongoing,
.drs-body .drs-phenomenon-state.newly_observed {
    background: #fff0e4;
    color: #b95417;
}

.drs-body .drs-phenomenon-state.resolved {
    background: #eff8f3;
    color: #276b47;
}

.drs-body .drs-phenomenon-state.conflicting {
    background: #fff5da;
    color: #8a6519;
}

.drs-body .drs-detail-actions {
    gap: 9px;
    margin-top: 22px;
}

.drs-body .drs-detail-actions button,
.drs-body .drs-btn-ghost,
.drs-body .drs-link-button {
    color: #354a60;
    background: #fff;
    border: 1px solid #d8e1e9;
    padding: 10px 12px;
    font-size: 12px;
}

.drs-body .drs-detail-actions button.primary {
    color: #fff;
    background: #f97316;
    border-color: #f97316;
}

.drs-body .drs-detail-actions button:hover,
.drs-body .drs-btn-ghost:hover,
.drs-body .drs-more:hover {
    border-color: #f97316;
}

/* 현장 기록 탭 */
.drs-body .drs-timeline-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin: 1px 0 18px;
}

.drs-body .drs-timeline-head h3 {
    font-size: 17px;
    margin: 0 0 5px;
}

.drs-body .drs-timeline-head .drs-muted {
    margin: 0;
}

.drs-body .drs-timeline-head .drs-btn-primary {
    padding: 9px 11px;
    font-size: 12px;
    color: #fff !important;
}

.drs-body .drs-timeline-section {
    margin-top: 16px;
}

.drs-body .drs-timeline-entry {
    border-left: 2px solid #dfe5ec;
    padding: 2px 0 23px 18px;
    margin-left: 6px;
}

.drs-body .drs-timeline-entry::before {
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #f97316;
}

.drs-body .drs-timeline-entry h4 {
    font-size: 14px;
    color: #26364a;
    margin-bottom: 6px;
}

.drs-body .drs-timeline-entry small {
    color: #8190a1;
    font-size: 12px;
}

.drs-body .drs-timeline-entry p {
    color: #51657a;
    font-size: 13px;
    line-height: 1.7;
}

.drs-body .drs-timeline-actions {
    flex-wrap: wrap;
}

.drs-body .drs-timeline-actions button,
.drs-body .drs-photo-report {
    background: #fff;
    color: #586d82;
    border: 1px solid #d9e0e7;
}

.drs-body .drs-more {
    background: #fff;
    color: #465b70;
    border: 1px solid #d9e2e9;
}

.drs-body .drs-timeline-disclaimer {
    padding-top: 13px;
    border-top: 1px solid #e7ecf0;
}

.drs-body .drs-error-text,
#drs-dialog-root .drs-form-error {
    color: #b73629;
}

.drs-body .drs-photo-grid img {
    background: #eef2f5;
}

.drs-body .drs-report-row {
    border-color: #e2e8ee;
}

.drs-body .drs-report-row small {
    color: #74869a;
}

/* 변경/신고/후속 관찰 모달 역시 밝은 배경으로 통일 */
#drs-dialog-root .drs-dialog-overlay {
    background: #20304580;
}

#drs-dialog-root .drs-dialog {
    background: #fff;
    border: 1px solid #dde4eb;
    box-shadow: 0 16px 60px #17263536;
    color: #23364a;
}

#drs-dialog-root .drs-dialog h2 {
    color: #182638;
}

#drs-dialog-root .drs-dialog p {
    color: #596e82;
}

#drs-dialog-root .drs-dialog label {
    color: #35495d;
}

#drs-dialog-root .drs-dialog input,
#drs-dialog-root .drs-dialog textarea,
#drs-dialog-root .drs-dialog select {
    background: #fff;
    color: #25374b;
    border: 1px solid #d2dce6;
    color-scheme: light;
}

#drs-dialog-root .drs-dialog-close {
    background: #fff;
    border: 1px solid #d5dfe8;
    color: #46596c;
}

#drs-dialog-root .drs-upload-input {
    background: #f8fafc;
    border: 1px dashed #d2dce6;
    color: #354a60;
}

#drs-dialog-root .drs-upload-status {
    color: #a45127;
}

body:has(.drs-body) .drs-toast {
    color: #2b4158;
    background: #fff;
    border: 1px solid #d3dde5;
    box-shadow: 0 8px 30px #23374b2b;
}

@media (max-width: 760px) {
    .drs-body .drs-sidebar {
        background: #fff;
        border-left: 0;
        border-top: 1px solid #dae3eb;
        box-shadow: 0 -8px 30px #25395020;
    }

    .drs-body .drs-drag-handle > span:first-child {
        background: #bac6d2;
    }

    .drs-body .drs-timeline-head {
        gap: 8px;
    }
}

@media (max-width: 380px) {
    .drs-body .drs-detail-actions button {
        flex: 1 0 calc(50% - 9px);
    }

    .drs-body .drs-timeline-head {
        flex-direction: column;
    }
}

/* 2026-10-22 정보 우선순위 개선: 상태 > 현상 > 장소·시간 > 부가 작업 */
.drs-body .drs-item {
    display: grid;
    gap: 8px;
    padding: 15px 16px;
    border-radius: 14px;
    box-shadow: none;
}

.drs-body .drs-item-top {
    margin: 0;
    gap: 10px;
}

.drs-body .drs-kind {
    font-size: 12px;
    font-weight: 700;
    color: #53677c;
}

.drs-body .drs-item-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.48;
    color: #17273a;
    overflow-wrap: anywhere;
}

.drs-body .drs-item-extra {
    font-size: 11px;
    color: #73869b;
}

.drs-body .drs-item-meta {
    margin: 0;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 11px;
    line-height: 1.5;
    color: #64778a;
}

.drs-body .drs-item-meta span + span::before {
    content: '·';
    margin-right: 10px;
    color: #a0adba;
}

/* 사건 상태별 색: 색만으로 상태를 전달하지 않고 항상 텍스트를 표시한다. */
.drs-body .drs-status,
.drs-body .drs-phenomenon-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    flex-shrink: 0;
    gap: 5px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 750;
    white-space: nowrap;
}

.drs-body .drs-status.active,
.drs-body .drs-phenomenon-state.ongoing,
.drs-body .drs-phenomenon-state.newly_observed {
    color: #a94a10;
    background: #fff0e5;
    border-color: #f5ccb0;
}

.drs-body .drs-status.resolution_pending {
    color: #225ba1;
    background: #edf5ff;
    border-color: #c9dff8;
}

.drs-body .drs-status.recheck_needed,
.drs-body .drs-phenomenon-state.conflicting,
.drs-body .drs-phenomenon-state.unknown {
    color: #855710;
    background: #fff7dc;
    border-color: #f0dfa2;
}

.drs-body .drs-status.resolved,
.drs-body .drs-phenomenon-state.resolved {
    color: #24704b;
    background: #ebf7ef;
    border-color: #bfe2ce;
}

.drs-body .drs-status.archived_unknown,
.drs-body .drs-status.merged,
.drs-body .drs-status.hidden {
    color: #58697a;
    background: #f2f4f7;
    border-color: #dce2e8;
}

.drs-body .drs-status-prominent {
    font-size: 12px;
    padding: 7px 12px;
}

.drs-body .drs-detail-header {
    padding: 6px 0 17px;
}

.drs-body .drs-detail-status-line {
    gap: 8px;
    margin-bottom: 14px;
}

.drs-body .drs-detail-type {
    color: #66798d;
    font-weight: 700;
    font-size: 12px;
}

.drs-body .drs-detail-header h2 {
    margin: 0 0 9px;
    color: #15273a;
    font-size: clamp(20px, 2.1vw, 24px);
    font-weight: 850;
    letter-spacing: -.035em;
    line-height: 1.43;
}

.drs-body .drs-detail-desc {
    margin: 0;
    color: #56697c;
    font-size: 13px;
    line-height: 1.7;
}

.drs-body .drs-detail-tabs {
    margin-top: 0;
    margin-bottom: 21px;
    border-bottom-color: #dce4eb;
}

.drs-body .drs-detail-tabs button {
    padding: 13px 8px;
    font-size: 13px;
    font-weight: 650;
}

.drs-body .drs-latest {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid #e3e8ee;
    border-radius: 10px;
    background: #f8fafc;
    margin-bottom: 23px;
}

.drs-body .drs-latest-label {
    font-size: 12px;
    font-weight: 600;
    color: #687b8d;
}

.drs-body .drs-latest-time {
    font-size: 12px;
    font-weight: 800;
    color: #293f53;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.drs-body .drs-current-situation {
    margin: 0 0 22px;
}

.drs-body .drs-current-situation h3 {
    margin: 0 0 11px;
    font-size: 15px;
    font-weight: 800;
}

.drs-body .drs-phenomenon-list {
    border-radius: 12px;
    border-color: #e4eaf0;
}

.drs-body .drs-phenomenon-row {
    min-height: 48px;
    padding: 12px 13px;
}

.drs-body .drs-phenomenon-name {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650;
    color: #26394b;
    overflow-wrap: anywhere;
}

.drs-body .drs-meta-compact {
    margin: 0 0 12px;
    padding: 14px 15px;
    background: #fbfcfe;
}

.drs-body .drs-meta-compact strong {
    font-weight: 650;
}

.drs-body .drs-focus-button {
    margin: 0 0 16px;
    border: 0;
    padding-left: 2px;
    color: #33648c;
    font-size: 12px;
}

.drs-body .drs-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 4px 0 12px;
}

.drs-body .drs-detail-actions button {
    min-height: 43px;
    font-weight: 700;
    font-size: 12px;
    border-radius: 10px;
    white-space: normal;
}

.drs-body .drs-detail-actions button.primary {
    color: #321a0b;
    background: #ea6510;
    border-color: #ea6510;
}

.drs-body .drs-secondary-actions {
    border-top: 1px solid #ebeff3;
    padding-top: 10px;
    margin-bottom: 12px;
}

.drs-body .drs-secondary-actions summary {
    width: fit-content;
    padding: 7px 0;
    font-size: 12px;
    color: #6a7d91;
    cursor: pointer;
}

.drs-body .drs-secondary-actions-inner {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0 7px;
}

.drs-body .drs-secondary-actions-inner button {
    color: #526a80;
    background: #fff;
    border: 1px solid #dce4ec;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    cursor: pointer;
}

/* 타임라인: 본문과 상태가 먼저, 날짜/수정·신고는 보조. */
.drs-body .drs-timeline-head {
    align-items: center;
}

.drs-body .drs-timeline-head h3 {
    font-weight: 800;
}

.drs-body .drs-timeline-head .drs-muted {
    font-size: 12px;
    line-height: 1.55;
}

.drs-body .drs-timeline-entry {
    padding: 0 0 24px 18px;
    margin-left: 6px;
}

.drs-body .drs-timeline-entry-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.drs-body .drs-timeline-entry-head h4 {
    margin: 0;
    color: #1e3145;
    font-weight: 800;
}

.drs-body .drs-timeline-time {
    font-size: 11px;
    color: #718397;
    font-variant-numeric: tabular-nums;
}

.drs-body .drs-timeline-phenomena {
    display: grid;
    gap: 7px;
    margin-bottom: 9px;
}

.drs-body .drs-timeline-phenomenon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 7px 10px;
    color: #415469;
    font-size: 12px;
}

.drs-body .drs-timeline-description {
    padding: 10px 12px;
    background: #f7f9fc;
    border-radius: 9px;
    color: #334b61;
}

.drs-body .drs-timeline-actions {
    margin-top: 8px;
}

.drs-body .drs-timeline-actions button {
    border: none;
    padding: 4px 2px;
    font-size: 11px;
    color: #637a8d;
    background: none;
    text-decoration: underline;
    text-decoration-color: #c5d0d9;
    text-underline-offset: 3px;
}

.drs-body button:focus-visible,
.drs-body summary:focus-visible {
    outline: 2px solid #f97316;
    outline-offset: 2px;
}

@media (max-width: 400px) {
    .drs-body .drs-detail-actions {
        grid-template-columns: 1fr;
    }

    .drs-body .drs-latest {
        display: block;
    }

    .drs-body .drs-latest-time {
        display: block;
        text-align: left;
        margin-top: 4px;
    }
}

/* 모바일: 지도 바텀시트 안에서 후속 보고 버튼을 놓치지 않도록 한다. */
@media (max-width: 760px) {
    .drs-body .drs-detail-actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin: 7px -15px 13px;
        padding: 9px 15px max(9px, env(safe-area-inset-bottom));
        background: #fffffff2;
        border-top: 1px solid #e7ecf0;
        box-shadow: 0 -5px 17px #2536480e;
    }
}

@media (max-width: 400px) {
    .drs-body .drs-detail-actions {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
    }

    .drs-body .drs-detail-actions button {
        padding-inline: 9px;
        font-size: 11px;
    }
}


/* 간결한 사건 상세: 상태 → 현상 → 관찰 시각 → 행동 순서. */
.drs-body .drs-detail-header {
    padding: 4px 0 16px;
}

.drs-body .drs-detail-status-line {
    margin-bottom: 10px;
}

.drs-body .drs-detail-header h2 {
    font-size: clamp(21px, 2vw, 26px);
    line-height: 1.3;
    margin-bottom: 10px;
}

.drs-body .drs-observation-meta {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 5px 8px;
    color: #63778a;
    font-size: 12px;
    line-height: 1.5;
}

.drs-body .drs-observation-meta time {
    font-weight: 700;
    color: #43586c;
    font-variant-numeric: tabular-nums;
}

.drs-body .drs-detail-desc {
    font-size: 13px;
    line-height: 1.65;
    margin-top: 12px;
    color: #42596e;
    overflow-wrap: anywhere;
}

.drs-body .drs-detail-tabs {
    margin-bottom: 18px;
}

.drs-body .drs-current-situation {
    margin-bottom: 14px;
}

.drs-body .drs-current-situation h3 {
    font-size: 14px;
    margin-bottom: 12px;
}

.drs-body .drs-phenomenon-list {
    border: 1px solid #dde5ec;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.drs-body .drs-phenomenon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 54px;
    padding: 12px 13px;
}

.drs-body .drs-phenomenon-row + .drs-phenomenon-row {
    border-top: 1px solid #e7ecf1;
}

.drs-body .drs-phenomenon-ongoing .drs-phenomenon-name,
.drs-body .drs-phenomenon-newly_observed .drs-phenomenon-name,
.drs-body .drs-phenomenon-conflicting .drs-phenomenon-name {
    font-weight: 800;
    color: #1b2b3d;
}

.drs-body .drs-phenomenon-resolved .drs-phenomenon-name {
    color: #65778a;
    font-weight: 600;
}

.drs-body .drs-age-notice {
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid #efdba9;
    background: #fff8e7;
    color: #795617;
    font-size: 12px;
    line-height: 1.55;
}

.drs-body .drs-resolved-details {
    margin-top: 9px;
    color: #617688;
}

.drs-body .drs-resolved-details summary {
    width: fit-content;
    padding: 8px 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.drs-body .drs-resolved-details .drs-phenomenon-list {
    margin-top: 5px;
    background: #fafbfd;
}

.drs-body .drs-location-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 1px 0 12px;
    font-size: 12px;
    color: #718397;
}

.drs-body .drs-location-inline .drs-focus-button {
    margin: 0;
    padding: 6px 0;
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 750;
    color: #25658e;
    cursor: pointer;
}

.drs-body .drs-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin: 0 0 13px;
}

.drs-body .drs-detail-actions .drs-action-main {
    min-height: 46px;
    font-size: 13px;
    font-weight: 800;
}

.drs-body .drs-detail-actions .drs-action-secondary {
    background: #ffffff;
    border: 1px solid #d6e0e8;
    color: #486076;
    font-size: 12px;
}

.drs-body .drs-extra-information,
.drs-body .drs-secondary-actions {
    margin: 0;
    border: 0;
    padding: 0;
}

.drs-body .drs-extra-information summary,
.drs-body .drs-secondary-actions summary,
.drs-body .drs-timeline-options summary {
    color: #667b90;
    font-size: 12px;
    padding: 7px 0;
    width: fit-content;
    cursor: pointer;
}

.drs-body .drs-extra-information .drs-meta-grid {
    margin: 6px 0 9px;
    padding: 12px 14px;
    border-radius: 8px;
}

.drs-body .drs-secondary-actions-inner {
    padding: 4px 0 8px;
}

.drs-body .drs-timeline-head {
    padding-top: 2px;
}

.drs-body .drs-timeline-head h3 {
    font-size: 14px;
}

.drs-body .drs-timeline-options {
    margin-top: 8px;
}

.drs-body .drs-timeline-options .drs-timeline-actions {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 760px) {
    .drs-body .drs-detail-actions {
        /* 바텀시트 내 CTA는 보존하되, 보조 메타정보 위에 배치한다. */
        margin: 4px -15px 12px;
    }
}

@media (max-width: 360px) {
    .drs-body .drs-detail-actions {
        grid-template-columns: 1fr;
    }
}

/* === DRS 2026-10-22: 주의 수준을 과장하지 않는 지도·타임라인·후속 관찰 === */
.drs-map-marker-icon { background: transparent !important; border: 0 !important; }
.drs-map-marker-icon .drs-marker {
    display: grid; place-items: center;
    position: relative;
    width: 33px; height: 33px; border: 2px solid #fff;
    border-radius: 12px 12px 12px 4px; transform: rotate(-45deg);
    box-sizing: border-box; box-shadow: 0 3px 12px #23354455;
    background: #457d9b; color: #fff;
    font-size: 18px; font-weight: 900;
}
.drs-map-marker-icon .drs-marker-symbol {
    display: block;
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    background-color: currentColor;
    -webkit-mask: var(--drs-marker-icon) center / contain no-repeat;
    mask: var(--drs-marker-icon) center / contain no-repeat;
    mask-mode: alpha;
}
.drs-map-marker-icon .drs-marker-attention { background: #d95824; border-color: #fff; box-shadow: 0 0 0 2px #d95824, 0 3px 12px #23354460; }
.drs-map-marker-icon .drs-marker-uncertain { background: #b28115; }
.drs-map-marker-icon .drs-marker-past { background: #87949e; box-shadow: 0 2px 6px #1a2d332c; }
.drs-body .drs-map-legend {
    position: absolute; z-index: 450; left: 14px; bottom: 26px;
    max-width: min(470px, calc(100% - 90px));
    max-height: calc(100% - 40px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dce5eb; border-radius: 11px;
    box-shadow: 0 3px 14px #12273821; color: #345066;
    font-size: 12px;
}
.drs-body .drs-map-legend summary {
    min-height: 44px; padding: 13px 14px; cursor: pointer;
    font-weight: 700; line-height: 1.5;
}
.drs-body .drs-map-legend-items { display: flex; flex-wrap: wrap; gap: 10px 14px; padding: 0 14px 14px; }
.drs-body .drs-map-legend-items > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.drs-body .drs-map-legend small { flex-basis: 100%; color: #566c7d; font-size: 12px; line-height: 1.6; }
.drs-body .drs-legend-mark { width: 11px; height: 11px; display: inline-block; border-radius: 4px; background: #457d9b; }
.drs-body .drs-legend-attention { background: #d95824; outline: 1px solid #d95824; outline-offset: 1px; }
.drs-body .drs-legend-uncertain { background: #b28115; }
.drs-body .drs-legend-past { background: #87949e; }
.drs-body .drs-timeline-date {
    margin: 14px 0 16px; border-bottom: 1px solid #dae3eb;
    padding: 10px 0 10px; font-size: 12px; font-weight: 850;
    color: #314d65;
}
.drs-body .drs-timeline-date:first-child { margin-top: 0; }
.drs-body .drs-timeline-entry { padding-bottom: 25px; }
.drs-body .drs-timeline-stamps { display: grid; justify-items: end; gap: 3px; }
.drs-body .drs-timeline-time-main { font-variant-numeric: tabular-nums; font-size: 16px; color: #203247; font-weight: 850; }
.drs-body .drs-timeline-observed { font-size: 11px; color: #6a7e90; text-align: right; }
#drs-dialog-root .drs-dialog:has(.drs-observation-form) { width: min(620px,100%); max-height: min(860px,92dvh); padding: 25px; }
#drs-dialog-root .drs-observation-form { gap: 20px; }
#drs-dialog-root .drs-observation-context { margin: 0; padding: 10px 12px; background: #fff7f0; border-left: 3px solid #f97316; border-radius: 0 7px 7px 0; color: #314d65; font-size: 13px; font-weight: 700; line-height: 1.6; }
#drs-dialog-root .drs-followup-section { min-width: 0; padding: 0; margin: 0; border: 0; display: grid; gap: 12px; }
#drs-dialog-root .drs-followup-section legend { padding: 0 0 11px; color: #24394e; font-size: 15px; font-weight: 850; }
#drs-dialog-root .drs-followup-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#drs-dialog-root .drs-choice-tile { display: flex; align-items: center; gap: 9px; padding: 11px 12px; border: 1px solid #d9e3ea; border-radius: 9px; color: #40576b; background: #fff; cursor: pointer; font-size: 13px; }
#drs-dialog-root .drs-choice-tile:has(input:checked) { border-color: #ed731e; background: #fff5ee; color: #9f4f16; font-weight: 800; }
#drs-dialog-root .drs-choice-tile input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: #ef7416; }
#drs-dialog-root .drs-followup-phenomena { display: grid; gap: 9px; }
#drs-dialog-root .drs-followup-phenomenon { display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,180px); align-items: center; gap: 10px; padding: 9px 10px; background: #f7f9fc; border-radius: 9px; }
#drs-dialog-root .drs-followup-phenomenon strong { font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
#drs-dialog-root .drs-followup-phenomenon select { width: 100%; }
#drs-dialog-root .drs-followup-new > summary, #drs-dialog-root .drs-followup-extras > summary { padding: 10px 0; cursor: pointer; font-size: 13px; color: #526b82; }
#drs-dialog-root .drs-followup-extras-body { display: grid; gap: 14px; padding-top: 8px; }
#drs-dialog-root .drs-followup-targets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#drs-dialog-root .drs-followup-confirm { background: #f8fafc; padding: 12px; border: 1px solid #dce3e9; border-radius: 10px; }
#drs-dialog-root .drs-dialog-actions { position: sticky; bottom: -25px; padding: 12px 0 4px; background: #fff; border-top: 1px solid #e8edf1; }
@media (max-width: 550px) {
    .drs-body .drs-map-legend { left: 10px; }
    .drs-body .drs-timeline-stamps { justify-items: start; }
    .drs-body .drs-timeline-entry-head { align-items: flex-start; }
    #drs-dialog-root .drs-dialog:has(.drs-observation-form) {
        padding: 17px;
        max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    #drs-dialog-root .drs-followup-choices { grid-template-columns: 1fr; }
    #drs-dialog-root .drs-followup-phenomenon { grid-template-columns: 1fr; }
    #drs-dialog-root .drs-followup-targets { grid-template-columns: 1fr; }
}

#drs-dialog-root .drs-followup-photos > summary {
    cursor: pointer; padding: 12px 13px; margin-bottom: 9px;
    border-radius: 10px; border: 1px dashed #c5d3df;
    color: #39617b; font-size: 13px; font-weight: 750;
    background: #f7fafc;
}
#drs-dialog-root .drs-followup-photos[open] > summary { border-color: #ec9a65; background: #fff8f0; }

#drs-dialog-root .drs-observation-form .drs-checkbox-line {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 11px 12px;
    color: #40576b;
    font-size: 13px;
    line-height: 1.65;
    cursor: pointer;
}
#drs-dialog-root .drs-checkbox-line input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-height: 0;
    margin: 2px 0 0;
    padding: 0;
    accent-color: #f97316;
}
#drs-dialog-root .drs-checkbox-line > span { min-width: 0; }
#drs-dialog-root .drs-checkbox-line:has(input:focus-visible) { outline: 2px solid #002f5f; outline-offset: 3px; }

#drs-dialog-root .drs-dialog.drs-followup-dialog {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    scrollbar-gutter: auto;
    animation: drs-followup-enter 180ms ease-out;
}
#drs-dialog-root .drs-followup-dialog .drs-dialog-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #e1e8ef;
    background: #fff;
}
#drs-dialog-root .drs-followup-dialog h2 { margin: 0; font-size: 19px; }
#drs-dialog-root .drs-followup-dialog h2:focus { outline: none; }
#drs-dialog-root .drs-dialog-dismiss {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f2f5f8;
    color: #41566b;
    font-size: 26px;
    line-height: 1;
}
#drs-dialog-root .drs-dialog-dismiss:hover { background: #e7edf3; }
#drs-dialog-root .drs-followup-dialog .drs-observation-form {
    min-height: 0;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
#drs-dialog-root .drs-followup-dialog .drs-dialog-actions {
    bottom: -20px;
    margin-bottom: -20px;
    padding: 12px 0 20px;
}
#drs-dialog-root .drs-followup-dialog .drs-submit-progress,
#drs-dialog-root .drs-followup-dialog .drs-dialog-actions .drs-form-error {
    flex: 0 0 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
}
#drs-dialog-root .drs-followup-dialog .drs-submit-progress { color: #314d65; font-weight: 650; }
#drs-dialog-root .drs-followup-dialog button[aria-busy="true"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: wait;
}
#drs-dialog-root .drs-followup-dialog button[aria-busy="true"]::before {
    content: '';
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: drs-submit-spin 700ms linear infinite;
}
@keyframes drs-submit-spin { to { transform: rotate(360deg); } }
#drs-dialog-root .drs-form-error:empty { display: none; }
#drs-dialog-root .drs-report-registration { display: grid; gap: 18px; padding-top: 8px; }
#drs-dialog-root .drs-registration-times { display: grid; gap: 7px; }
#drs-dialog-root .drs-registration-times .drs-report-time {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: baseline;
    gap: 8px;
    color: #52667a;
    font-size: 12px;
    line-height: 1.65;
}
#drs-dialog-root .drs-registration-times time { color: #203a52; font-variant-numeric: tabular-nums; }
@keyframes drs-followup-enter {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    #drs-dialog-root .drs-dialog.drs-followup-dialog { animation: none; }
    #drs-dialog-root .drs-followup-dialog button[aria-busy="true"]::before { animation: none; }
}
@media (max-width: 550px) {
    #drs-dialog-root .drs-followup-dialog .drs-dialog-header { padding: 10px 14px; }
    #drs-dialog-root .drs-followup-dialog .drs-observation-form { padding: 16px; }
    #drs-dialog-root .drs-followup-dialog .drs-dialog-actions { bottom: -16px; margin-bottom: -16px; padding-bottom: 16px; }
}