/* Mobile responsive enhancements */
@media (max-width: 640px) {
    .container {
        margin: 0;
        padding: 12px;
        border-radius: 0;
        box-shadow: none;
    }

    header {
        align-items: stretch;
        gap: 12px;
    }

    h1 {
        font-size: 1.6em;
    }

    .header-controls {
        width: 100%;
        align-items: stretch;
    }

    .auth-controls {
        gap: 8px;
    }

    .auth-status {
        font-size: 12px;
    }

    .date-selector {
        gap: 8px;
    }

    .date-navigation {
        gap: 6px;
    }

    .nav-btn,
    .today-btn {
        flex: 0 0 auto;
        padding: 8px 10px;
    }

    .date-selector input {
        width: 100%;
        font-size: 14px;
    }

    .header-row,
    .time-entry {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .has-planned-merge::after {
        left: 40px;
        right: 0;
    }

    .header-row > div {
        padding: 10px 8px;
        font-size: 0.9em;
    }

    .input-field {
        padding: 6px 8px;
        font-size: 14px;
    }

    .timer-result-input {
        padding: 6px 8px;
        font-size: 13px;
    }

    .time-entry .time-slot-container {
        width: 40px;
        min-width: 0;
        max-width: 40px;
        box-sizing: border-box;
        overflow: hidden !important;
        padding: 0 1px !important;
        gap: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        background-color: #eceef1;
        box-shadow: none !important;
        transition: background-color 0.18s ease, box-shadow 0.18s ease, min-height 0.18s ease;
    }

    .time-entry .time-slot-container .time-label,
    .time-slot-label,
    .time-range-label {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-overflow: clip;
        box-sizing: border-box;
    }

    .time-entry .time-slot-container .time-slot-label {
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
    }

    .time-entry .time-slot-container .time-range-label {
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0;
        font-variant-numeric: tabular-nums;
    }

    /* Mobile time rail is read-only; keep timer and merge controls out of it. */
    .time-entry.merge-capable .time-slot-merge-affordance,
    .time-entry .time-slot-container .timer-controls-container,
    .time-entry .time-slot-container .timer-controls,
    .time-entry .time-slot-container .timer-btn,
    .time-entry .time-slot-container .timer-display,
    .time-entry .time-slot-container .timer-raw-display {
        display: none !important;
        pointer-events: none !important;
    }

    .time-entry.current-time-slot .time-slot-container,
    .time-entry.running-timer-slot .time-slot-container,
    .time-entry.paused-timer-slot .time-slot-container,
    .time-entry.completed-timer-slot .time-slot-container {
        background-color: #eceef1 !important;
        box-shadow: none !important;
    }

    .time-entry.current-time-slot .time-slot-container .time-label,
    .time-entry.running-timer-slot .time-slot-container .time-label,
    .time-entry.paused-timer-slot .time-slot-container .time-label,
    .time-entry.completed-timer-slot .time-slot-container .time-label {
        color: #2c3e50 !important;
    }

    .time-entry .time-slot-container.merged-time-main {
        overflow: visible !important;
        position: relative;
        isolation: isolate;
    }

    .time-entry .time-slot-container.merged-time-main .time-label,
    .time-entry .time-slot-container.merged-time-main .time-slot-label,
    .time-entry .time-slot-container.merged-time-main .time-range-label {
        position: relative;
        z-index: 3;
        visibility: visible !important;
        opacity: 1 !important;
        display: block;
    }

    .time-entry .time-slot-container.merged-time-main::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: var(--merged-block-height, 100%);
        background: #eceef1;
        border: none !important;
        border-bottom: 2px solid #ccc !important;
        box-shadow: inset -2px 0 0 #ddd;
        pointer-events: none;
        z-index: 1;
    }

    .time-entry.merge-hover .time-slot-container.merged-time-main::before,
    .time-entry.merge-selecting .time-slot-container.merged-time-main::before,
    .time-entry.merge-selected-range .time-slot-container.merged-time-main::before,
    .time-entry.existing-merged-range .time-slot-container.merged-time-main::before {
        border-bottom-color: var(--merge-outline) !important;
        box-shadow:
            inset -2px 0 0 var(--merge-outline),
            inset 0 2px 0 var(--merge-outline);
    }

    .timer-raw-display {
        display: none;
        font-family: "Courier New", monospace;
        font-size: 10px;
        font-weight: 700;
        color: #2c3e50;
        background: #ffffff;
        padding: 2px 4px;
        border-radius: 4px;
        border: 1px solid #d7dee6;
        min-width: 0;
        text-align: center;
        white-space: nowrap;
    }

    .timesheet,
    .time-entries,
    .time-entry {
        overflow: visible;
    }

    .split-visualization-planned .split-title-segment,
    .split-visualization-planned .split-grid-segment {
        border-radius: 8px;
    }

    .actions {
        gap: 10px;
    }

    .actions button {
        width: 100%;
        max-width: 320px;
    }

    .modal-content {
        width: 94%;
        max-height: 90vh;
    }

    .modal-header,
    .modal-body {
        padding: 16px;
    }

    .modal-header h3 {
        font-size: 1.25em;
    }

    .inline-plan-dropdown.inline-plan-dropdown-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: min(56vh, 520px);
        max-height: min(82vh, 720px);
        margin: 0;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        border: 1px solid rgba(221, 228, 234, 0.95);
        box-shadow: 0 -18px 36px rgba(8, 28, 52, 0.24);
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 2099;
    }

    .inline-plan-sheet-drag-handle {
        width: 100%;
        min-height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

    .inline-plan-sheet-drag-handle::before {
        content: '';
        width: 46px;
        height: 5px;
        border-radius: 999px;
        background: #cfd6dd;
    }



    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-options {
        max-height: min(44vh, 420px);
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-options-list {
        padding-bottom: 14px;
    }

    .inline-plan-input-row {
        grid-template-columns: 1fr;
    }

    .inline-plan-input-row.inline-plan-input-row-mobile-close {
        grid-template-columns: 36px minmax(0, 1fr) 40px 40px;
        gap: 0;
    }

    .inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn {
        min-width: 0;
        min-height: 36px;
        font-size: 16px;
    }

    body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry {
        filter: none;
        opacity: 1;
    }

    body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry.inline-plan-context-keep-clear {
        filter: none;
        opacity: 1;
    }

    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-task-cell {
        padding: 14px 14px 12px;
    }

    .inline-plan-task-cell {
        flex-direction: column;
        align-items: flex-start;
    }

    .inline-plan-task-main {
        width: 100%;
        align-items: center;
    }

    .inline-plan-option-meta {
        width: 100%;
        justify-content: flex-start;
    }

    .inline-plan-add-btn,
    .inline-plan-sync-btn {
        width: 100%;
    }

    .inline-plan-sub-row {
        grid-template-columns: 1fr;
    }

    .inline-plan-sub-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .inline-plan-sub-actions button {
        width: 100%;
    }

    .sub-activities-list {
        overflow-x: auto;
    }

    .sub-activity-row {
        grid-template-columns: minmax(0, 1fr) minmax(88px, 0.6fr) 56px;
    }

}

@media (max-width: 480px) {
    h1 {
        font-size: 1.45em;
    }

    .nav-btn,
    .today-btn {
        font-size: 13px;
    }

    .header-row,
    .time-entry {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .has-planned-merge::after {
        left: 40px;
        right: 0;
    }

    .header-row > div {
        padding: 8px 6px;
        font-size: 0.85em;
    }

    .input-field {
        font-size: 13px;
    }

    .timer-controls {
        gap: 4px;
    }

    .time-entry .time-slot-container {
        min-height: 46px;
    }

    .time-entry.time-ui-visible .time-slot-container {
        min-height: 46px;
        padding: 5px 2px;
    }

    .time-entry.time-ui-visible .time-slot-container .timer-controls {
        display: none !important;
        gap: 2px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .time-entry.time-ui-visible .time-slot-container .timer-btn {
        display: none !important;
        width: 14px;
        min-width: 14px;
        height: 14px;
        font-size: 7px;
        flex-basis: 14px;
    }

    .time-entry.time-ui-visible .time-slot-container .timer-display,
    .time-entry.time-ui-visible .time-slot-container .timer-raw-display {
        display: none !important;
        max-width: 34px;
        font-size: 6px;
        letter-spacing: -0.6px;
        line-height: 1;
        border-width: 0;
        border-radius: 3px;
    }

    .time-entry.time-ui-visible .time-slot-container .timer-btn .timer-btn-mobile-icon {
        font-size: 8px;
    }

    .inline-plan-dropdown,
    .plan-activity-menu {
        max-width: 92vw;
    }

    .sub-activity-row {
        grid-template-columns: 1fr;
    }
}

/* --- UX enhancement patch --- */
.status-strip { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.status-chip { font-size:12px; padding:4px 8px; border-radius:999px; background:#eef2f7; color:#445; }
.status-success { background:#e8f8ef; color:#1d6f42; }
.status-warn { background:#fff4df; color:#8a5a00; }
.status-error { background:#fdecec; color:#a42323; }
.status-info { background:#eaf4ff; color:#1f5c99; }
.day-start-selector { display:flex; align-items:center; gap:6px; }
.day-start-hint { font-size:12px; color:#667; margin-left:2px; }
.timer-btn-mobile-icon { display:none; }
.timer-btn-label { display:inline-block; line-height:1; }

.timer-controls-container { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; width:100%; max-width:44px; box-sizing:border-box; margin:0 auto; background:transparent; border:none; border-radius:0; box-shadow:none; }
.timer-controls { gap:2px; flex-direction:column; align-items:stretch; width:100%; }
.timer-btn { min-width:0; width:100%; height:16px; border-radius:4px; font-size:8px; font-weight:700; padding:0; }
.timer-display { width:100%; min-width:0; max-width:100%; font-size:7px; }

.notification-region { position:fixed; top:14px; right:14px; z-index:5000; display:flex; flex-direction:column; gap:8px; }
.toast { display:flex; align-items:center; gap:10px; min-width:220px; max-width:360px; padding:10px 12px; border-radius:10px; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.16); animation:toastIn .22s ease; }
.toast-info { background:#1c4278; }
.toast-success { background:#2d9d61; }
.toast-warn { background:#b7791f; }
.toast-error { background:#c0392b; }
.toast-action { margin-left:auto; border:none; background:rgba(255,255,255,.2); color:#fff; border-radius:6px; padding:4px 8px; cursor:pointer; }
.toast-close { flex:none; margin-left:auto; border:none; background:transparent; color:#fff; opacity:.75; font-size:18px; line-height:1; padding:2px 4px; border-radius:6px; cursor:pointer; }
.toast-action + .toast-close { margin-left:0; }
.toast-close:hover { opacity:1; background:rgba(255,255,255,.18); }
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.toast-action:focus-visible,
.toast-close:focus-visible,
.timer-btn:focus-visible {
  outline: 3px solid #1f6feb;
  outline-offset: 2px;
}

.toast-exit { animation:toastOut .22s ease forwards; }
@keyframes toastIn { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:translateY(0);} }
@keyframes toastOut { from { opacity:1; transform:translateY(0);} to { opacity:0; transform:translateY(-5px);} }

@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .inline-plan-dropdown.inline-plan-dropdown-sheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: min(56vh, 520px);
        max-height: min(82vh, 720px);
        margin: 0;
        padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
        border: 1px solid rgba(221, 228, 234, 0.95);
        box-shadow: 0 -18px 36px rgba(8, 28, 52, 0.24);
        display: flex;
        flex-direction: column;
        gap: 12px;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 2099;
    }

    .inline-plan-sheet-drag-handle {
        width: 100%;
        min-height: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        cursor: grab;
    }

    .inline-plan-sheet-drag-handle::before {
        content: '';
        width: 46px;
        height: 5px;
        border-radius: 999px;
        background: #cfd6dd;
    }



    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-options {
        max-height: min(44vh, 420px);
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-options-list {
        padding-bottom: 14px;
    }

    /* 시트 내용이 max-height를 넘기면 flex-shrink가 세부활동 패널을 눌러 종속칩이 잘린다.
       세부활동 패널은 자연 높이를 지키고, 넘치는 높이는 시트 스크롤이 흡수한다. */
    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-subsection-flow {
        flex: 0 0 auto;
    }

    /* 칩 보드는 시트에 남은 높이만큼만 차지하고 그 안에서 스크롤한다(상한 360px, 하한은 칩 두 줄).
       활동 카드(2026-10-07)로 보드 상한이 280→360px가 되자 폰에서 보드가 시트보다 커져 시트 자체가
       넘쳐 스크롤됐고, 보드·시트 두 겹 스크롤이 iPhone Safari에서 페이지로 새어 시트가 페이지를 따라
       움직이고 보드 안 스크롤이 먹히지 않았다. 시트가 넘치지 않으면 스크롤 칸은 보드 하나다. */
    .inline-plan-dropdown.inline-plan-dropdown-sheet .activity-chip-board-shell {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .inline-plan-dropdown.inline-plan-dropdown-sheet .activity-chip-board-shell > .activity-chip-board {
        flex: 1 1 auto;
        min-height: 96px;
        max-height: 360px;
    }

    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-subsection-flow {
        max-height: none;
        overflow: visible;
    }

    /* 세부활동이 많으면 시트를 한없이 늘리는 대신 패널 안에서 스크롤한다.
       min-height는 칩 한 줄(38px)을 담는 하한 — 이게 없으면 스크롤 영역이
       칩보다 얇아져 "잘린 칩"으로 보인다. */
    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-subsection-flow .inline-plan-sub-board {
        max-height: min(38vh, 280px);
        min-height: 44px;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .inline-plan-input-row.inline-plan-input-row-mobile-close {
        grid-template-columns: 36px minmax(0, 1fr) 40px 40px;
        gap: 0;
    }

    .inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn {
        min-width: 0;
        min-height: 36px;
        font-size: 16px;
    }

    body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry,
    body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry.inline-plan-context-keep-clear {
        filter: none;
        opacity: 1;
    }

    .inline-plan-dropdown.inline-plan-dropdown-sheet .inline-plan-task-cell {
        padding: 14px 14px 12px;
    }
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
    body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry.inline-plan-context-keep-clear {
        pointer-events: none;
    }

    body.inline-plan-sheet-open .inline-plan-sheet-context-target {
        z-index: 60;
        pointer-events: auto;
    }

    body.inline-plan-sheet-open .split-cell-wrapper.split-type-planned.inline-plan-sheet-context-target .planned-input {
        pointer-events: auto;
    }

    .inline-plan-input,
    .activity-child-composer-input,
    .activity-chip-card-composer-input,
    .inline-plan-child-composer-input,
    .sub-activity-row input,
    .sub-activity-row select,
    #planTitleInput,
    .plan-title-input,
    .timer-result-input,
    .input-field {
        font-size: 16px;
    }

    .plan-segment-title-edit-input {
        font-size: 16px;
    }

    .activity-child-composer-input,
    .sub-activity-row input,
    .sub-activity-row select,
    .timer-result-input,
    .input-field {
        min-height: 34px;
    }

    .plan-segment-resize-handle {
        /* 터치는 40px까지 넓히되, 좁은 세그먼트에서는 폭의 40%가 상한이다(interactions.css 기본 규칙과
           같은 비율) — 10분 세그먼트의 가운데는 라벨 탭(시트 열기)에 남긴다. */
        --plan-segment-handle-hitbox-width: 40px;
        width: min(var(--plan-segment-handle-hitbox-width), 40%);
        opacity: 1;
        touch-action: none;
    }

    .split-grid-segment[data-segment-kind="real-plan"] {
        --plan-segment-mobile-edge-zone: 36px; /* Mirrors PLAN_SEGMENT_MOBILE_EDGE_ZONE_PX in planned-segment-reorder-controller.js. */
    }

    .split-grid-segment[data-segment-kind="real-plan"]::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: min(var(--plan-segment-mobile-edge-zone), 42%);
        opacity: 0.34;
        z-index: 0;
        pointer-events: none;
        transition: opacity 0.12s ease;
    }

    .split-grid-segment[data-segment-kind="real-plan"]::after {
        right: 0;
        background:
            linear-gradient(to left, rgba(11, 38, 80, 0.18), rgba(11, 38, 80, 0.06) 58%, rgba(11, 38, 80, 0)),
            radial-gradient(circle at calc(100% - 18px) 50%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px);
    }

    .split-grid-segment[data-segment-kind="real-plan"].is-resizing-plan-segment::after {
        opacity: 0.48;
    }

    .split-grid-segment[data-segment-kind="real-plan"].is-resizing-plan-segment.plan-segment-resize-edge-right::after {
        opacity: 0.86;
    }

    .plan-segment-resize-handle-right {
        right: 0;
    }

    .plan-segment-resize-handle-right.plan-segment-boundary-resize-handle-shared {
        right: 0;
    }

    .plan-segment-boundary-resize-handle-line {
        width: 8px;
    }

    .split-grid-segment.is-short-plan-segment[data-segment-kind="real-plan"] .plan-segment-timer-time {
        display: none !important;
    }

}

@media (max-width: 640px) {
    header {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .header-top-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* One tidy row: [◀][오늘][▶] + flexible date input. */
    .date-selector {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 6px 8px;
        width: 100%;
    }

    .date-selector label {
        display: none;
    }

    .date-navigation {
        grid-column: 1;
        grid-row: 1;
        gap: 5px;
    }

    .nav-btn,
    .today-btn {
        min-width: 40px;
        min-height: 40px;
        padding: 6px 10px;
        border-radius: 10px;
        font-size: 13px;
    }

    .date-input-wrap {
        grid-column: 2;
        grid-row: 1;
        min-height: 40px;
        border-radius: 10px;
    }

    .date-selector input {
        min-height: 38px;
        padding: 5px 8px;
    }

    .date-display {
        font-size: 14px;
    }

    .auth-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px;
        margin-left: 0;
    }

    .auth-btn {
        min-height: 36px;
        padding: 5px 12px;
        border-radius: 10px;
        white-space: nowrap;
    }

    .header-row > div {
        padding: 8px 8px 9px;
    }

    /* Two clean rows: title + range picker, then the 3 mode buttons. */
    .planned-label {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title range"
            "modes modes";
        align-items: center;
        justify-items: stretch;
        gap: 5px;
        text-align: left;
    }

    .planned-label-text {
        grid-area: title;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.92);
    }

    .planned-mode-control-group {
        grid-area: modes;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .time-grid-range-controls {
        grid-area: range;
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 3px;
    }

    .time-grid-range-field > span {
        display: none;
    }

    .time-grid-range-field + .time-grid-range-field::before {
        content: "–";
        margin: 0 1px;
        color: rgba(255, 255, 255, 0.55);
        font-size: 11px;
    }

    .planned-slot-clear-mode-btn {
        min-height: 30px;
        padding: 5px 2px;
        border-radius: 7px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .time-grid-range-select,
    .time-grid-range-btn {
        min-height: 26px;
        max-width: 62px;
        font-size: 11px;
    }

    .header-row .time-label {
        white-space: nowrap;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
    }
}

@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .inline-plan-input-row.inline-plan-input-row-mobile-close {
        grid-template-columns: 36px minmax(0, 1fr) 40px 40px;
        gap: 2px;
    }

    .inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-close-btn,
    .inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-add-btn,
    .inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-sync-btn {
        min-width: 36px;
        min-height: 36px;
    }

    body.inline-plan-sheet-open #timeEntries.inline-plan-context-active .time-entry.inline-plan-context-keep-clear::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.18);
        pointer-events: none;
        z-index: 50;
    }

    body.inline-plan-sheet-open .inline-plan-sheet-context-target {
        position: relative;
        z-index: 60;
        opacity: 1;
        outline: 2px solid #2a4f86;
        outline-offset: 2px;
        box-shadow: 0 0 0 3px rgba(22, 58, 110, 0.28);
    }
}

/* 2026-07 light toolbar refresh: mobile sizing for the title-row tool buttons.
   Kept after the locked mobile rules above so these overrides win. */
@media (max-width: 640px) {
    /* The title text is gone and the range controls live in the popover, so
       the locked grid-template-areas layout above degenerates to an empty
       first row; stack the tool box plainly instead. */
    .header-row .planned-label {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* 계획 회복 진입(로그인 사용자 모두, 2026-10-21 금선 C)이 보이면 루틴·슬롯 삭제 옆 한 줄 — 제목 줄(sticky) 높이를 늘리지 않는다. */
    .header-row .planned-label.has-recovery-link {
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .header-row .planned-label.has-recovery-link .planned-mode-control-group {
        flex: 1 1 auto;
        min-width: 0;
    }

    .header-row .planned-label.has-recovery-link .sheet-recovery-link {
        padding: 0 10px;
        font-size: 12.5px;
    }

    /* 루틴·슬롯 삭제는 단추마다 '계획 회복' 같은 흰 상자다(2026-10-24 펭귄 지시) — 묶음은 상자 없이(위 잠긴 3칸 격자 대신) 두 상자를
       6px 사이로 늘어놓고 '계획 회복' 옆에 남은 폭을 반씩 나눠 갖는다(이름보다 좁아지지는 않는다). 글자·좌우 여백은 '계획 회복'과 같은 12.5px·10px. */
    .header-row .planned-mode-control-group {
        display: flex;
        gap: 6px;
    }

    .header-row .planned-routine-mode-btn,
    .header-row .planned-slot-clear-mode-btn {
        flex: 1 1 0;
        padding: 0 10px;
        font-size: 12.5px;
    }

    .header-row .time-grid-range-toggle-btn {
        min-height: 32px;
        padding: 0;
    }

    .header-row .time-grid-range-select,
    .header-row .time-grid-range-btn {
        min-height: 26px;
    }

    .header-row .time-grid-range-btn {
        min-width: 30px;
        padding: 0 6px;
    }

    .header-row .time-grid-range-controls {
        padding: 2px;
    }
}

/* 320px 폭에서도 세 상자(루틴·슬롯 삭제·계획 회복)가 한 줄에 서도록 좌우 여백을 8px로 — 10px이면 딱 맞아 글꼴이 조금만 넓어도 줄이 바뀐다. */
@media (max-width: 360px) {
    .header-row .planned-routine-mode-btn,
    .header-row .planned-slot-clear-mode-btn,
    .header-row .planned-label.has-recovery-link .sheet-recovery-link {
        padding: 0 8px;
    }
}

/* 2026-07 mobile header renewal: day title inside the sheet title band +
   single-line date nav. Kept after the locked mobile rules above so these
   overrides win. */
@media (max-width: 640px) {
    .header-controls {
        gap: 8px;
    }

    .header-row > .sheet-title-cell {
        padding: 6px 8px 0;
    }

    .day-title-input {
        width: 100%;
        min-width: 0;
        min-height: 38px;
        padding: 4px 10px;
        font-size: 16px;
    }

    /* One tidy row: [◀][ 날짜 ][▶][오늘]. display:contents lifts the nav
       buttons into the date-selector grid so the date input sits between them. */
    .date-selector {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 42px auto;
        grid-template-rows: auto;
        gap: 6px;
        width: 100%;
        order: 2;
    }

    .date-navigation {
        display: contents;
    }

    .date-selector .nav-btn,
    .date-selector .today-btn {
        min-width: 42px;
        min-height: 40px;
        margin: 0;
        padding: 6px 0;
    }

    #prevDayBtn {
        grid-column: 1;
        grid-row: 1;
    }

    #nextDayBtn {
        grid-column: 3;
        grid-row: 1;
    }

    #todayBtn {
        grid-column: 4;
        grid-row: 1;
        padding: 6px 14px;
    }

    /* min-width:0 + max-width:100% keep the native date box from punching
       through the sheet edge on narrow viewports. iOS Safari ignores the
       track width on native-appearance date inputs (the box then runs under
       the ▶ button), so strip the appearance as well. */
    .date-input-wrap {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 40px;
        margin: 0;
        overflow: hidden;
        border: 1px solid var(--border-strong);
        background-color: #fff;
        box-sizing: border-box;
        justify-content: center;
    }

    .date-selector input {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 38px;
        margin: 0;
        padding: 5px 4px 5px 8px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
    }

    .date-display {
        font-size: 14px;
    }

    /* Center the date + weekday exactly in the full-width mobile field: take
       the calendar icon out of flow (absolute, pinned to the right edge) so
       only the date/weekday participates in centering — otherwise the icon's
       width shifts the text slightly left of true center. */
    .date-picker-btn {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
    }

    /* iOS renders the date value in its own pseudo element; keep it centered
       and stop it from stretching the input beyond its grid track. */
    .date-selector input::-webkit-date-and-time-value {
        margin: 0;
        text-align: center;
    }

    /* Only the login/logout button remains in this row (the "로그인 필요"
       status chip is gone); park it on the right edge. */
    .auth-controls {
        display: flex;
        justify-content: flex-end;
        margin-left: 0;
        gap: 8px;
        order: 1;
    }

    .auth-btn {
        min-height: 40px;
        padding: 6px 12px;
    }
}

/* 2026-07 sheet input row without the old close (×) button: two tracks only.
   Same media condition as the locked mobile-close rules above; declared last
   so this override wins. */
@media (max-width: 768px), (hover: none), (pointer: coarse) {
    .inline-plan-input-row.inline-plan-input-row-mobile-close {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 6px;
    }

    /* Re-place the tracks: the old rules pinned the input to column 2 and
       the add button to column 3, next to the removed × in column 1. */
    .inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-input {
        grid-column: 1;
        border-left: 1px solid #dcdfe3;
        border-radius: 8px;
    }

    .inline-plan-input-row.inline-plan-input-row-mobile-close .inline-plan-add-btn {
        grid-column: 2;
        margin-left: 0;
    }
}

/* Guest landing hero: tighter padding on narrow screens
   (see foundation.css "Guest landing hero" for the base). */
@media (max-width: 640px) {
    .guest-hero {
        padding: 20px 16px 18px;
    }

    .guest-hero-title {
        font-size: 24px;
    }

    .guest-hero-cta-primary,
    .guest-hero-cta-secondary {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* 아주 좁은 화면(360px 이하): 날짜 칸이 "2026.07.13 (월)"과 오른쪽 캘린더
   아이콘을 좁은 그리드 트랙 안에 모두 담아야 하므로, 여백·간격·아이콘·글자
   크기를 살짝 줄여 날짜가 잘리지 않게 한다. */
@media (max-width: 360px) {
    .date-input-wrap {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .date-display {
        font-size: 13px;
    }

    /* Icon nudged to the edge and shrunk a touch so the perfectly-centered
       date never overlaps it on the narrowest phones. */
    .date-picker-btn {
        right: 8px;
    }

    .date-picker-btn svg {
        width: 14px;
        height: 14px;
    }
}


/* 불편사항 플로팅 버튼: 좁은 화면에서는 시트 조작을 덜 가리도록 작게 줄인다.
   다이얼로그는 좌우 여백만 남기고 폭을 채운다(styles/foundation.css의 기본 규칙에
   max-width가 있어 데스크톱에서는 그대로다). */
@media (max-width: 640px) {
    .feedback-fab {
        right: 12px;
        bottom: 12px;
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
    }

    .feedback-dialog {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 16px;
    }
}

/* 2026-10-08 LUHITZ PLANNER 로고: 모바일 첫 줄은 [로고 …… 원장·로그인], 둘째 줄은 날짜.
   위의 열 방향 헤더(첫 줄 = 오른쪽 정렬 로그인 버튼)를 줄바꿈 행으로 바꿔 로고가
   비어 있던 왼쪽 자리를 쓴다. 마지막에 두어 앞선 모바일 규칙을 이긴다. */
@media (max-width: 640px) {
    .header-top-row {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .header-brand {
        order: 0;
        gap: 7px;
    }

    .header-brand-mark {
        width: 32px;
        height: 32px;
    }

    .header-brand-wordmark {
        width: 210px;
        height: auto;
    }

    .header-top-row > .auth-controls {
        order: 1;
        margin-left: auto;
    }

    .header-top-row > .date-selector {
        order: 2;
        flex: 1 0 100%;
    }

}

/* ============================================================
   2026-10-09 디자인 정돈(사용자 지시 — 권고안 전부, 별도 브랜치 시안).
   뒤에 붙인 덮어쓰기라 위의 잠긴 규칙 글자는 그대로다.
   ============================================================ */

/* 1. 빈칸: 점선 상자를 걷고 옅은 바탕만. 마우스를 올리면(:hover 규칙) 점선이 그대로 돌아와 '여기 누를 수 있다'를 알린다. */
.split-visualization-planned .split-grid-segment-virtual-rest {
  border-color: transparent;
  border-bottom-color: transparent !important;
  background: rgba(16, 38, 64, 0.04) !important;
  box-shadow: none;
}

/* 2. 저장·동기화 상태: 평소(저장됨·동기화 중)는 회색 글자 한 줄로 조용히. 경고·실패만 색 배지로 남긴다. */
.status-strip .status-chip.status-success,
.status-strip .status-chip.status-info,
.status-strip .status-chip.status-idle {
  background: transparent;
  color: #7a8496;
  padding-left: 0;
  padding-right: 0;
}

/* 4. 활동 칩의 연필: '이름 수정' 모드에서만 보인다. */
.activity-chip-rename-icon {
  display: none;
}

.activity-chip-board-rename-mode .activity-chip-rename-icon {
  display: inline;
}

.activity-chip-board-rename-mode .activity-chip.activity-chip-renaming .activity-chip-rename-icon {
  display: none;
}

/* 6. '날짜:' 글자: 바로 옆이 날짜 칸이라 눈에서는 감추고 화면 읽기에는 남긴다. */
.date-selector > label[for="date"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* 빈 색상 점: 사선(금지 기호처럼 보임) 대신 옅은 점선 링 — 색상 선택 진입점은 유지. */
.activity-chip-color-dot.activity-chip-color-dot-empty { border: 1px dashed rgba(16, 38, 64, 0.28); background: transparent; box-shadow: none; }
.activity-chip-color-dot.activity-chip-color-dot-empty::after { display: none; }

/* PC 날짜 줄을 모바일과 같은 순서로: [◀][ 날짜 📅 ][▶][오늘]. 모바일 규칙(≤640px)과 같은
   방식으로 내비 버튼을 date-selector 그리드로 끌어올려 날짜 칸이 ◀▶ 사이에 앉는다. */
@media (min-width: 641px) {
  .date-selector {
    display: grid;
    grid-template-columns: auto auto auto auto;
    align-items: center;
    gap: 6px;
  }

  .date-navigation {
    display: contents;
  }

  #prevDayBtn { grid-column: 1; grid-row: 1; }
  .date-selector .date-input-wrap { grid-column: 2; grid-row: 1; margin: 0; }
  #nextDayBtn { grid-column: 3; grid-row: 1; }
  #todayBtn { grid-column: 4; grid-row: 1; }
}

/* ============================================================
   시트 상단 B1(2026-10-23 펭귄 선택 — 시안 docs/renewal-sketch/sheet-top-luhitz.html B1, 뼈대 sheet-top.html B안 '표준 ☰ 메뉴').
   데스크톱 한 줄 [로고 … ◀ 날짜 ▶ · 오늘 · ☰], 휴대폰 두 줄 [로고 … ☰] / [◀ 날짜 ▶ · 오늘]. 원장 단추는 없다(같은 날 펭귄 지시 —
   /ledger 페이지는 그대로). ☰ 안은 계정 주소(앞에 금 ✦) · 메모(관리자, 남색 알약 + 금 글자 꼬리표) · 로그아웃.
   ◀ 날짜 ▶는 이어 붙은 상자 하나(칸막이는 위아래가 짧은 가는 선) — 단추 7개가 상자 3개(날짜 · 오늘 · ☰)가 된다.
   DESIGN.md Brand accents: 시트 위 버튼 줄은 흰 몸체 + #d6dbe1 1px, 금 테두리 없음, hover만 옅은 금. 마지막에 두어 앞선 머리 규칙을 이긴다.
   ============================================================ */
.date-selector {
  column-gap: 0;
}

.date-selector #todayBtn {
  margin-left: 8px;
}

.date-selector #prevDayBtn,
.date-selector #nextDayBtn {
  position: relative;
}

.date-selector #prevDayBtn {
  border-right: 0;
  border-radius: 10px 0 0 10px;
}

.date-selector #nextDayBtn {
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

.date-selector .date-input-wrap {
  border-color: #d6dbe1;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
}

.date-selector #prevDayBtn::after,
.date-selector #nextDayBtn::before {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: #e5e9ed;
  pointer-events: none;
}

.date-selector #prevDayBtn::after { right: 0; }
.date-selector #nextDayBtn::before { left: 0; }

/* 이어 붙은 상자라 hover·누름은 바탕만 옅은 금으로(테두리를 칸마다 바꾸면 이음매가 끊겨 보인다). 키보드 포커스 고리는 이웃 위로. */
.date-selector .nav-btn:hover {
  border-color: #d6dbe1;
}

.date-selector .nav-btn:focus-visible,
.date-selector .date-input-wrap:focus-within {
  z-index: 1;
}

.auth-controls {
  display: flex;
  align-items: center;
  gap: 0;
}

.header-menu {
  position: relative;
  z-index: 60;
  display: inline-flex;
  flex: none;
}

.header-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #d6dbe1;
  border-radius: 10px;
  background: #ffffff;
  color: #163a6e;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.header-menu-btn svg {
  display: block;
  width: 20px;
  height: 20px;
}

.header-menu-btn:hover {
  border-color: rgba(184, 143, 62, 0.55);
  background: var(--lz-ivory, #fffdf8);
}

.header-menu-btn[aria-expanded="true"] {
  border-color: #163a6e;
  background: #f2f4f8;
}

.header-menu-btn:focus-visible {
  outline: none;
  box-shadow: var(--lz-focus, 0 0 0 2px #ffffff, 0 0 0 4px #163a6e);
}

.header-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 214px;
  max-width: min(320px, calc(100vw - 26px));
  padding: 6px;
  border: 1px solid #e3e7e9;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(8, 28, 52, 0.16), 0 2px 6px rgba(8, 28, 52, 0.06);
  text-align: left;
}

.header-menu-panel[hidden],
.header-menu-panel [hidden] {
  display: none !important;
}

.header-menu-who {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 4px;
  padding: 7px 10px 9px;
  border-bottom: 1px solid #eef1f4;
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-all;
}

.header-menu-who::before {
  content: "\2726";
  flex: none;
  color: #c99a45;
  font-size: 11px;
}

.header-menu-panel .header-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: #14254a;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transform: none;
}

.header-menu-panel .header-menu-item:hover,
.header-menu-panel .header-menu-item:focus-visible {
  outline: none;
  border: 0;
  background: #fffaf0;
  box-shadow: inset 0 0 0 1px rgba(184, 143, 62, 0.35);
  color: #14254a;
}

.header-menu-panel .header-menu-item:active {
  background: #f6f0e2;
  transform: none;
}

/* 항목 그림: 글자는 updateAuthUI가 바꾸므로(로그아웃/Google 로그인) 그림은 마스크로 그린다. */
.header-menu-panel .header-menu-item::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: #163a6e;
  -webkit-mask: var(--header-menu-icon) center / contain no-repeat;
  mask: var(--header-menu-icon) center / contain no-repeat;
}

.header-menu-panel .memo-link {
  --header-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h10l4 4V20.5H5z'/%3E%3Cpath d='M14.5 3.5V8H19M8.5 12.5h7M8.5 16h5'/%3E%3C/svg%3E");
}

/* 업무: 체크 표시가 있는 목록(직접 그림 — 외부 아이콘 아님). */
.header-menu-panel .work-link {
  --header-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l1.6 1.6L8.5 5M4 12.5l1.6 1.6 2.9-3.1M4 18.5l1.6 1.6 2.9-3.1M11.5 7h8.5M11.5 13h8.5M11.5 19h8.5'/%3E%3C/svg%3E");
}

.header-menu-panel .auth-btn {
  --header-menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14'/%3E%3Cpath d='M10 16.5 5.5 12 10 7.5M5.5 12H15'/%3E%3C/svg%3E");
  color: #475569;
}

.header-menu-panel .auth-btn::before {
  background: #64748b;
}

.header-menu-tag {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1c4278, #0f2c57);
  color: #f2c96a;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
}

.header-menu-sep {
  height: 1px;
  margin: 5px 6px;
  background: #eef1f4;
}

/* 데스크톱: [◀ 날짜 ▶ · 오늘 · ☰]를 오른쪽에 한 묶음으로(시안 B1). */
@media (min-width: 641px) {
  .header-top-row > .date-selector {
    margin-left: auto;
  }

  .header-top-row > .auth-controls {
    margin-left: 0;
  }
}

/* 태블릿(641~900px — 한 줄은 약 885px부터 들어간다; 2026-10-26 워드마크를 330 → 370px로 키우며 860에서 올림): 한 줄에 다 들어가지 않으니 휴대폰과 같은 두 줄 — [로고 … ☰] / [◀ 날짜 ▶ · 오늘]이 줄을 다 쓴다
   (날짜 묶음만 따로 오른쪽 아래로 내려가던 것). */
@media (min-width: 641px) and (max-width: 900px) {
  .header-top-row > .auth-controls {
    order: 1;
    margin-left: auto;
  }

  .header-top-row > .date-selector {
    order: 2;
    flex: 1 0 100%;
    margin-left: 0;
    grid-template-columns: 44px minmax(0, 1fr) 44px auto;
  }

  /* 휴대폰과 같이 날짜 글자는 가운데, 달력 그림은 오른쪽 끝에(글자 가운데 맞춤에서 빠지게). */
  .date-selector .date-input-wrap {
    width: 100%;
    justify-content: center;
  }

  .date-selector .date-display {
    margin: 0 auto;
  }

  .date-selector .date-picker-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-left: 0;
    transform: translateY(-50%);
  }
}

@media (max-width: 640px) {
  .date-selector #todayBtn {
    margin-left: 6px;
  }

  .header-menu-btn {
    width: 40px;
    height: 40px;
  }
}

/* 아주 좁은 화면(360px 이하): 로고를 한 단 줄여(아이콘 30px + 글자 190px — 2026-10-26 글귀를 빼며 150에서 키움) ☰와 한 줄에 두고, 날짜 칸의 달력 그림은 뺀다 —
   날짜 칸 전체가 달력을 여는 단추라 그림이 없어도 되고, 320px에서 "(금)"과 달력 그림이 겹쳤다. */
@media (max-width: 360px) {
  .header-brand-mark {
    width: 30px;
    height: 30px;
  }

  .header-brand-wordmark {
    width: 190px;
  }

  .date-selector .date-picker-btn {
    display: none;
  }
}

@media screen and (prefers-reduced-motion: reduce) {
  .header-menu-btn {
    transition: none;
  }
}