/* memoStartPageStylesRemoved */

/* メモ一覧画面 */
.memo-view {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    padding: 0;
    background: #f6f6fb;
    color: #202225;
}

.memo-view::backdrop,
.memo-editor::backdrop {
    background: rgba(0, 0, 0, 0.26);
}

.memo-shell {
    min-height: 100%;
    padding:
        max(10px, env(safe-area-inset-top))
        max(14px, env(safe-area-inset-right))
        calc(24px + env(safe-area-inset-bottom))
        max(14px, env(safe-area-inset-left));
}

.memo-header {
    display: grid;
    grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.memo-header h2 {
    margin: 0;
    font-size: 22px;
    text-align: center;
}

.memo-back,
.memo-trash-toggle {
    min-height: 42px;
    border: 0;
    border-radius: 14px;
    padding: 7px 10px;
    background: #fff;
    color: #30343a;
    font-size: 15px;
    font-weight: 700;
}

.memo-back {
    justify-self: start;
}

.memo-trash-toggle {
    justify-self: end;
}

.memo-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    margin-bottom: 8px;
}

.memo-search {
    min-width: 0;
    height: 44px;
    border: 1px solid #d9dde3;
    border-radius: 14px;
    padding: 0 13px;
    background: #fff;
    font-size: 16px;
}

.memo-new {
    min-height: 44px;
    border: 0;
    border-radius: 14px;
    padding: 8px 15px;
    background: #168fe2;
    color: #fff;
    font-size: 15px;
    font-weight: 760;
}

.memo-reorder-help {
    margin: 6px 3px 12px;
    color: #737981;
    font-size: 12px;
}

.memo-list {
    display: grid;
    gap: 9px;
}

.memo-empty {
    margin: 28px 8px;
    color: #737981;
    text-align: center;
}

.memo-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(30, 45, 55, 0.08);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(25, 35, 45, 0.06);
}

.memo-row-main {
    min-width: 0;
    border: 0;
    padding: 12px 8px 11px 14px;
    background: transparent;
    color: inherit;
    text-align: left;
}

.memo-row-title {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
    font-size: 17px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.memo-row-preview {
    display: -webkit-box;
    overflow: hidden;
    color: #60666e;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.memo-row-date {
    display: block;
    margin-top: 7px;
    color: #8a9097;
    font-size: 11px;
}

.memo-drag-handle {
    display: grid;
    place-items: center;
    border: 0;
    border-left: 1px solid #eceef1;
    background: #fafbfc;
    color: #737981;
    font-size: 25px;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.memo-row.memo-dragging {
    position: relative;
    z-index: 5;
    opacity: 0.78;
    box-shadow: 0 12px 28px rgba(25, 35, 45, 0.18);
}

.memo-trash-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
}

.memo-restore,
.memo-permanent-delete {
    min-height: 38px;
    border: 0;
    border-radius: 12px;
    padding: 7px 10px;
    font-weight: 700;
}

.memo-restore {
    background: #e7f4ff;
    color: #0876bd;
}

.memo-permanent-delete {
    background: #ffe9eb;
    color: #be3341;
}

/* メモ編集画面 */
.memo-editor {
    width: min(94vw, 620px);
    max-width: 620px;
    max-height: calc(100dvh - 24px);
    border: 0;
    border-radius: 24px;
    padding: 0;
    background: #fff;
    color: #202225;
}

.memo-form {
    display: grid;
    gap: 10px;
    padding:
        18px
        18px
        calc(18px + env(safe-area-inset-bottom));
}

.memo-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.memo-form-header h2 {
    margin: 0;
    font-size: 21px;
}

.memo-close {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: #f0f1f4;
    color: #333;
    font-size: 25px;
}

.memo-form label {
    font-size: 14px;
    font-weight: 730;
}

.memo-form input,
.memo-form textarea {
    width: 100%;
    border: 1px solid #d8dce2;
    border-radius: 14px;
    padding: 11px 12px;
    background: #fff;
    color: #202225;
    font: inherit;
}

.memo-form textarea {
    min-height: 220px;
    resize: vertical;
    line-height: 1.55;
}

.memo-dates {
    min-height: 34px;
    color: #747a82;
    font-size: 12px;
    line-height: 1.5;
}

.memo-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
}

