@import url("commonAvatar.css?v=20261009-avatar-v1");
:root {
    --moyo-header-height: 54px;
    --moyo-app-sidebar-width: 272px;
    --moyo-blue: #4A90E2;
    --moyo-blue-strong: #2563eb;
    --moyo-mint: #39CDB5;
    --moyo-purple: #8b5cf6;
    --moyo-text: #243041;
    --moyo-muted: #667085;
    --moyo-line: #e8edf3;
}

html { overflow-x: hidden; }

/* 로그인 후 앱 shell 전용 보정: 비로그인 홈/랜딩에는 적용하지 않는다. */
body.moyo-app-sidebar-enabled {
    padding-top: var(--moyo-header-height);
    padding-left: var(--moyo-app-sidebar-width);
    transition: padding-left .22s ease;
}

body.moyo-app-sidebar-enabled.moyo-app-sidebar-collapsed {
    padding-left: 0;
}

body.moyo-app-sidebar-enabled > .moyo-header {
    width: 100%;
    margin-left: 0;
}


/* ===== App sidebar ===== */
body.moyo-shell-fullscreen .moyo-header,
body.moyo-shell-fullscreen #moyoAppSidebar,
body.moyo-shell-fullscreen #moyoAppSidebarBackdrop { visibility: hidden; pointer-events: none; }
html:fullscreen .moyo-header,
html:fullscreen #moyoAppSidebar,
html:fullscreen #moyoAppSidebarBackdrop,
body:has(#moyoDeskClock[open][data-fullscreen="true"]) .moyo-header,
body:has(#moyoDeskClock[open][data-fullscreen="true"]) #moyoAppSidebar,
body:has(#moyoDeskClock[open][data-fullscreen="true"]) #moyoAppSidebarBackdrop { display: none; }
.moyo-header[popover] { overflow:visible; margin: 0; padding: 0; bottom: auto; border: 0; border-bottom: 1px solid #e9eef4; }
.moyo-app-sidebar[popover] { margin: 0; padding: 0; right: auto; height: calc(100dvh - var(--moyo-header-height)); border: 0; border-right: 1px solid var(--moyo-line); color: inherit; }
.moyo-app-sidebar-backdrop[popover] { margin: 0; padding: 0; border: 0; width: auto; height: auto; }
.moyo-app-sidebar {
    position: fixed;
    top: var(--moyo-header-height);
    bottom: 0;
    left: 0;
    z-index: 920;
    width: var(--moyo-app-sidebar-width);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #fff;
    border-right: 1px solid var(--moyo-line);
    box-shadow: 8px 0 28px rgba(15, 23, 42, .035);
    transform: translateX(0);
    transition: transform .22s ease;
    font-family: "Pretendard", sans-serif;
}

body.moyo-app-sidebar-collapsed .moyo-app-sidebar {
    transform: translateX(-100%);
}

.moyo-app-sidebar-layout {
    min-height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.moyo-app-sidebar-scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px 14px;
}

.moyo-app-sidebar-fixed { display: none; }
.moyo-app-sidebar-friends-section { margin-top: 0; }

.moyo-app-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.moyo-app-sidebar-scroll::-webkit-scrollbar-thumb { background: #d7e1ea; border-radius: 999px; }
.moyo-app-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }

.moyo-app-sidebar-section + .moyo-app-sidebar-section { margin-top: 18px; }
.moyo-app-sidebar-groups-section { margin-top: 0; }
.moyo-app-sidebar-friends-top + .moyo-app-sidebar-groups-section { margin-top: 16px; }

.moyo-app-sidebar-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 8px;
}

.moyo-app-sidebar-section-title {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.moyo-app-sidebar-section-title-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s ease;
}

.moyo-app-sidebar-section-title-link:hover,
.moyo-app-sidebar-section-title-link:focus-visible {
    color: var(--moyo-blue-strong);
}

.moyo-app-sidebar-section-title-link:focus-visible {
    outline: 2px solid rgba(74, 144, 226, .22);
    outline-offset: 3px;
    border-radius: 4px;
}

.moyo-app-sidebar-add-action {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #98a2b3;
    font: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.moyo-app-sidebar-add-action:hover,
.moyo-app-sidebar-add-action:focus-visible {
    color: var(--moyo-blue-strong);
    background: #f1f7fd;
}

.moyo-app-sidebar-add-action:focus-visible {
    outline: 2px solid rgba(74, 144, 226, .22);
    outline-offset: 2px;
}

.moyo-app-sidebar-section-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--moyo-blue-strong);
    background: #f8fbff;
    border: 1px solid #dbeafe;
    box-shadow: 0 3px 10px rgba(74, 144, 226, .08);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.moyo-app-sidebar-section-action:hover {
    color: #1d4ed8;
    background: #eef6ff;
    border-color: #bfdbfe;
    box-shadow: 0 6px 14px rgba(74, 144, 226, .12);
    transform: translateY(-1px);
}

.moyo-app-sidebar-main-link,
.moyo-app-project-link,
.moyo-app-workspace-home,
.moyo-app-sidebar-bottom-link { text-decoration: none; }

.moyo-app-sidebar-main-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.moyo-app-sidebar-main-link:hover,
.moyo-app-sidebar-main-link.active {
    background: #eef6ff;
    color: var(--moyo-blue-strong);
}


.moyo-app-sidebar-link-icon { width: 20px; text-align: center; }
.moyo-app-workspace + .moyo-app-workspace { margin-top: 5px; }

.moyo-app-workspace-row { display: flex; align-items: center; gap: 4px; }
.moyo-app-workspace-entry { --moyo-interaction-color:#119c8c;--moyo-action-hover-background:#ecfbf8;--moyo-interaction-pressed:#ddf6ef;--moyo-interaction-focus:rgba(57,205,181,.35);display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; min-height: 46px; padding: 5px 9px; box-sizing: border-box; border-radius: 13px; text-decoration: none; color: #344054; background: var(--moyo-action-background, transparent); }
.moyo-app-workspace.current .moyo-app-workspace-entry {--moyo-action-color:#119c8c;--moyo-action-background:#ecfbf8;color:#119c8c;}
.moyo-app-workspace-entry:focus-visible { outline:2px solid rgba(57,205,181,.35); outline-offset: 1px; }
.moyo-app-workspace-toggle {
    width: 32px;
    flex: 0 0 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border: 0;
    border-radius: 13px;
    background: var(--moyo-action-background, transparent);
    color: #344054;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.moyo-app-workspace-toggle:hover {
    background: #f6fafb;
}

.moyo-app-workspace.current > .moyo-app-workspace-toggle {
    background: linear-gradient(90deg, rgba(57, 205, 181, .08), rgba(139, 92, 246, .06));
    color: #2f3d4f;
}

.moyo-app-workspace-toggle:focus {
    outline: none;
}

.moyo-app-workspace-toggle:focus-visible {
    outline: 2px solid rgba(57, 205, 181, .24);
    outline-offset: 1px;
}

.moyo-app-workspace-avatar {
    position: relative;
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px;
    background: transparent;
}

.moyo-app-workspace-avatar img,
.moyo-app-workspace-avatar-fallback {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    object-fit: cover;
    border: 0;
    box-sizing: border-box;
}

.moyo-app-workspace-avatar img { display: block; background: transparent; }

.moyo-app-workspace-avatar-fallback {
display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    background: var(--moyo-color-surface-soft,#f1f3f6);
    color: var(--moyo-color-text-soft,#667085);
}
.moyo-app-workspace-avatar-fallback.show { display: flex; }

.moyo-app-workspace-name {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 900;
}

.moyo-app-workspace-chevron {
    width: 24px;
    height: 24px;
    margin-right: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    border-radius: 8px;
    color: #8090a6;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    transition: transform .18s ease, color .16s ease, background .16s ease;
}
.moyo-app-workspace-toggle:hover .moyo-app-workspace-chevron,
.moyo-app-workspace.current > .moyo-app-workspace-toggle .moyo-app-workspace-chevron {
    color: #65758a;
    background: #f0f5f7;
}
.moyo-app-workspace.open .moyo-app-workspace-chevron { transform: rotate(180deg); }

.moyo-app-workspace-menu {
    display: none;
    margin: 3px 0 7px 16px;
    padding: 4px 0 4px 13px;
    border-left: 1px solid #e7edf3;
}
.moyo-app-workspace.open .moyo-app-workspace-menu { display: block; }

.moyo-app-project-link,
.moyo-app-workspace-home {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 10px;
    margin: 2px 0;
    border-radius: 9px;
    color: var(--moyo-muted);
    font-size: 12px;
    font-weight: 700;
}

.moyo-app-project-link:hover,
.moyo-app-workspace-home:hover,
.moyo-app-project-link.active,
.moyo-app-workspace-home.active {
    background: #f4f0ff;
    color: #6d45d8;
}

.moyo-app-workspace-home:hover,
.moyo-app-workspace-home.active {
    background: #ecfbf8;
    color: #119c8c;
}

.moyo-app-project-link.active,
.moyo-app-workspace-home.active { font-weight: 900; }

.moyo-app-project-name {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.moyo-app-project-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--moyo-purple);
}
.moyo-app-project-dot.personal { background: var(--moyo-blue); }
.moyo-app-project-dot.home { background: var(--moyo-mint); }
.moyo-app-project-link.active .moyo-app-project-dot { background: var(--moyo-purple); }
.moyo-app-project-link.active .moyo-app-project-dot.personal { background: var(--moyo-purple); }
.moyo-app-workspace-home.active .moyo-app-project-dot.home { background: var(--moyo-mint); }


.moyo-app-sidebar-empty {
    padding: 9px 12px;
    color: #a3adb8;
    font-size: 11px;
    line-height: 1.45;
}
.moyo-app-sidebar-empty.nested { padding-left: 10px; }



.moyo-app-sidebar-friends-section {
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f4f8;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-section-heading {
    padding: 0 8px 6px;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-section-title {
    color: #7b8794;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-main-link {
    min-height: 36px;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-main-link + .moyo-app-sidebar-main-link {
    margin-top: 2px;
}


/* 동일한 자리에 두 배너를 교차 표시한다. */
.moyo-sidebar-banner-carousel { position: relative; flex: 0 0 60px; width: 234px; height: 60px; margin: 0 auto 4px; }
body .moyo-app-sidebar .moyo-sidebar-banner-carousel .moyo-app-sidebar-banner { position: absolute; inset: 0; margin: 0; transition: opacity .45s ease; }
.moyo-sidebar-banner-carousel [aria-hidden="true"] { opacity: 0; pointer-events: none; }
body .moyo-app-sidebar .moyo-sidebar-banner-carousel .moyo-sidebar-business-banner { padding: 0; }
.moyo-sidebar-business-banner > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.moyo-sidebar-business-banner::after { display: none; }
@media (prefers-reduced-motion: reduce) { body .moyo-app-sidebar .moyo-sidebar-banner-carousel .moyo-app-sidebar-banner { transition: none; } }
/* 사이드바 하단 현재 날씨: 카드 없이 푸터 위에 한 줄 정보로만 표시 */
body .moyo-app-sidebar .moyo-app-sidebar-banner {
 position: relative; flex: 0 0 60px; display: flex; align-items: center; isolation: isolate; overflow: hidden;
 width: 234px; height: 60px; box-sizing: border-box; align-self: center; margin: 0 auto 4px; padding: 8px 12px;
 border: 0; border-radius: 0; color: #263c60; text-decoration: none;
 background: linear-gradient(115deg,rgba(223,249,238,.9),rgba(230,242,255,.9) 55%,rgba(238,231,255,.9)),var(--moyo-action-background,#fff);
}
.moyo-app-sidebar-banner::after { content: ''; position: absolute; width: 86px; height: 86px; border-radius: 50%; right: -15px; top: -13px; background: rgba(255,255,255,.45); z-index: -1; }
.moyo-sidebar-banner-copy { position: relative; z-index: 2; }
.moyo-sidebar-banner-copy > span { display: block; font-size: 10px; color: #476078; line-height: 1.5; letter-spacing: -.35px; }
.moyo-sidebar-banner-copy strong { display: flex; align-items: center; gap: 3px; font-size: 17px; letter-spacing: -.7px; line-height: 1.35; font-weight: 700; }
.moyo-sidebar-banner-wordmark { position: relative; display: inline-block; width: 80px; height: 24px; overflow: hidden; flex: 0 0 80px; }
.moyo-sidebar-banner-wordmark img { position: absolute; width: 111.6px; height: auto; max-width: none; left: -31.6px; top: -5.3px; }
.moyo-sidebar-banner-character { position: absolute; right: 5px; top: 2px; width: 56px; height: 56px; object-fit: contain; transform: rotate(8deg); }
.moyo-app-sidebar-banner:focus-visible { outline: 2px solid #4385f1; outline-offset: 3px; }
.moyo-status-item { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; flex: 0 0 auto; }
.moyo-status-text { display: block; font: inherit; color: inherit; line-height: inherit; }
.moyo-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; }
.moyo-sidebar-status { display: flex; align-items: center; gap: 10px; padding: 10px 22px 8px; flex: 0 0 auto; color: #667085; font-size: 12px; font-weight: 600; line-height: 18px; font-variant-numeric: tabular-nums; }
body .moyo-sidebar-clock { position: relative; border: 0; border-radius: 8px; padding: 0; font: inherit; --moyo-action-color: #667085; }
body .moyo-sidebar-alarm { position: relative; flex: 0 0 28px; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; margin-left: auto; background: var(--moyo-action-background,transparent); }
.moyo-sidebar-alarm img { display: block; width: 26px; height: 26px; }
.moyo-live-clock { display: inline-block; position: relative; width: 26px; height: 26px; flex: 0 0 auto; }
.moyo-live-clock img { display: block; width: 100%; height: 100%; object-fit: contain; }
.moyo-clock-hand { position: absolute; left: 50%; bottom: 50%; width: 6%; border-radius: 99px; background: #689bea; transform-origin: 50% 100%; }
.moyo-clock-hour { height: 20%; }
.moyo-clock-minute { height: 27%; width: 5%; }
.moyo-clock-pivot { position: absolute; left: 50%; top: 50%; width: 10%; height: 10%; transform: translate(-50%,-50%); border-radius: 50%; background: #4ca4ee; }
.moyo-desk-alarm-panel [hidden] { display: none; }
.moyo-app-sidebar-weather { min-width: 0; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-sizing: border-box; }

.moyo-app-sidebar-weather[hidden] { display: none; }

.moyo-app-sidebar-weather-icon { font-size: 16px; }
#moyoSidebarClock .moyo-clock-hand, #moyoSidebarClock .moyo-clock-pivot { background: #4a90e2; }
.moyo-app-sidebar-weather-icon img { display: block; width: 26px; height: 26px; }

.moyo-app-sidebar-weather-temp { white-space: nowrap; }

.moyo-app-sidebar-weather[data-state="loading"] {
    opacity: .52;
}

.moyo-app-sidebar-weather[data-state="permission"] {
    cursor: pointer;
    opacity: .74;
}

.moyo-app-sidebar-weather[data-state="permission"]:hover {
    color: #667085;
    opacity: 1;
}

.moyo-app-sidebar-weather[data-state="error"] {
    opacity: .5;
}

.moyo-app-sidebar-bottom {
    flex: 0 0 auto;
    padding: 10px 14px 11px;
    border-top: 1px solid #edf1f5;
    background: rgba(251, 252, 253, .96);
}

.moyo-app-sidebar-bottom-links {
    display: flex;
    align-items: center;
    width: 234px;
    max-width: 100%;
    margin: 0 auto;
    gap: 0;
    flex-wrap: nowrap;
}

body .moyo-app-sidebar-bottom-links .moyo-app-sidebar-bottom-link {
    appearance: none;
    border: 0;
    background: var(--moyo-action-background,transparent);
    font-family: var(--moyo-font-family,"Pretendard",sans-serif);
    line-height: 1.4;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    flex: 1 1 0;
    justify-content: center;
    align-items: center;
    min-height: 22px;
    padding: 0 5px;
    border-radius: 6px;
    color: #7f8997;
    font-size: 10px;
    font-weight: var(--moyo-sidebar-footer-weight,750);
    white-space: nowrap;
}

.moyo-app-sidebar-bottom-links [data-pwa-install] { --moyo-sidebar-footer-weight:650; }

.moyo-sidebar-footer-dot { flex: 0 0 8px; text-align: center; color: #c2c9d2; font-size: 10px; pointer-events: none; }

body .moyo-app-sidebar-bottom-links .moyo-app-sidebar-bottom-link:hover {
    color: #52637a;
    background: #f6f8fb;
}

.moyo-app-sidebar-bottom-copy {
    margin-top: 5px;
    padding-left: 5px;
    color: #a5adb8;
    font-size: 9.5px;
    font-weight: 650;
}

.moyo-app-sidebar-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--moyo-muted);
    padding:0;
    line-height:1;
    cursor: pointer;
    font-size: 22px;
    transition: color .18s ease;
}
.moyo-app-sidebar-toggle-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;}
.moyo-app-sidebar-toggle-icon svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;}
.moyo-app-sidebar-toggle-btn:hover { background:transparent; color:var(--moyo-blue); }

.moyo-app-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: var(--moyo-header-height) 0 0 0;
    z-index: 900;
    background: rgba(15, 23, 42, .25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

@media (max-width: 1200px) {
    body .moyo-header { z-index: 20000; }
    .moyo-app-sidebar { z-index: 19900; }
    .moyo-app-sidebar-backdrop { z-index: 19800; }
    body.moyo-app-sidebar-enabled,
    body.moyo-app-sidebar-enabled.moyo-app-sidebar-collapsed {
        padding-left: 0;
    }

    .moyo-app-sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }

    body.moyo-app-sidebar-mobile-open .moyo-app-sidebar {
        transform: translateX(0);
        box-shadow: 14px 0 32px rgba(15, 23, 42, .12);
    }

    body.moyo-app-sidebar-mobile-open .moyo-app-sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

}

@media (min-width: 1201px) {
    body.moyo-app-sidebar-enabled .moyo-app-sidebar-backdrop,
    body.moyo-app-sidebar-enabled.moyo-app-sidebar-mobile-open .moyo-app-sidebar-backdrop {
        display: none;
        opacity: 0;
        pointer-events: none;
    }
}

@media (max-width: 820px) {
}

@media (max-width: 720px) {
    body.moyo-app-sidebar-enabled {
        padding-top: var(--moyo-header-height);
    }
}

@media (max-width: 520px) {
}

/* ===== Sidebar friend modal + group list entry ===== */
.moyo-app-sidebar-modal-link {
    width: 100%;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
}

.moyo-app-sidebar-modal-link:focus-visible,
.moyo-app-sidebar-section-action:focus-visible,
.moyo-app-sidebar-main-link:focus-visible {
    outline: 3px solid rgba(74, 144, 226, .22);
    outline-offset: 2px;
}

.moyo-app-sidebar-workspace-list-link {
    margin-bottom: 7px;
}

.moyo-app-sidebar-workspace-list-link.active {
    background: #eef6ff;
    color: var(--moyo-blue-strong);
}



/* ===== Sidebar relation/group tune ===== */
.moyo-app-sidebar-section-heading {
    padding: 0 6px 7px;
}

.moyo-app-sidebar-text-action {
    min-height: auto;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: #7b8aa0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.moyo-app-sidebar-text-action:hover,
.moyo-app-sidebar-text-action.active {
    color: var(--moyo-blue-strong);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transform: none;
    text-decoration: none;
}

.moyo-app-sidebar-friends-section {
    padding-bottom: 4px;
}

.moyo-app-sidebar-friend-preview {
    display: grid;
    gap: 7px;
}

.moyo-app-sidebar-friend-block[hidden] {
    display: none !important;
}

.moyo-app-sidebar-friend-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 4px;
    padding: 0 8px;
    color: #7f8da1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: -.01em;
}

.moyo-app-sidebar-friend-avatar-strip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 0 6px 1px;
    overflow: hidden;
}

.moyo-app-sidebar-friend-chip {
    width: 34px;
    min-width: 34px;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #344054;
    font-family: inherit;
    cursor: pointer;
}

.moyo-app-sidebar-friend-chip .moyo-app-sidebar-friend-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
}

.moyo-app-sidebar-friend-chip span:last-child {
    max-width: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #344054;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.1;
}

.moyo-app-sidebar-friend-chip:hover .moyo-app-sidebar-friend-avatar {
    border-color: #bfdbfe;
    box-shadow: 0 4px 10px rgba(74, 144, 226, .13);
}

.moyo-app-sidebar-friend-chip.skeleton {
    width: auto;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #98a2b3;
    cursor: default;
}

.moyo-app-sidebar-friend-chip.skeleton span:last-child {
    max-width: none;
    color: #98a2b3;
    font-size: 10px;
}

.moyo-app-sidebar-friend-mini-list {
    display: grid;
    gap: 2px;
}

.moyo-app-sidebar-friend-birthday {
    padding: 7px 0;
    border-top: 1px solid #f6f8fb;
    border-bottom: 1px solid #f6f8fb;
}

.moyo-app-sidebar-birthday-note {
    margin-left: auto;
    color: #98a2b3;
    font-size: 9.5px;
    font-weight: 800;
}

.moyo-app-sidebar-friend-item {
    width: 100%;
    min-height: 35px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #344054;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

.moyo-app-sidebar-friend-item:hover {
    background: #f5f8fb;
    color: var(--moyo-blue-strong);
}

.moyo-app-sidebar-friend-item:active {
    transform: translateY(1px);
}

.moyo-app-sidebar-friend-item.skeleton {
    color: #98a2b3;
    cursor: default;
}

.moyo-app-sidebar-friend-item.skeleton:hover {
    background: transparent;
    color: #98a2b3;
}

.moyo-app-sidebar-friend-avatar {
width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 12px;
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, .78);
    box-sizing: border-box;
    color: var(--moyo-person-avatar-color);
    background: var(--moyo-person-avatar-background);
    box-shadow: inset 0 0 0 1px var(--moyo-person-avatar-ring);
}

.moyo-app-sidebar-friend-avatar.has-image {
    background: #fff;
    color: transparent;
    border-color: #e8eef6;
}

.moyo-app-sidebar-friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.moyo-app-sidebar-friend-text {
    min-width: 0;
    display: grid;
    gap: 0;
    line-height: 1.22;
}

.moyo-app-sidebar-friend-text strong,
.moyo-app-sidebar-friend-text em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-style: normal;
}

.moyo-app-sidebar-friend-text strong {
    color: #344054;
    font-size: 11.5px;
    font-weight: 900;
}

.moyo-app-sidebar-friend-item:hover .moyo-app-sidebar-friend-text strong {
    color: var(--moyo-blue-strong);
}

.moyo-app-sidebar-friend-text em {
    color: #b3bcc8;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -.01em;
}


/* ===== Sidebar group/project hierarchy tone ===== */
.moyo-app-workspace-menu {
    border-left-color: #e8edf3;
}

.moyo-app-workspace-home {
    color: #3f6f69;
    font-weight: 800;
}

.moyo-app-workspace-home .moyo-app-project-dot.home {
    width: 8px;
    height: 8px;
    background: var(--moyo-mint);
    box-shadow: 0 0 0 3px rgba(57, 205, 181, .12);
}

.moyo-app-workspace-home:hover,
.moyo-app-workspace-home.active {
    background: #ecfbf8;
    color: #119c8c;
}

.moyo-app-project-link {
    min-width: 0;
    max-width: 100%;
    color: #6b5f7f;
    font-weight: 750;
}

.moyo-app-project-link .moyo-app-project-dot {
    width: 7px;
    height: 7px;
    background: var(--moyo-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .10);
}

.moyo-app-project-link:hover,
.moyo-app-project-link.active {
    background: #f4f0ff;
    color: #6d45d8;
}

.moyo-app-project-link.active .moyo-app-project-dot {
    background: var(--moyo-purple);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .16);
}

/* ===== App content flush correction =====
   사이드바가 붙은 앱 화면에서는 각 페이지 shell이 추가 좌우 gutter/max-width로
   다시 중앙 정렬되지 않게 한다. 사이드바가 확보한 본문 영역을 그대로 사용한다. */
body.moyo-app-sidebar-enabled .moyo-calendar-page,
body.moyo-app-sidebar-enabled .nl-shell,
body.moyo-app-sidebar-enabled .photo-ui-shell {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* ===== Sidebar project entry points ===== */
.moyo-app-sidebar-projects-section {
    margin-top: 16px;
}

.moyo-app-sidebar-projects-section + .moyo-app-sidebar-groups-section {
    margin-top: 16px;
}

.moyo-app-sidebar-project-nav {
    display: grid;
    gap: 4px;
}

.moyo-app-sidebar-personal-project-list {
    display: grid;
    gap: 2px;
}

.moyo-app-personal-project-link {
    color: #49647f;
}

.moyo-app-personal-project-link:hover,
.moyo-app-personal-project-link.active {
    color: #6d45d8;
    background: #f4f0ff;
}

.moyo-app-sidebar-project-entry {
    position: relative;
}

.moyo-app-sidebar-project-entry.personal:hover,
.moyo-app-sidebar-project-entry.personal.active {
    color: #6d45d8;
    background: #f4f0ff;
}

.moyo-app-sidebar-project-entry.manage:hover,
.moyo-app-sidebar-project-entry.manage.active {
    color: #6d4ed1;
    background: #f5f1ff;
}

.moyo-app-sidebar-project-icon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.moyo-app-sidebar-project-icon.personal::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px solid var(--moyo-blue);
    background: #fff;
}

.moyo-app-sidebar-project-icon.personal::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 7px;
    border: 2px solid var(--moyo-blue);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 0;
}

.moyo-app-sidebar-project-icon.manage::before,
.moyo-app-sidebar-project-icon.manage::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(135deg, var(--moyo-mint), var(--moyo-purple));
}

.moyo-app-sidebar-project-icon.manage::before {
    left: 1px;
    top: 1px;
    box-shadow: 9px 0 0 rgba(118, 87, 219, .72), 0 9px 0 rgba(78, 205, 196, .72);
}

.moyo-app-sidebar-project-icon.manage::after {
    right: 0;
    bottom: 0;
    background: var(--moyo-purple);
}

/* ========================================================================
   사이드바 반응형 본문 폭 보호
   - 사이드바 272px 때문에 본문이 찌그러지기 전에 오버레이 모드 전환
   ======================================================================== */
@media (max-width: 1200px) {
    html,
    body {
        min-width: 0 !important;
    }

    body.moyo-app-sidebar-enabled,
    body.moyo-app-sidebar-enabled.moyo-app-sidebar-collapsed,
    body.moyo-app-sidebar-enabled.moyo-app-sidebar-mobile-open {
        padding-left: 0 !important;
    }

    body.moyo-app-sidebar-enabled > .moyo-header {
        left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .moyo-app-sidebar {
        transform: translateX(-100%) !important;
    }

    body.moyo-app-sidebar-mobile-open .moyo-app-sidebar {
        transform: translateX(0) !important;
    }

    body.moyo-app-sidebar-mobile-open .moyo-app-sidebar-backdrop {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (min-width: 1201px) {
    body.moyo-app-sidebar-enabled:not(.moyo-app-sidebar-collapsed) {
        padding-left: var(--moyo-app-sidebar-width);
    }

    body.moyo-app-sidebar-enabled.moyo-app-sidebar-collapsed {
        padding-left: 0;
    }
}


/* ===== Sidebar top sections unified system =====
   개인 프로젝트 / 업데이트한 친구 / 그룹을 같은 레벨의 섹션으로 통일한다. */
.moyo-app-sidebar-scroll > .moyo-app-sidebar-section {
    margin-top: 0;
}

.moyo-app-sidebar-scroll > .moyo-app-sidebar-section + .moyo-app-sidebar-section {
    margin-top: 12px;
}

.moyo-app-sidebar-projects-section,
.moyo-app-sidebar-friends-section,
.moyo-app-sidebar-groups-section {
    padding-bottom: 0;
    border-bottom: 0;
}

.moyo-app-sidebar-projects-section {
    margin-top: 0;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-section-heading,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-section-heading,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-section-heading {
    min-height: 34px;
    box-sizing: border-box;
    padding: 1px 4px 0;
    margin: 0 0 2px;
    gap: 6px;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-section-title,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-section-title,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-section-title {
    color: #7f8da1;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: none;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-section-title-link,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-section-title-link,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-section-title-link {
    min-width: 0;
    min-height: 30px;
    flex: 1;
    box-sizing: border-box;
    padding: 0 6px;
    border-radius: 8px;
    color: #7f8da1;
    transition: background .16s ease, color .16s ease;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-section-title-link:hover,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-section-title-link:hover,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-section-title-link:hover {
    color: #52637a;
    background: #f6f8fb;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-section-title-link:focus-visible,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-section-title-link:focus-visible,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-section-title-link:focus-visible {
    color: #52637a;
    background: #f6f8fb;
    outline: 2px solid rgba(74, 144, 226, .18);
    outline-offset: 1px;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-add-action,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-add-action,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-add-action {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    color: #8a98aa;
    font-size: 18px;
    font-weight: 600;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-add-action:hover,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-add-action:hover,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-add-action:hover {
    color: #52637a;
    background: #f6f8fb;
}

/* 프로젝트 없음 / 최근 업데이트 없음의 빈 상태 톤을 동일하게 맞춘다. */
.moyo-app-sidebar-projects-section .moyo-app-sidebar-empty,
.moyo-app-sidebar-groups-section .moyo-app-sidebar-empty,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip.skeleton {
    min-height: 28px;
    box-sizing: border-box;
    margin: 0;
    padding: 5px 10px;
    color: #a3adb8;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.moyo-app-sidebar-projects-section .moyo-app-sidebar-empty.nested {
    padding-left: 10px;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-avatar-strip {
    min-height: 28px;
    box-sizing: border-box;
    padding: 0;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip.skeleton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: flex-start;
    cursor: default;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip.skeleton .moyo-app-sidebar-friend-avatar {
    display: none;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip.skeleton span:last-child {
    max-width: none;
    color: #a3adb8;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

/* 실제 친구 항목도 프로젝트/그룹 하위 항목과 같은 부드러운 hover 언어를 사용한다. */
.moyo-app-sidebar-friend-chip:not(.skeleton),
.moyo-app-sidebar-friend-item:not(.skeleton),
.moyo-app-workspace-toggle,
.moyo-app-project-link,
.moyo-app-workspace-home {
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.moyo-app-sidebar-friend-item:not(.skeleton):hover,
.moyo-app-workspace-toggle:hover {
    background: #f6f8fb;
}

/* ===== Updated friends: compact activity rows ===== */
.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-avatar-strip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: 142px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0 2px 0 0;
    scrollbar-width: thin;
    scrollbar-color: #d7e1ea transparent;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-avatar-strip::-webkit-scrollbar {
    width: 4px;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-avatar-strip::-webkit-scrollbar-thumb {
    background: #d7e1ea;
    border-radius: 999px;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-avatar-strip::-webkit-scrollbar-track {
    background: transparent;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip:not(.skeleton) {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    box-sizing: border-box;
    padding: 3px 6px;
    border-radius: 9px;
    color: #344054;
    text-decoration: none;
    overflow: hidden;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip:not(.skeleton):hover {
    background: #f6f8fb;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip:not(.skeleton):focus-visible {
    outline: 2px solid rgba(74, 144, 226, .18);
    outline-offset: -1px;
    background: #f6f8fb;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip:not(.skeleton) .moyo-app-sidebar-friend-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    font-size: 11px;
}

.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip:not(.skeleton) .moyo-app-sidebar-friend-avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.moyo-app-sidebar-friend-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #344054;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.25;
}

.moyo-app-sidebar-friend-reason {
    min-width: 54px;
    max-width: 92px;
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 650;
    line-height: 1.25;
    text-align: right;
}

/* ===== Sidebar final detail pass ===== */
.moyo-app-sidebar-scroll {
    scrollbar-gutter: stable;
}

.moyo-app-sidebar-section-title-link.active {
    color: #52637a;
    background: #f6f8fb;
}

.moyo-app-sidebar-personal-project-list,
.moyo-app-workspace-menu {
    min-width: 0;
}

.moyo-app-project-link,
.moyo-app-workspace-home,
.moyo-app-workspace-toggle {
    box-sizing: border-box;
}

.moyo-app-workspace-toggle:active,
.moyo-app-project-link:active,
.moyo-app-workspace-home:active,
.moyo-app-sidebar-bottom-link:active {
    transform: translateY(1px);
}

.moyo-app-sidebar-bottom-link:focus-visible {
    outline: 2px solid rgba(74, 144, 226, .20);
    outline-offset: 1px;
}

.moyo-app-sidebar-bottom-link.active {
    color: var(--moyo-blue-strong);
    font-weight: 850;
}

.moyo-app-sidebar-admin-link {
    color: #74638f;
}

.moyo-app-sidebar-admin-link:hover {
    color: #52637a;
    background: #f4f0ff;
}
.moyo-app-sidebar-admin-link.active { color: #6d45d8; }

@media (max-height: 760px) {
    .moyo-app-sidebar-scroll {
        padding-top: 6px;
        padding-bottom: 8px;
    }

    .moyo-app-sidebar-scroll > .moyo-app-sidebar-section + .moyo-app-sidebar-section {
        margin-top: 8px;
    }

    .moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-avatar-strip {
        max-height: 108px;
    }

    .moyo-app-sidebar-bottom {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}


/* MOYO personal default avatar policy - 2026-09-07 */
.moyo-app-sidebar-friend-avatar:not(.has-image),
.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip:not(.skeleton) .moyo-app-sidebar-friend-avatar:not(.has-image) {
    background: var(--moyo-person-avatar-background);
    color: var(--moyo-person-avatar-color);
    box-shadow: inset 0 0 0 1px var(--moyo-person-avatar-ring);
}
.moyo-app-sidebar-friend-avatar.has-image,
.moyo-app-sidebar-friends-section .moyo-app-sidebar-friend-chip:not(.skeleton) .moyo-app-sidebar-friend-avatar.has-image {
    background: #fff !important;
    color: transparent !important;
    border-color: #e5ebf3 !important;
}


/* 위치 권한 전에는 텍스트 없이 아이콘만 보이고, 실제 날씨 수신 후에는 아이콘 + 온도만 표시 */
.moyo-app-sidebar-weather[data-state="permission"] {
    gap: 6px;
}


.moyo-app-sidebar-weather[data-state="loading"],
.moyo-app-sidebar-weather[data-state="error"] {
    opacity: .58;
}

.moyo-app-sidebar-weather[data-state="error"] .moyo-app-sidebar-weather-temp,
.moyo-app-sidebar-weather[data-state="permission"] .moyo-app-sidebar-weather-temp {
    color: #98a2b3;
}


.moyo-app-sidebar-weather-location { min-width: 0; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.moyo-app-sidebar-weather-separator { flex: 0 0 auto; color: #b0b8c4; }

.moyo-app-sidebar-weather-separator[hidden] {
    display: none;
}

/* Clear hierarchy and aligned section controls in the common sidebar. */
.moyo-app-sidebar .moyo-app-sidebar-section .moyo-app-sidebar-section-title { color:#64758c; }
.moyo-app-sidebar .moyo-app-sidebar-section .moyo-app-sidebar-section-title-link { color:#64758c; }
.moyo-app-sidebar .moyo-app-sidebar-section .moyo-app-sidebar-add-action { color:#73869e; display:inline-flex; align-items:center; justify-content:center; }
.moyo-app-sidebar .moyo-app-sidebar-section .moyo-app-sidebar-empty,
.moyo-app-sidebar .moyo-app-sidebar-section .moyo-app-sidebar-friend-chip.skeleton { color:#8795a7; line-height:1.65; font-weight:500; }
.moyo-app-sidebar .moyo-app-sidebar-section .moyo-app-sidebar-add-action:focus-visible { outline:2px solid #a7c5ef; outline-offset:2px; }
@media(max-width:1200px) { html:has(body.moyo-app-sidebar-scroll-locked) { overflow:hidden; } body.moyo-app-sidebar-scroll-locked { overflow:clip; } }

.moyo-app-project-dday{margin-left:auto;flex:0 0 auto;font-size:10px;font-weight:650;line-height:1;color:#8575a5;white-space:nowrap;}.moyo-app-project-dday[hidden]{display:none;}


.moyo-install-help{width:min(360px,calc(100vw - 40px));box-sizing:border-box;border:1px solid #e3eaf3;border-radius:16px;padding:24px;color:#354764;background:#fff;}
.moyo-install-help::backdrop{background:#24364d66;}
.moyo-install-help h2{font-size:17px;margin:0 0 12px;}
.moyo-install-help p{font-size:14px;line-height:1.7;}
.moyo-install-help button{display:block;margin-left:auto;border:0;border-radius:8px;padding:8px 16px;color:inherit;background:var(--moyo-action-background,#edf3fa);}


#mcfWeather[role=button]{cursor:pointer;border-radius:8px;}#mcfWeather[role=button]:focus-visible{outline:2px solid #4a90e2;outline-offset:4px;}
 .moyo-weather-forecast{box-sizing:border-box;width:min(440px,calc(100vw - 32px));max-height:min(760px,calc(100dvh - 48px));overflow:hidden;padding:0;border:1px solid #e2e9f2;border-radius:20px;color:var(--moyo-explorer-title-color,#354764);background:#fff;box-shadow:0 18px 60px #24364d24;font-family:var(--moyo-font-family,"Pretendard",sans-serif);}
.moyo-weather-forecast[open]{display:flex;flex-direction:column;}
.moyo-weather-body{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:0 22px 16px;scrollbar-width:thin;scrollbar-color:#ccd7e5 transparent;}
.moyo-weather-forecast::backdrop{background:#24364d66;}
.moyo-weather-forecast header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:0 22px;box-sizing:border-box;flex-shrink:0;border-bottom:1px solid #edf1f7;}
.moyo-weather-brand{display:flex;align-items:center;gap:14px;min-width:0;}.moyo-weather-brand>img{display:block;width:48px;height:48px;object-fit:contain;}.moyo-weather-forecast h2{font-size:17px;font-weight:750;margin:0;white-space:nowrap;}
.moyo-weather-forecast button{border:0;border-radius:8px;padding:8px;background:var(--moyo-action-background,transparent);color:#657c9f;cursor:pointer;}.moyo-weather-forecast header button{display:flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;}
.moyo-weather-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;}.moyo-weather-place{margin:0;font-size:17px;font-weight:750;}.moyo-weather-summary>span{font-size:11px;color:#73839a;}
.moyo-weather-columns,.moyo-weather-day{display:grid;grid-template-columns:minmax(65px,1fr) 32px 90px 64px;gap:8px;align-items:center;}
.moyo-weather-columns{padding:9px 0;color:#7d8da5;font-size:10px;border-bottom:1px solid #e6edf6;}.moyo-weather-columns>span:not(:first-child){text-align:center;}
.moyo-weather-day{min-height:44px;box-sizing:border-box;border-bottom:1px solid #edf1f7;font-size:12px;font-variant-numeric:tabular-nums;}.moyo-weather-day:last-child{border-bottom:0;}.moyo-weather-day>img{width:28px;height:28px;object-fit:contain;justify-self:center;}.moyo-weather-temperatures{white-space:nowrap;text-align:center;color:#a1aec0;}.moyo-weather-low{color:#5887bf;}.moyo-weather-temperatures strong{color:#354764;font-weight:700;}.moyo-weather-day small{text-align:center;color:#73839a;font-size:11px;white-space:nowrap;}
.moyo-weather-body>a{display:block;border-top:1px solid #edf1f7;margin-top:4px;padding-top:14px;font-size:10px;color:#8291a8;text-decoration:none;}.moyo-weather-body>a:hover{text-decoration:underline;}
@media(max-width:380px){.moyo-weather-body{padding:0 16px 16px;}.moyo-weather-forecast header{padding:0 16px;}.moyo-weather-columns,.moyo-weather-day{grid-template-columns:minmax(60px,1fr) 28px 76px 50px;gap:5px;}.moyo-weather-brand{gap:10px;}.moyo-weather-brand>img{width:44px;height:44px;}.moyo-weather-forecast h2{font-size:16px;}.moyo-weather-day{font-size:11px;}.moyo-weather-day small{font-size:10px;}}

.moyo-weather-hours{position:relative;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;padding:0 0 12px;min-height:120px;font-size:12px;scrollbar-width:thin;scrollbar-color:#d2ddeb transparent;}.moyo-weather-hour{display:flex;flex:0 0 56px;align-items:center;flex-direction:column;gap:7px;box-sizing:border-box;padding:8px 5px;border-radius:12px;font-variant-numeric:tabular-nums;}.moyo-weather-hour.is-current{background:linear-gradient(150deg,#39cdb512,#7358e812);}.moyo-weather-hour>span{color:#73839a;font-size:11px;}.moyo-weather-hour.is-current>span{color:#387bd6;font-weight:700;}.moyo-weather-hour img{width:32px;height:32px;object-fit:contain;}.moyo-weather-hour strong{font-size:18px;font-weight:700;}.moyo-weather-hour small{font-size:11px;color:#73839a;}

.moyo-weather-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;}.moyo-weather-section-heading h3{margin:0;font-size:13px;font-weight:700;}.moyo-weather-section-heading>span{font-size:10px;color:#8291a8;}#moyoDailyPanel{border-top:1px solid #edf1f7;padding-top:14px;margin-top:8px;}.moyo-weather-forecast header{position:relative;z-index:1;background:#fff;}

@media(max-width:760px){.moyo-weather-forecast{position:fixed;top:var(--weather-mobile-top,54px);left:0;right:0;bottom:auto;width:100%;max-width:none;height:var(--weather-mobile-height,calc(100dvh - 54px));max-height:var(--weather-mobile-height,calc(100dvh - 54px));margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overscroll-behavior:contain;}.moyo-weather-forecast::backdrop{background:transparent;}.moyo-weather-forecast header{min-height:64px;padding:0 18px;}.moyo-weather-body{padding:0 18px max(18px,env(safe-area-inset-bottom));}.moyo-weather-summary{padding-top:14px;}}

.moyo-weather-forecast:focus{outline:none;}.moyo-weather-day>.moyo-weather-saturday{color:#4c7cce;}.moyo-weather-day>.moyo-weather-sunday{color:#dc6474;}

.moyo-weather-hours.is-loading{min-height:138px;border-radius:10px;background:linear-gradient(90deg,#f2f6fb 0 48px,transparent 48px 62px);background-size:62px 100%;}.moyo-weather-days.is-loading{min-height:364px;background:repeating-linear-gradient(to bottom,transparent 0 20px,#f2f6fb 20px 31px,transparent 31px 51px,#edf1f7 51px 52px);}
.moyo-sidebar-location-weather{display:flex;align-items:center;gap:7px;min-width:0;flex:1;}.moyo-sidebar-region{display:inline-flex;align-items:center;gap:3px;min-width:0;max-width:88px;border:0;padding:3px 0;background:var(--moyo-action-background,transparent);color:inherit;font:inherit;cursor:pointer;border-radius:5px;}.moyo-sidebar-region .moyo-app-sidebar-weather-location{max-width:68px;}.moyo-sidebar-region svg{flex:none;}
.moyo-region-picker{box-sizing:border-box;width:min(400px,calc(100vw - 28px));max-height:min(560px,calc(100dvh - 40px));overflow:hidden;margin:auto;padding:18px;border:1px solid #e3eaf3;border-radius:18px;background:#fff;color:#354764;font-family:var(--moyo-font-family,"Pretendard",sans-serif);box-shadow:0 18px 60px #24364d24;}.moyo-region-picker[open]{display:flex;flex-direction:column;}.moyo-region-picker::backdrop{background:#24364d66;}.moyo-region-picker:focus{outline:none;}.moyo-region-picker header{display:flex;flex:none;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px;}.moyo-region-heading{display:flex;align-items:center;gap:10px;}.moyo-region-heading>div>span{font-size:10px;color:#73839a;}.moyo-region-picker h2{font-size:16px;margin:4px 0 0;}.moyo-region-symbol{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#39cdb51c,#7358e81c);color:#548acc;}.moyo-region-symbol svg{width:25px;height:25px;}
.moyo-region-picker button{border:0;background:var(--moyo-action-background,transparent);color:inherit;font:inherit;cursor:pointer;border-radius:8px;}.moyo-region-picker [data-region-close]{display:grid;place-items:center;flex:none;width:36px;height:36px;}.moyo-region-search{position:relative;display:block;flex:none;}.moyo-region-search>svg{position:absolute;left:12px;top:11px;color:#8a9bb2;pointer-events:none;width:18px;height:18px;}.moyo-region-search input{box-sizing:border-box;width:100%;height:40px;min-width:0;border:1px solid #dce5f2;border-radius:10px;background:#fff;font:inherit;font-size:12px;padding:0 12px 0 38px;}.moyo-region-picker .moyo-region-auto{display:flex;align-items:center;gap:9px;flex:none;width:100%;margin:8px 0;padding:10px 8px;text-align:left;font-size:12px;color:#437ac1;}.moyo-region-auto svg{width:18px;height:18px;}
.moyo-region-picker [data-region-results]{min-height:100px;max-height:330px;padding:4px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;font-size:12px;scrollbar-width:thin;scrollbar-color:#d0dbea transparent;}.moyo-region-picker .moyo-region-city{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:9px 8px;text-align:left;}.moyo-region-city-row:has(.moyo-region-city[aria-pressed=true]){border-radius:10px;background:linear-gradient(135deg,#39cdb512,#7358e812);}.moyo-region-city>span:not(.moyo-region-city-icon){display:flex;flex-direction:column;gap:4px;min-width:0;}.moyo-region-city-icon{display:flex;align-items:center;justify-content:center;color:#99abc2;}.moyo-region-city-icon svg{width:17px;height:17px;}.moyo-region-city strong{font-size:12px;font-weight:650;}.moyo-region-city small{font-size:10px;color:#8291a8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.moyo-region-city time{font-size:13px;color:#5887bf;font-variant-numeric:tabular-nums;white-space:nowrap;}.moyo-region-picker footer{flex:none;border-top:1px solid #edf1f7;margin-top:10px;padding-top:10px;line-height:1.5;font-size:10px;color:#8291a8;}.moyo-region-picker footer a{color:inherit;}

.moyo-region-city-row{display:flex;align-items:center;gap:4px;}.moyo-region-city-row .moyo-region-city{flex:1;min-width:0;}.moyo-region-favorite{display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex:0 0 44px;width:44px;height:44px;padding:0;line-height:1;color:var(--moyo-action-color,#8b98aa);}.moyo-region-favorite svg{display:block;flex:none;transform:translateY(1px);}.moyo-region-favorite[aria-pressed="true"]{color:var(--moyo-color-primary,#4288ef);}.moyo-region-favorite[aria-pressed="true"] svg{fill:currentColor;}