.memo-button,
.memo-save,
.memo-delete {
    min-height: 43px;
    border: 0;
    border-radius: 14px;
    padding: 9px 15px;
    font-size: 15px;
    font-weight: 750;
}

.memo-button {
    background: #eceef2;
    color: #30343a;
}

.memo-save {
    background: #168fe2;
    color: #fff;
}

.memo-delete {
    justify-self: start;
    background: #ffe9eb;
    color: #bd3040;
}

.memo-dates {
    white-space: pre-line;
}

.memo-row-trash {
    grid-template-columns: minmax(0, 1fr);
}

.memo-row-trash .memo-trash-actions {
    border-top: 1px solid #eceef1;
}

/* memoVisibleDragStyles */
.memo-shell {
    padding-bottom:
        calc(94px + env(safe-area-inset-bottom));
}

.memo-bottom-bar {
    position: fixed;
    z-index: 40;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding:
        9px
        max(12px, env(safe-area-inset-right))
        calc(9px + env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    border-top: 1px solid rgba(30, 45, 55, 0.1);
    background: rgba(246, 246, 251, 0.96);
    box-shadow: 0 -7px 22px rgba(25, 35, 45, 0.08);
}

.memo-bottom-button {
    min-height: 45px;
    border: 0;
    border-radius: 14px;
    padding: 8px 7px;
    background: #fff;
    color: #30343a;
    font-size: 15px;
    font-weight: 750;
}

.memo-bottom-new {
    background: #168fe2;
    color: #fff;
}

.memo-row {
    will-change: transform;
}

.memo-row.memo-dragging {
    opacity: 0.16;
}

.memo-drag-ghost {
    position: fixed;
    z-index: 10000;
    margin: 0;
    pointer-events: none;
    opacity: 0.96;
    transform: translate3d(0, 0, 0) scale(1.025);
    box-shadow: 0 18px 38px rgba(25, 35, 45, 0.24);
    will-change: top, transform;
}

body.memo-reordering {
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

/* memoFluidDragStyles */
.memo-drag-ghost {
    contain: layout paint style;
    transform-origin: center center;
    transition: none;
    will-change: transform;
}

.memo-row:not(.memo-dragging) {
    backface-visibility: hidden;
}

/* memoFloatingCardStyle */
.memo-row.memo-dragging {
    opacity: 0.28;
    border: 2px dashed rgba(38, 133, 109, 0.48);
    background: rgba(220, 243, 236, 0.72);
    box-shadow: none;
}

.memo-drag-ghost {
    border: 1px solid rgba(38, 133, 109, 0.34);
    border-radius: 19px;
    background: #fff;
    opacity: 1;
    box-shadow:
        0 20px 42px rgba(20, 35, 45, 0.24),
        0 0 0 3px rgba(86, 182, 154, 0.16);
}

.memo-drag-ghost .memo-drag-handle {
    border-left-color: rgba(38, 133, 109, 0.2);
    background:
        linear-gradient(
            180deg,
            #edf9f5,
            #daf2ea
        );
    color: #26856d;
}


/* memoCopyButtonStyles */
.memo-row-main {
    position: relative;
    padding-right: 70px;
}

.memo-copy-button {
    position: absolute;
    top: 9px;
    right: 7px;
    z-index: 3;
}

.memo-row-title {
    padding-right: 2px;
}

.memo-form-actions .editor-copy-button {
    margin-right: auto;
}

@media (max-width: 420px) {
    .memo-row-main {
        padding-right: 64px;
    }
}

/* memoDesktopTaskWidth */
@media (min-width: 760px) {
    .memo-view {
        width: min(960px, calc(100vw - 32px));
        max-width: 960px;
        margin-right: auto;
        margin-left: auto;
        box-sizing: border-box;
        border-radius: 22px 22px 0 0;
    }

    .memo-shell {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .memo-bottom-bar {
        right: auto;
        left: 50%;
        width: min(960px, calc(100vw - 32px));
        box-sizing: border-box;
        transform: translateX(-50%);
    }
}


/* backButtonCaretFix */
.memo-back,
.memo-close,
.memo-header button {
    cursor: pointer;
    caret-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* nonInputCursorAndSelectionFix */
html,
body,
body * {
    caret-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    cursor: default !important;
}

a,
button,
[role="button"],
label[for],
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer !important;
}

input:not([type]),
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
[contenteditable="true"] {
    caret-color: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    cursor: text !important;
}



/* memoGoogleDocLink */
.memo-google-doc-link {
    display: inline-flex;
    width: fit-content;
    min-height: 42px;
    align-items: center;
    margin: 4px 0 14px;
    padding: 0 14px;
    border: 1px solid #b9cbea;
    border-radius: 12px;
    background: #eef5ff;
    color: #1769aa;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer !important;
}

.memo-google-doc-link:hover {
    background: #e1edff;
}

.memo-google-doc-link:active {
    transform: scale(0.98);
}

.memo-google-doc-link[hidden] {
    display: none !important;
}


/* memoGoogleMissingDocumentWarning */
.memo-google-missing-warning {
    display: grid;
    width: 100%;
    gap: 10px;
    margin: 4px 0 14px;
    border:
        1px solid
        #e8ad4f;
    border-radius: 14px;
    padding: 13px 14px;
    background: #fff5df;
    color: #713f00;
}

.memo-google-missing-warning[hidden] {
    display: none !important;
}

.memo-google-missing-warning p {
    margin: 0;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.5;
}

.memo-google-recreate {
    width: fit-content;
    min-height: 43px;
    border: 0;
    border-radius: 12px;
    padding: 9px 14px;
    background: #d97706;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.memo-google-recreate:active {
    transform: scale(0.98);
    background: #b95f05;
}

.memo-google-recreate:disabled {
    opacity: 0.65;
    cursor: wait !important;
}


/* unifiedMemoTypography */
.memo-view,
.memo-editor,
.memo-view button,
.memo-editor button,
.memo-view input,
.memo-editor input,
.memo-view textarea,
.memo-editor textarea {
    font-family: var(--app-font);
}

.memo-header h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}

.memo-back,
.memo-trash-toggle,
.memo-new,
.memo-button,
.memo-save,
.memo-delete,
.memo-google-doc-link {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.memo-search,
.memo-form input,
.memo-form textarea {
    font-size: 16px;
    font-weight: 400;
}

.memo-row-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.memo-row-preview {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
}

.memo-row-date,
.memo-dates,
.memo-reorder-help {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.memo-form-header h2 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
}

.memo-form label {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

/* memoBannerPointer */
.memo-row,
.memo-row * {
    cursor: pointer !important;
}

/* memoBannerHoverEffect */
.memo-row {
    transition:
        transform 0.13s ease,
        box-shadow 0.13s ease,
        border-color 0.13s ease;
}

@media (hover: hover) and (pointer: fine) {
    .memo-row:not(.memo-dragging):hover {
        border-color:
            rgba(21, 151, 235, 0.18);

        box-shadow:
            0 10px 25px
            rgba(23, 32, 51, 0.11);

        transform:
            translateY(-1px);
    }

    .memo-row:not(.memo-dragging):active {
        transform:
            translateY(1px)
            scale(0.985);
    }
}

/* memoStickyHeader */
.memo-header {
    position: sticky;
    top: 0;
    z-index: 35;
    padding: 4px 0 12px;
    background: rgba(246, 246, 251, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
