:root {
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
    color:#fff;
    background:#222;
    font-synthesis:none
}

* {
    box-sizing:border-box
}

html,body {
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden
}

body {
    display:grid;
    place-items:center;
    background:#242424
}

[hidden] {
    display:none!important
}

button,input {
    font:inherit
}

button {
    cursor:pointer;
    -webkit-tap-highlight-color:transparent
}

.device {
    position:relative;
    width:min(420px,calc(100dvh * 0.485),94vw);
    aspect-ratio:393/852;
    background:#101012;
    border:5px solid #5a5a5d;
    border-radius:56px;
    padding:5px;
    box-shadow:0 0 0 2px #141414,0 22px 60px #0008;
    overflow:visible
}

.device:before {
    content:"";
    position:absolute;
    inset:1px;
    border:2px solid #1b1b1b;
    border-radius:51px;
    pointer-events:none;
    z-index:200
}

.device-side {
    position:absolute;
    width:3px;
    background:#858588;
    border-radius:3px
}

.side-left {
    left:-7px;
    top:19%;
    height:7%
}

.side-right {
    right:-7px;
    top:29%;
    height:10%
}

.game {
    position:relative;
    width:100%;
    height:100%;
    background:#000;
    border-radius:45px;
    overflow:hidden;
    isolation:isolate
}

.screen {
    position:absolute;
    inset:0;
    overflow:hidden;
    touch-action:pan-y
}

.mock-status {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:58px;
    padding:14px 23px 0;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    z-index:100;
    pointer-events:none;
    color:#fff;
    font-size:15px;
    font-weight:600;
    text-shadow:0 1px 2px #0007
}

.mock-status>span:first-child {
    min-width:55px
}

.dynamic-island {
    position:absolute;
    top:10px;
    left:50%;
    transform:translateX(-50%);
    height:30px;
    width:100px;
    background:#000;
    border-radius:30px
}

.status-icons {
    display:flex;
    align-items:center;
    gap:3px
}

.home-indicator {
    position:absolute;
    bottom:7px;
    left:50%;
    transform:translateX(-50%);
    width:35%;
    height:5px;
    border:0;
    border-radius:10px;
    background:#fff;
    z-index:105;
    box-shadow:0 1px 2px #0003
}

#lock-screen {
    background: transparent;
}

.lock-wallpaper,.home-wallpaper {
    position:absolute;
    inset:0;
    background:linear-gradient(155deg,#34314d 0%,#181e33 32%,#393146 60%,#0c101e 100%);
    background-size:cover;
    background-position:center
}

.lock-wallpaper {
    background-image:linear-gradient(180deg,#0003,#0000 45%,#0007),url("../assets/wallpaper.jpg"),linear-gradient(150deg,#55516b,#121b2d 60%,#19101b)
}

.home-wallpaper {
    background-image:linear-gradient(180deg,#0002,#0004),url("../assets/wallpaper.jpg"),linear-gradient(150deg,#4b536c,#131a2a 60%,#211a2b)
}

.lock-datetime {
    position:absolute;
    top:13%;
    width:100%;
    text-align:center;
    color:#f3f3f5;
    pointer-events:none;
    text-shadow:0 2px 12px #0003
}

#lock-date {
    font-size:clamp(16px,4.4vw,21px);
    font-weight:500
}

#lock-time {
    font-size:clamp(65px,18vw,86px);
    letter-spacing:-4px;
    line-height:1.15;
    font-weight:300
}

.lock-bottom {
    position:absolute;
    bottom:5%;
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8%
}

.lock-quick {
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:#0008;
    color:white;
    font-size:25px
}

.unlock-hint {
    font-size:11px;
    color:#fffd;
    text-align:center
}

.app-grid {
    position:absolute;
    top:11%;
    left:5%;
    right:5%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    row-gap:21px;
    column-gap:8px
}

.app-touch {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    min-width:0;
    border:0;
    background:transparent;
    color:#fff;
    padding:0
}

.app-art {
    position:relative;
    display:grid;
    place-items:center;
    width:min(100%,64px);
    aspect-ratio:1;
    background:linear-gradient(135deg,#aaa,#555);
    border-radius:22%;
    box-shadow:0 1px 5px #0003;
    overflow:hidden;
    font-size:30px
}

.app-art>img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:2
}

.app-art>span {
    z-index:1
}

.app-label {
    font-size:11px;
    text-shadow:0 1px 3px #0009;
    white-space:nowrap
}

.app-facetime {
    background:#40cc69
}

.app-calendar {
    background:#fff
}

.app-photos {
    background:#f4f4f4
}

.app-camera {
    background:#9f9fa3
}

.app-mail {
    background:#1685ee
}

.app-notes {
    background:#fff
}

.app-clock {
    background:#141414
}

.app-appstore {
    background:#1486f5
}

.app-wallet {
    background:#222
}

.app-settings {
    background:#85858a
}

.app-weather {
    background:#308ff1
}

.app-phone {
    background:#35c86b
}

.app-safari {
    background:#fff
}

.app-messages {
    background:#43c960
}

.app-music {
    background:#f35b77
}

.dock {
    position:absolute;
    left:4%;
    right:4%;
    bottom:3.4%;
    padding:13px 10px 9px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    background:#ffffff45;
    backdrop-filter:blur(25px);
    border-radius:28px
}

.dock .app-label {
    display:none
}

.dock .app-art {
    width:min(100%,62px)
}

.message-badge {
    position:absolute;
    top:-8px;
    right:0;
    background:#ff3b30;
    border-radius:99px;
    min-width:23px;
    height:21px;
    display:grid;
    place-items:center;
    padding:0 5px;
    font-size:12px;
    color:#fff;
    z-index:5
}

.light-screen {
    background:#fff;
    color:#111
}

.notes-page {
    background:#f2f2f7;
    color:#111
}

.app-header {
    height:95px;
    padding:59px 20px 8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:16px
}

.app-header button,.message-header button {
    border:0;
    background:transparent;
    padding:0
}

.blue {
    color:#007aff;
    font-size:17px
}

.header-action {
    color:#007aff
}

.page-heading {
    font-size:34px;
    letter-spacing:-1px;
    margin:2px 20px 10px
}

.search-field {
    margin:0 18px 12px;
    border-radius:11px;
    background:#e9e9ed;
    color:#8e8e93;
    padding:10px 12px;
    font-size:15px
}

.conversation-list {
    border-top:1px solid #e5e5e8
}

.conversation {
    display:flex;
    width:100%;
    align-items:center;
    text-align:left;
    gap:12px;
    padding:13px 18px;
    border:0;
    border-bottom:1px solid #ededf0;
    background:#fff;
    color:#111
}

.avatar {
    display:grid;
    place-items:center;
    flex:0 0 50px;
    height:50px;
    border-radius:50%;
    background:#b9bbc3;
    color:white;
    font-size:21px
}

.avatar.unknown {
    background:#666
}

.conversation-info {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:5px;
    min-width:0
}

.conversation-info strong {
    font-size:17px
}

.conversation-info small {
    font-size:13px;
    color:#8e8e93;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}

.chevron {
    color:#b3b3b3;
    font-size:25px
}

.message-header {
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:111px;
    padding:56px 14px 8px;
    background:#fafafa;
    border-bottom:1px solid #ddd;
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    z-index:10
}

.message-header-person {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    font-size:12px
}

.mini-avatar {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#c8c8cc;
    color:white
}

.message-header-end {
    font-size:22px;
    color:#007aff
}

.message-scroll {
    position:absolute;
    top:111px;
    bottom:calc(77px + env(safe-area-inset-bottom,0px));
    left:0;
    right:0;
    padding:12px 14px 20px;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-y;
    background:#fff
}

.message-scroll::-webkit-scrollbar,.notes-scroll::-webkit-scrollbar,.photos-scroll::-webkit-scrollbar {
    display:none
}

.message-date {
    margin:22px 0 14px;
    text-align:center;
    color:#8e8e93;
    font-size:12px;
    font-weight:500;
    line-height:1.5
}

.message-row {
    display:flex;
    margin:3px 0
}

.message-row.sent {
    justify-content:flex-end
}

.message-row.received {
    justify-content:flex-start
}

.message-bubble {
    max-width:78%;
    padding:9px 13px;
    border-radius:18px;
    font-size:15px;
    line-height:1.4;
    overflow-wrap:anywhere;
    white-space:pre-wrap
}

.message-row.sent .message-bubble {
    background:#007aff;
    color:#fff;
    border-bottom-right-radius:6px
}

.message-row.received .message-bubble {
    background:#e9e9eb;
    color:#111;
    border-bottom-left-radius:6px
}

.message-row.sent+.message-row.received,.message-row.received+.message-row.sent {
    margin-top:11px
}

.message-compose {
    position:absolute;
    bottom:calc(18px + env(safe-area-inset-bottom,0px));
    left:0;
    right:0;
    height:51px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 14px;
    background:#fff;
    z-index:10
}

.compose-plus {
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border-radius:50%;
    background:#aaa;
    color:white;
    font-size:22px
}

.message-compose input {
    flex:1;
    min-width:0;
    height:36px;
    border:1px solid #c7c7cc;
    border-radius:20px;
    padding:0 14px;
    font-size:15px;
    background:#fff
}

.message-compose button {
    border:0;
    width:29px;
    height:29px;
    border-radius:50%;
    background:#007aff;
    color:white
}

.message-compose button:disabled {
    background:#c7c7cc
}

.notes-scroll {
    position:absolute;
    top:181px;
    bottom:40px;
    left:0;
    right:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 16px 24px
}

.notes-content {
    border-radius:13px;
    background:#fff;
    overflow:hidden
}

.note-touch {
    width:100%;
    display:grid;
    grid-template-columns:1fr 24px;
    grid-template-rows:auto auto;
    gap:4px 0;
    text-align:left;
    padding:14px 16px;
    background:#fff;
    color:#111;
    border:0;
    border-bottom:1px solid #ededf0
}

.note-name {
    font-size:16px;
    font-weight:600
}

.note-preview {
    grid-row:2;
    color:#8e8e93;
    font-size:13px
}

.note-chevron {
    grid-column:2;
    grid-row:1/3;
    align-self:center;
    color:#b8b8bd;
    font-size:22px
}

.note-detail-content {
    position:absolute;
    inset:95px 0 24px;
    overflow:auto;
    padding:0 10px
}

.note-detail-content img {
    display:block;
    width:100%;
    height:auto;
    object-fit:contain
}

#photos-screen,#photo-detail-screen {
    background:#000;
    color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif
}

.photos-header {
    position:absolute;
    top:90px;
    left:18px;
    right:18px;
    height:92px;
    z-index:10;
    background:#000
}

.photos-header-row,.photos-subheader {
    display:flex;
    align-items:center;
    justify-content:space-between
}

.photos-header-row {
    height:58%
}

.photos-header-row h1 {
    font-size:29px;
    margin:0
}

.photos-subheader {
    height:42%;
    font-size:14px;
    font-weight:600
}

.photos-header button,.photos-bottom button,.photo-detail-header button,.photo-detail-bottom button {
    border:0;
    cursor:pointer;
    font:inherit
}

.photos-select-btn {
    background:none;
    color:#0a84ff
}

.photos-more-btn {
    width:31px;
    height:31px;
    border-radius:50%;
    background:#333;
    color:white;
    font-size:20px
}

.photos-scroll {
    position:absolute;
    top:182px;
    bottom:135px;
    left:0;
    right:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    scrollbar-width:none
}

.photos-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2px;
    padding-bottom:12px
}

.photo-grid-item {
    position:relative;
    aspect-ratio:1;
    border:0;
    padding:0;
    background:#292929;
    overflow:hidden
}

.photo-grid-item img,.video-thumbnail video {
    width:100%;
    height:100%;
    object-fit:cover
}

.photo-grid-item.is-selected:after {
    content:"✓";
    position:absolute;
    bottom:6px;
    right:6px;
    background:#0a84ff;
    color:white;
    border-radius:50%;
    padding:4px
}

.video-thumbnail {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden
}

.video-thumbnail-label {
    position:absolute;
    right:6px;
    bottom:5px;
    font-size:13px;
    color:white;
    text-shadow:0 1px 4px #000
}

.photos-bottom {
    position:absolute;
    left:0;
    right:0;
    bottom:15px;
    height:120px;
    background:#000;
    z-index:12
}

.photos-zoom {
    display:flex;
    width:190px;
    max-width:70%;
    margin:4px auto 8px;
    padding:3px;
    background:#242424;
    border-radius:20px
}

.photos-zoom-btn {
    flex:1;
    padding:5px;
    background:transparent;
    color:#aaa;
    border-radius:15px;
    font-size:12px
}

.photos-zoom-btn.active {
    background:#555;
    color:#fff
}

.photos-tabs {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    height:65px
}

.photos-tab {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    background:none;
    color:#888;
    padding:0
}

.photos-tab.active {
    color:#0a84ff
}

.photos-tab svg {
    width:23px;
    height:23px;
    stroke:currentColor
}

.photos-tab span {
    font-size:10px
}

.photos-home-touch,.photo-detail-home-touch {
    position:absolute;
    bottom:0;
    left:25%;
    width:50%;
    height:25px;
    border:0;
    background:transparent;
    z-index:20
}

.photos-home-indicator {
    display:none
}

.photo-detail-header {
    position:absolute;
    top:85px;
    left:12px;
    right:12px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    z-index:10
}

.photo-detail-back,.photo-detail-more {
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#242424;
    color:white
}

.photo-detail-back span {
    font-size:37px;
    line-height:1
}

.photo-detail-more {
    font-size:23px
}

.photo-detail-date {
    min-width:40%;
    text-align:center;
    padding:7px 10px;
    border-radius:24px;
    background:#242424;
    font-size:13px;
    font-weight:600
}

.photo-detail-date small {
    display:block;
    font-size:11px;
    color:#ddd;
    font-weight:400
}

.photo-detail-viewer {
    position:absolute;
    top:145px;
    bottom:170px;
    left:0;
    right:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    touch-action:pan-y;
    transition:top .2s,bottom .2s
}

.photo-detail-viewer img,.photo-detail-viewer video {
    width:100%;
    height:100%;
    object-fit:contain;
    background:#000
}

#photo-detail-image[hidden],#photo-detail-video[hidden] {
    display:none!important
}

.photo-detail-bottom {
    position:absolute;
    left:0;
    right:0;
    bottom:20px;
    height:150px;
    background:#000;
    z-index:12;
    transition:opacity .2s
}

.photo-filmstrip {
    height:65px;
    display:flex;
    align-items:center;
    gap:3px;
    overflow-x:auto;
    padding:0 calc(50% - 18px);
    scrollbar-width:none;
    touch-action:pan-x
}

.photo-filmstrip-item {
    flex:0 0 35px;
    width:35px;
    height:47px;
    border:0;
    border-radius:4px;
    overflow:hidden;
    padding:0;
    background:#333;
    opacity:.6
}

.photo-filmstrip-item.active {
    opacity:1;
    transform:scale(1.12)
}

.photo-filmstrip-item img {
    width:100%;
    height:100%;
    object-fit:cover
}

.photo-detail-toolbar {
    height:65px;
    display:flex;
    align-items:center;
    justify-content:space-around
}

.photo-tool-group {
    display:flex;
    justify-content:space-around;
    align-items:center;
    background:#242424;
    border-radius:30px
}

.photo-tool {
    width:43px;
    height:43px;
    display:grid;
    place-items:center;
    padding:10px;
    background:#242424;
    border-radius:50%;
    color:white
}

.photo-tool-group .photo-tool {
    background:transparent
}

.photo-tool svg {
    width:100%;
    height:100%
}

.photo-favorite.active svg {
    fill:white;
    stroke:white
}

#photo-detail-screen.controls-hidden .photo-detail-header,#photo-detail-screen.controls-hidden .photo-detail-bottom {
    opacity:0;
    pointer-events:none
}

#photo-detail-screen.controls-hidden .photo-detail-viewer {
    top:60px;
    bottom:25px
}

.photos-grid.zoom-year {
    grid-template-columns:repeat(2,1fr)
}

.photos-grid.zoom-month {
    gap:3px
}

#camera-screen {
    background:#000
}

.camera-viewfinder {
    position:absolute;
    top:13%;
    left:0;
    right:0;
    height:63%;
    background:#111;
    overflow:hidden
}

.camera-viewfinder video {
    width:100%;
    height:100%;
    object-fit:cover
}

.camera-viewfinder video.selfie {
    transform:scaleX(-1)
}

#camera-error {
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    text-align:center;
    padding:20px;
    background:#111;
    font-size:14px
}

#camera-flash {
    position:absolute;
    inset:0;
    background:white;
    opacity:0;
    pointer-events:none;
    z-index:20
}

#camera-flash.active {
    animation:flash .25s ease-out
}

@keyframes flash {
    0%,100% {
        opacity:0
    }
    35% {
        opacity:.95
    }
}

.camera-bottom {
    position:absolute;
    bottom:6%;
    left:0;
    right:0;
    height:15%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between
}

.camera-mode {
    color:#ffd60a;
    font-size:14px
}

.camera-actions {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-around
}

.camera-gallery {
    width:47px;
    height:47px;
    padding:0;
    background:#222;
    border:1px solid #555;
    border-radius:8px;
    overflow:hidden
}

.camera-gallery img {
    width:100%;
    height:100%;
    object-fit:cover
}

.camera-shutter {
    width:72px;
    height:72px;
    border:5px solid white;
    border-radius:50%;
    background:white;
    box-shadow:inset 0 0 0 3px #000
}

.camera-switch {
    width:47px;
    height:47px;
    border:0;
    border-radius:50%;
    background:#292929;
    color:white;
    font-size:31px
}

.camera-home-touch {
    position:absolute;
    bottom:0;
    left:25%;
    width:50%;
    height:5%;
    border:0;
    background:transparent
}

.placeholder-screen {
    background:#fff;
    color:#111;
    text-align:center;
    padding-top:140px
}

.placeholder-back {
    position:absolute;
    top:75px;
    left:20px;
    border:0;
    background:none;
    color:#007aff
}

.placeholder-screen p {
    color:#888
}

@media(max-width:767px) {
    html,body {
        height:100%;
        height:100dvh;
        background:#000
    }
    body {
        display:block
    }
    .device {
        width:100%;
        height:100dvh;
        aspect-ratio:auto;
        border:0;
        border-radius:0;
        padding:0;
        box-shadow:none;
        background:#000
    }
    .device:before,.device-side,.mock-status {
        display:none!important
    }
    .game {
        width:100%;
        height:100%;
        border-radius:0
    }
    .app-header {
        padding-top:calc(12px + env(safe-area-inset-top,0px));
        height:calc(48px + env(safe-area-inset-top,0px))
    }
    .page-heading {
        margin-top:12px
    }
    .message-header {
        padding-top:calc(12px + env(safe-area-inset-top,0px));
        height:calc(65px + env(safe-area-inset-top,0px))
    }
    .message-scroll {
        top:calc(65px + env(safe-area-inset-top,0px))
    }
    .notes-scroll {
        top:calc(134px + env(safe-area-inset-top,0px));
        bottom:calc(22px + env(safe-area-inset-bottom,0px))
    }
    .note-detail-content {
        top:calc(48px + env(safe-area-inset-top,0px))
    }
    .photos-header {
        top:calc(40px + env(safe-area-inset-top,0px))
    }
    .photos-scroll {
        top:calc(132px + env(safe-area-inset-top,0px));
        bottom:calc(135px + env(safe-area-inset-bottom,0px))
    }
    .photos-bottom {
        bottom:calc(6px + env(safe-area-inset-bottom,0px))
    }
    .photo-detail-header {
        top:calc(37px + env(safe-area-inset-top,0px))
    }
    .photo-detail-viewer {
        top:calc(95px + env(safe-area-inset-top,0px));
        bottom:calc(160px + env(safe-area-inset-bottom,0px))
    }
    .photo-detail-bottom {
        bottom:calc(8px + env(safe-area-inset-bottom,0px))
    }
    .home-indicator {
        display:none
    }
    .dock {
        bottom:calc(12px + env(safe-area-inset-bottom,0px))
    }
    .lock-bottom {
        bottom:calc(22px + env(safe-area-inset-bottom,0px))
    }
}

/* LAST LOOP 2.1: reference-inspired device and passcode */
.device {
    border-width:3px;
    border-color:#37383c;
    padding:9px;
    border-radius:58px;
    box-shadow:0 0 0 2px #151517,0 18px 50px #0008
}

.device:before {
    inset:0;
    border:1px solid #5b5b5f;
    border-radius:55px
}

.game {
    border-radius:47px
}

.mock-status {
    height:60px;
    padding:16px 25px 0;
    font-size:15px
}

.dynamic-island {
    top:11px;
    width:116px;
    height:33px
}

.app-grid {
    top:10%;
    left:5.2%;
    right:5.2%;
    column-gap:10px;
    row-gap:24px
}

.app-art {
    width:min(100%,59px);
    border-radius:21%;
    font-size:27px
}

.dock {
    left:3.5%;
    right:3.5%;
    bottom:3.7%;
    padding:11px 9px 10px;
    border-radius:27px
}

.dock .app-art {
    width:min(100%,59px)
}

.lock-quick {
    display:grid;
    place-items:center;
    background:rgba(35,35,38,.62);
    backdrop-filter:blur(10px);
    width:48px;
    height:48px
}

.lock-quick svg {
    width:23px;
    height:23px
}

.lock-quick[aria-pressed="true"] {
    background:#f7f7f7;
    color:#171717
}

.flashlight-on::after {
    content:"";
    position:absolute;
    inset:0;
    box-shadow:inset 0 0 90px 25px #fff5;
    pointer-events:none
}

#passcode-screen {
    background:#100b10;
    color:#fff
}

.passcode-wallpaper {
    position:absolute;
    inset:-30px;
    background:linear-gradient(#0b090bd6,#120c10e6),url("../assets/wallpaper.jpg") center/cover,radial-gradient(ellipse at 30% 25%,#42343b,#100b10 70%);
    filter:blur(17px);
    transform:scale(1.08)
}

.passcode-panel {
    position:absolute;
    top:13%;
    left:8%;
    right:8%;
    display:flex;
    flex-direction:column;
    align-items:center
}

.passcode-panel h1 {
    font-size:20px;
    font-weight:600;
    letter-spacing:-.4px;
    margin:0 0 25px
}

.passcode-dots {
    display:flex;
    justify-content:center;
    gap:25px;
    margin-bottom:36px
}

.passcode-dots span {
    display:block;
    width:13px;
    height:13px;
    border:1.5px solid white;
    border-radius:50%;
    background:transparent
}

.passcode-dots span.filled {
    background:white
}

.passcode-pad {
    width:min(100%,320px);
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    justify-items:center;
    row-gap:14px;
    column-gap:12px
}

.passcode-pad button {
    width:min(100%,76px);
    aspect-ratio:1;
    border-radius:50%;
    border:0;
    background:rgba(155,152,157,.32);
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:1px;
    touch-action:manipulation
}

.passcode-pad button:active {
    background:rgba(220,220,225,.48)
}

.passcode-pad strong {
    font-size:32px;
    font-weight:300;
    line-height:1.05
}

.passcode-pad small {
    font-size:10px;
    font-weight:700;
    letter-spacing:2px
}

.passcode-pad.wrong {
    animation:passcode-shake .42s ease-in-out
}

@keyframes passcode-shake {
    0%,100% {
        transform:translateX(0)
    }
    15%,45%,75% {
        transform:translateX(-7px)
    }
    30%,60%,90% {
        transform:translateX(7px)
    }
}

.passcode-footer {
    position:absolute;
    bottom:7%;
    left:10%;
    right:10%;
    display:flex;
    justify-content:space-between
}

.passcode-footer button {
    border:0;
    background:transparent;
    color:#fff;
    font-size:15px;
    font-weight:500;
    padding:10px 0
}

@media(max-width:767px) {
    .device {
        border:0;
        padding:0;
        border-radius:0;
        box-shadow:none
    }
    .game {
        border-radius:0
    }
    .passcode-panel {
        top:calc(13% + env(safe-area-inset-top,0px) / 3)
    }
    .passcode-footer {
        bottom:calc(6% + env(safe-area-inset-bottom,0px))
    }
}

@media(max-height:690px) {
    .passcode-panel {
        top:10%
    }
    .passcode-panel h1 {
        margin-bottom:16px
    }
    .passcode-dots {
        margin-bottom:20px
    }
    .passcode-pad {
        row-gap:8px
    }
    .passcode-pad button {
        width:min(100%,62px)
    }
    .passcode-pad strong {
        font-size:32px
    }
}

/* LAST LOOP 2.2 — sharp vector iOS-inspired app icons */
.app-art {
    width:min(100%,60px);
    background:transparent!important;
    border-radius:21%;
    box-shadow:0 1px 3px #0004;
    overflow:hidden;
    font-size:0
}

.app-art>img,.app-art>svg {
    display:block;
    position:static;
    width:100%;
    height:100%;
    object-fit:contain;
    max-width:100%;
    max-height:100%;
    z-index:auto
}

.app-grid {
    top:10.2%;
    left:6%;
    right:6%;
    column-gap:10px;
    row-gap:20px
}

.app-touch {
    gap:5px
}

.app-label {
    font-size:11px;
    font-weight:500;
    letter-spacing:-.2px
}

.dock {
    left:4%;
    right:4%;
    bottom:3.5%;
    padding:12px 8px 10px;
    gap:9px;
    background:rgba(115,115,121,.33);
    backdrop-filter:blur(22px)
}

.dock .app-art {
    width:min(100%,60px)
}

.home-search {
    position:absolute;
    bottom:calc(3.5% + 92px);
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    border-radius:18px;
    background:#4b4b4e90;
    color:white;
    padding:6px 12px;
    font-size:11px;
    line-height:1;
    backdrop-filter:blur(12px)
}

.home-search svg {
    width:12px;
    height:12px
}

#home-screen .home-wallpaper {
    background-image:linear-gradient(155deg,#080809,#000 55%,#030305)
}

@media(max-width:767px) {
    .app-grid {
        top:calc(10% + env(safe-area-inset-top,0px) / 4)
    }
    .home-search {
        bottom:calc(3.5% + 92px + env(safe-area-inset-bottom,0px))
    }
}

/* ==============================================================
   LAST LOOP | PNG lock/home + interactive HTML apps
   Figma 450 x 920 artboard, consistent image/touch coordinates
   =============================================================== */
/* Keep the entire PNG (including physical bezel) at its true aspect ratio. */
.device {
    width: min(450px, 100vw, calc(100dvh * 450 / 920));
    aspect-ratio: 450 / 920;
}

/* For the three Figma screens, do not paint another CSS phone frame. */
.device.png-mode {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.device.png-mode::before, .device.png-mode .device-side {
    display: none !important;
}

.device.png-mode .game {
    border-radius: 0;
    background: transparent;
}

.png-screen-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}

/* Clock is deliberately separate: status symbols are baked into PNG. */
.png-status-clock {
    display: none;
    position: absolute;
    left: 18.2%;
    top: 4.5%;
    z-index: 110;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(10px, 3.5vw, 17px);
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

.device.png-mode .png-status-clock {
    display: block;
}

/* Date/time only on the lock-screen PNG. */
#lock-screen .lock-datetime {
    top: 14.8%;
    left: 12%;
    width: 76%;
    z-index: 2;
}

#lock-screen #lock-date {
    font-size: clamp(15px, 4.6vw, 23px);
    font-weight: 700;
    letter-spacing: -0.5px;
}

#lock-screen #lock-time {
    font-size: clamp(65px, 19vw, 102px);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -3px;
}

/* PNG has flashlight and camera artwork; these buttons are invisible. */
#lock-screen .png-lock-actions {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 6.4%;
    width: auto;
    padding: 0;
    display: flex;
    justify-content: space-between;
    z-index: 5;
}

#lock-screen .png-lock-actions .lock-quick {
    width: 13%;
    aspect-ratio: 1;
    height: auto;
    border: 0;
    background: transparent !important;
    color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

#lock-screen.flashlight-on::after {
    z-index: 1;
}

/* HTML passcode UI above Lock.png, not baked into the image. */
#passcode-screen {
    background: transparent;
}

#passcode-screen .passcode-panel {
    top: 20%;
    left: 17%;
    right: 17%;
    z-index: 2;
}

#passcode-screen .passcode-panel h1 {
    font-size: clamp(18px, 4.8vw, 24px);
}

#passcode-screen .passcode-dots {
    margin-bottom: 33px;
}

#passcode-screen .passcode-pad {
    width: 100%;
    row-gap: 13px;
    column-gap: 8px;
}

#passcode-screen .passcode-pad button {
    width: min(100%, 78px);
    background: rgba(140, 137, 141, .43);
}

#passcode-screen .passcode-footer {
    bottom: 11%;
    left: 18%;
    right: 18%;
    z-index: 2;
}

/* Invisible home icon hit boxes align to the PNG's 450x920 pixels. */
.png-app-hotspots, .png-dock-hotspots {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.png-app-touch, .png-dock-touch {
    position: absolute;
    border: 0;
    padding: 0;
    background: transparent;
    border-radius: 16%;
    pointer-events: auto;
    touch-action: manipulation;
}

.png-app-touch {
    left: calc((58 + var(--col) * 90) / 450 * 100%);
    top: calc((110 + var(--row) * 98) / 920 * 100%);
    width: calc(60 / 450 * 100%);
    height: calc(61 / 920 * 100%);
}

.png-dock-touch {
    left: calc((58 + var(--col) * 91) / 450 * 100%);
    top: calc(784 / 920 * 100%);
    width: calc(62 / 450 * 100%);
    height: calc(65 / 920 * 100%);
}

.png-app-touch:active, .png-dock-touch:active {
    background: rgba(255,255,255,.12);
}

/* Never apply the old full-screen mobile rules to the Figma PNG screens. */
@media (max-width: 767px) {
    body {
        display: grid;
        place-items: center;
        background: #000;
    }
    .device.png-mode {
        width: min(100vw, calc(100dvh * 450 / 920));
        height: auto;
        aspect-ratio: 450 / 920;
    }
    .device.png-mode .game {
        width: 100%;
        height: 100%;
    }
    .device.png-mode .png-status-clock {
        font-size: clamp(11px, 3.6vw, 17px);
    }
    .device.png-mode .passcode-panel {
        top: 20%;
    }
    .device.png-mode .passcode-footer {
        bottom: 11%;
    }
}

/* ==============================================================
   LAST LOOP | iPhone typography and PNG status-clock alignment
   =============================================================== */
:root {
    font-family: -apple-system, BlinkMacSystemFont,                  "SF Pro Display", "SF Pro Text", "Apple SD Gothic Neo",                  "Helvetica Neue", Arial, sans-serif;
    font-synthesis: none;
}

button, input {
    font-family: inherit;
}

/* PNG status icons are artwork; only the live clock is HTML. */
.device.png-mode .png-status-clock {
    left: 18.2%;
    top: 5.1%;
    font-family: -apple-system, BlinkMacSystemFont,                  "SF Pro Text", "Apple SD Gothic Neo",                  "Helvetica Neue", Arial, sans-serif;
    font-size: clamp(11px, 3.6vw, 17px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.35px;
    font-variant-numeric: tabular-nums;
}

/* iOS-like lock-screen typography. */
#lock-screen #lock-date {
    font-family: -apple-system, BlinkMacSystemFont,                  "SF Pro Text", "Apple SD Gothic Neo",                  "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
}

#lock-screen #lock-time {
    font-family: -apple-system, BlinkMacSystemFont,                  "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
}

/* ==========================================================
   LAST LOOP | Figma 450 x 920 hotspot alignment (2026-10-20)
   App artwork remains in HomeScreen.png. Buttons are invisible.
   ========================================================== */
#home-screen .png-app-touch {
    left: calc((59 + var(--col) * 91) / 450 * 100%);
    top: calc((113 + var(--row) * 98) / 920 * 100%);
    width: calc(60 / 450 * 100%);
    height: calc(60 / 920 * 100%);
}

#home-screen .png-dock-touch {
    left: calc((57 + var(--col) * 92) / 450 * 100%);
    top: calc(806 / 920 * 100%);
    width: calc(60 / 450 * 100%);
    height: calc(60 / 920 * 100%);
}

/* Restore iOS-like pressed state on the PNG icon artwork. */
#home-screen .png-app-touch:active, #home-screen .png-dock-touch:active {
    background: rgba(0, 0, 0, 0.24);
    border-radius: 22%;
}
/* PNG 화면에 이미 포함된 홈 인디케이터 중복 제거 */
.device.png-mode .home-indicator {
    display: none !important;
}
#passcode-screen .passcode-pad button[data-digit] {
    transform-origin: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 120ms ease, filter 120ms ease;
}

#passcode-screen .passcode-pad button[data-digit]:active {
    transform: scale(1.08);
    filter: brightness(1.24);
}

#passcode-screen .passcode-pad button[data-digit].key-pop {
    animation: passcode-key-pop 190ms ease-out;
}

@keyframes passcode-key-pop {
    0%   { transform: scale(1); filter: brightness(1); }
    42%  { transform: scale(1.09); filter: brightness(1.3); }
    100% { transform: scale(1); filter: brightness(1); }
}


/* ================================================================
   LAST LOOP | Figma 공통 프레임 (Lock.png 원본 유지)
   LockFrame.png는 Lock.png의 불투명한 화면 중앙만 투명하게
   만든 파생 이미지. 앱 내용 위에 프레임을 덮는 방식이다.
   ================================================================ */
.device,
.device.png-mode {
    width: min(450px, 100vw, calc(100dvh * 450 / 920));
    height: auto;
    aspect-ratio: 450 / 920;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.device::before,
.device .device-side {
    display: none !important;
}

.device .game,
.device.png-mode .game {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

/* 기존 LockScreen/HomeScreen/비밀번호 PNG 위에 프레임 중복 방지 */
.shared-iphone-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    display: none;
    z-index: 90;
}

/* 앱 화면이 보일 때만 공통 프레임을 표시 (CSS :has 지원 브라우저) */
.game:has(.app-framed:not([hidden])) > .shared-iphone-frame {
    display: block;
}

/* 앱 배경은 프레임 안쪽에만 보이게 함 */
.app-framed {
    background: transparent !important;
    color: #111;
}

.app-framed::before {
    content: "";
    position: absolute;
    inset: 8.2% 4.7% 5.3%;
    background: #fff;
    border-radius: 28px;
    pointer-events: none;
}

#notes-screen::before,
#note-detail-screen::before {
    background: #f2f2f7;
}

#photos-screen::before,
#photo-detail-screen::before,
#camera-screen::before {
    background: #000;
}

/* 상단 상태 표시줄 아래로 HTML 앱 헤더 이동 */
.app-framed .app-header {
    height: 165px;
    padding: 112px 40px 8px;
}
.app-framed .page-heading {
    margin-left: 42px;
    margin-right: 42px;
}
.app-framed .search-field {
    margin-left: 40px;
    margin-right: 40px;
}
.app-framed .conversation-list {
    margin: 0 24px;
}
.app-framed .message-header {
    top: 8.5%;
    left: 5%;
    right: 5%;
    height: 70px;
    padding: 8px 16px;
}
.app-framed .message-scroll {
    top: calc(8.5% + 70px);
    left: 5%;
    right: 5%;
    bottom: 12%;
}
.app-framed .message-compose {
    bottom: 6.2%;
    left: 5%;
    right: 5%;
}
.app-framed .notes-scroll {
    top: 245px;
    left: 5%;
    right: 5%;
    bottom: 7%;
}
.app-framed .note-detail-content {
    top: 165px;
    left: 5%;
    right: 5%;
    bottom: 7%;
}
.app-framed .photos-header {
    top: 10%;
    left: 8%;
    right: 8%;
}
.app-framed .photos-scroll {
    top: calc(10% + 92px);
    left: 5%;
    right: 5%;
    bottom: 18%;
}
.app-framed .photos-bottom {
    left: 5%;
    right: 5%;
    bottom: 6%;
}
.app-framed .photo-detail-header {
    top: 10%;
    left: 7%;
    right: 7%;
}
.app-framed .photo-detail-viewer {
    top: 18%;
    left: 5%;
    right: 5%;
    bottom: 22%;
}
.app-framed .photo-detail-bottom {
    left: 5%;
    right: 5%;
    bottom: 6%;
}
.app-framed .camera-viewfinder {
    left: 5%;
    right: 5%;
}
.app-framed .camera-bottom {
    left: 5%;
    right: 5%;
    bottom: 8%;
}
.app-framed.placeholder-screen {
    padding-top: 28%;
}
.app-framed .placeholder-back {
    top: 13%;
    left: 9%;
}

/* 원본 PNG에 상태 아이콘과 홈 바가 있으므로 HTML 복제 제거 */
.device .home-indicator,
.app-framed .photos-home-indicator {
    display: none !important;
}

/* 아이폰 상태 시계는 공통 PNG 위에 표시 */
.device .png-status-clock {
    display: block;
    z-index: 110;
}

@media (max-width: 767px) {
    .device,
    .device.png-mode {
        width: min(100vw, calc(100dvh * 450 / 920));
        height: auto;
        aspect-ratio: 450 / 920;
    }
    .app-framed .app-header {
        height: 17.9%;
        padding-top: 12%;
    }
    .app-framed .notes-scroll {
        top: 26.6%;
    }
    .app-framed .note-detail-content {
        top: 17.9%;
    }
}


/* ===== 피그마 메시지 목록 (450 × 920 기준) ===== */
#message-list-screen {
    background: transparent !important;
    overflow: hidden;
}
#message-list-screen .inbox-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    transition: opacity .48s ease, transform .48s ease;
}
.inbox-before { opacity: 1; }
.inbox-after { opacity: 0; transform: translateY(1.4%); }
#message-list-screen.arrived .inbox-before {
    opacity: 0;
    transform: translateY(-1.4%);
}
#message-list-screen.arrived .inbox-after {
    opacity: 1;
    transform: translateY(0);
}
.inbox-scroll-area {
    position: absolute;
    top: 24.3%;
    bottom: 5.8%;
    left: 5%;
    width: 90%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    z-index: 5;
}
.inbox-scroll-area::-webkit-scrollbar { display: none; }
.inbox-hitbox-layer {
    position: relative;
    width: 100%;
    height: 128%;
}
.inbox-row-touch {
    position: absolute;
    left: 0;
    width: 100%;
    height: 8.05%;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.inbox-back-touch {
    position: absolute;
    top: 9.5%;
    left: 5%;
    width: 26%;
    height: 5%;
    z-index: 6;
    border: 0;
    background: transparent;
}
/* iPhone-style incoming Messages banner: overlays the current app. */
.sohee-notification {
    position: absolute;
    z-index: 160;
    top: 6.8%;
    left: 8%;
    width: 84%;
    min-height: 69px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 13px;
    color: #19191c;
    background: rgba(245, 245, 249, 0.96);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 18px;
    box-shadow: 0 7px 24px rgba(0,0,0,.20);
    opacity: 0;
    transform: translate3d(0,-115%,0);
    transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .24s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.sohee-notification.visible {
    opacity: 1;
    transform: translate3d(0,0,0);
}
.sohee-notification[hidden] { display: none !important; }
.sohee-notification-icon {
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #a1a5b0;
    overflow: hidden;
}
.sohee-notification-icon img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sohee-notification-content { display: block; flex: 1; min-width: 0; }
.sohee-notification-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.sohee-notification-heading strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sohee-notification-when { color: #8b8b90; font-size: 11px; white-space: nowrap; }
.sohee-notification-content small { display: block; margin-top: 5px; font-size: 14px; line-height: 1.3; font-weight: 400; }

/* 소희의 기본 프로필 + 오른쪽 아래 메시지 앱 배지 (iOS 알림 스타일) */
.sohee-notification-avatar-wrap {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: block;
}
.sohee-notification-avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.sohee-notification-app-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: #34c759;
    box-shadow: 0 0 0 1.5px rgba(245,245,249,.98);
}
.sohee-notification-app-badge svg {
    width: 15px;
    height: 15px;
    display: block;
}


/* 사진 상세 화면 상단 버튼: 실제 iPhone 앨범 스타일 SVG */
.photo-detail-back,
.photo-detail-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    box-sizing: border-box;
    line-height: 1;
}

.photo-detail-back .photo-header-icon,
.photo-detail-more .photo-header-icon {
    display: block;
    flex: none;
    transform: none;
}

.photo-back-icon {
    width: 24px;
    height: 24px;
}

.photo-more-icon {
    width: 25px;
    height: 25px;
}

/* LAST LOOP | 사진 앱 하단 아이폰 스타일 툴바 — 단일 최종 설정 */
.photo-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    padding: 0 14px;
    gap: 8px;
}
.photo-detail-toolbar .photo-tool {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    padding: 0;
    flex: 0 0 49px;
    border: 0;
    border-radius: 50%;
    background: #242424;
    color: #fff;
}
.photo-detail-toolbar .photo-tool-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 0 7px;
    min-height: 49px;
    border-radius: 999px;
    background: #242424;
}
.photo-detail-toolbar .photo-tool-group .photo-tool {
    width: 43px;
    height: 49px;
    flex: 0 0 43px;
    background: transparent;
}
.photo-detail-toolbar .photo-tool svg {
    display: block;
    width: 29px;
    height: 29px;
    overflow: visible;
    fill: none;
}
.photo-detail-toolbar .photo-tool-group .photo-tool svg {
    width: 30px;
    height: 30px;
}
.photo-detail-toolbar .photo-favorite.active svg {
    fill: currentColor;
}
@media (max-width: 360px) {
    .photo-detail-toolbar { padding: 0 9px; gap: 5px; }
    .photo-detail-toolbar .photo-tool { width: 45px; height: 45px; flex-basis: 45px; }
    .photo-detail-toolbar .photo-tool-group { min-height: 45px; padding: 0 4px; gap: 0; }
    .photo-detail-toolbar .photo-tool-group .photo-tool { width: 39px; height: 45px; flex-basis: 39px; }
    .photo-detail-toolbar .photo-tool svg { width: 27px; height: 27px; }
    .photo-detail-toolbar .photo-tool-group .photo-tool svg { width: 28px; height: 28px; }
}


/* LAST LOOP | 사진 상세 화면 최종 크기 보정 (기존 JS/레이아웃 유지) */
#photo-detail-screen .photo-detail-header {
    left: 16px; right: 16px; height: 48px;
}
#photo-detail-screen .photo-detail-back,
#photo-detail-screen .photo-detail-more {
    width: 36px; height: 36px; background: #242424;
}
#photo-detail-screen .photo-back-icon { width: 19px; height: 19px; }
#photo-detail-screen .photo-more-icon { width: 20px; height: 20px; }
#photo-detail-screen .photo-detail-date {
    min-width: 0; padding: 6px 17px;
    font-size: 14px; font-weight: 600; line-height: 1.25;
    letter-spacing: -0.25px; border-radius: 22px;
}
#photo-detail-screen .photo-detail-date small {
    margin-top: 2px; font-size: 11px; font-weight: 400; line-height: 1.2;
}
#photo-detail-screen .photo-detail-toolbar {
    height: 62px; padding: 0 18px; gap: 9px;
}
#photo-detail-screen .photo-detail-toolbar .photo-tool {
    width: 43px; height: 43px; flex: 0 0 43px;
    padding: 0; border-radius: 50%;
}
#photo-detail-screen .photo-detail-toolbar .photo-tool-group {
    min-height: 43px; padding: 0 6px; gap: 2px;
    background: #242424; border-radius: 999px;
}
#photo-detail-screen .photo-detail-toolbar .photo-tool-group .photo-tool {
    width: 37px; height: 43px; flex: 0 0 37px;
    background: transparent;
}
#photo-detail-screen .photo-detail-toolbar .photo-tool svg,
#photo-detail-screen .photo-detail-toolbar .photo-tool-group .photo-tool svg {
    width: 23px; height: 23px; display: block; overflow: visible;
}
#photo-detail-screen .photo-detail-toolbar .photo-favorite.active svg {
    fill: currentColor;
}
@media (max-width: 360px) {
    #photo-detail-screen .photo-detail-toolbar { padding: 0 12px; gap: 5px; }
    #photo-detail-screen .photo-detail-toolbar .photo-tool { width: 40px; height: 40px; flex-basis: 40px; }
    #photo-detail-screen .photo-detail-toolbar .photo-tool-group { min-height: 40px; padding: 0 3px; gap: 0; }
    #photo-detail-screen .photo-detail-toolbar .photo-tool-group .photo-tool { width: 34px; height: 40px; flex-basis: 34px; }
    #photo-detail-screen .photo-detail-toolbar .photo-tool svg,
    #photo-detail-screen .photo-detail-toolbar .photo-tool-group .photo-tool svg { width: 22px; height: 22px; }
}

/* Photo detail header: keep all three controls inside the framed display. */
#photo-detail-screen.app-framed .photo-detail-header {
    top: 13.5%;
    left: 10%;
    right: 10%;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
#photo-detail-screen .photo-detail-back,
#photo-detail-screen .photo-detail-more {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}
#photo-detail-screen .photo-detail-date {
    flex: 0 1 auto;
    max-width: calc(100% - 92px);
    min-width: 0;
    padding: 5px 12px;
    font-size: 13px;
    white-space: nowrap;
}
#photo-detail-screen .photo-detail-date small {
    font-size: 10px;
}

/* === LAST LOOP / Clock alarm + Lock.png shared frame === */
/* Lock.png is opaque: render it UNDER app content, never on top of it. */
.game:has(.app-framed:not([hidden])) > .shared-iphone-frame {
    display: block;
    z-index: 0;
}
.game > .screen { z-index: 1; }
.game > .sohee-notification { z-index: 120; }
/* Other PNG screens already have their own frame baked into the image. */
.game:not(:has(.app-framed:not([hidden]))) > .shared-iphone-frame { display: none; }

#clock-screen {
    color: #fff;
    background: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
    font-synthesis: none;
}
#clock-screen::before { background: #000; }
.clock-header, .clock-alarm-scroll, .clock-tabbar { position: absolute; z-index: 2; }
.clock-header { top: 10.2%; left: 8%; right: 8%; }
.clock-top-row { display: flex; align-items: center; height: 32px; gap: 16px; }
.clock-top-row button { border: 0; background: transparent; color: #ff9f0a; padding: 0; font-size: 15px; }
.clock-top-row .clock-home-back { margin-right: auto; }
.clock-top-row .clock-add { font-size: 27px; font-weight: 300; }
.clock-header h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.6px; margin: 13px 0 0; font-weight: 700; }
.clock-alarm-scroll {
    top: 20.3%; bottom: 13.5%; left: 7.5%; right: 7.5%;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    touch-action: pan-y; scrollbar-width: none;
}
.clock-alarm-scroll::-webkit-scrollbar { display: none; }
.clock-sleep-row { height: 52px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #2d2d2f; font-size: 14px; }
.clock-sleep-row svg { width: 21px; height: 21px; color: #ff9f0a; }
.clock-sleep-config { margin-left: auto; color: #ff9f0a; font-size: 13px; }
.clock-section-heading { font-size: 15px; font-weight: 650; margin: 16px 0 2px; }
.clock-alarm-row { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 10px; border-bottom: 1px solid #2a2a2c; }
.clock-alarm-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clock-alarm-time { font-size: clamp(31px, 8.8vw, 42px); font-weight: 300; line-height: 1.05; letter-spacing: -1.3px; color: #77777b; font-variant-numeric: tabular-nums; }
.clock-alarm-caption { font-size: 12px; color: #77777b; }
.clock-alarm-row.is-on .clock-alarm-time { color: #fff; }
.clock-alarm-row.is-on .clock-alarm-caption { color: #d5d5d5; }
.clock-switch { width: 49px; height: 30px; flex: 0 0 49px; border: 0; border-radius: 18px; background: #39393d; padding: 2px; display: flex; align-items: center; justify-content: flex-start; }
.clock-switch span { width: 26px; height: 26px; border-radius: 50%; background: white; box-shadow: 0 1px 3px #0005; transition: transform .15s; }
.clock-switch[aria-checked="true"] { background: #30d158; }
.clock-switch[aria-checked="true"] span { transform: translateX(19px); }
.clock-tabbar { bottom: 5.9%; left: 5%; right: 5%; height: 56px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid #29292b; background: #101012; }
.clock-tab { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; color: #999; font-size: 10px; white-space: nowrap; }
.clock-tab.selected { color: #ff9f0a; }
.clock-tab-symbol { font-size: 25px; line-height: 1; }

/* === iPhone reference adjustments 2026-10-21 === */
/* SF Pro on iOS; Apple SD Gothic Neo for Korean glyphs. */
#camera-screen .camera-switch {
  display: grid; place-items: center;
  font-size: 0; width: 47px; height: 47px;
  background: #292929; color: #fff;
}
#camera-screen .camera-switch .camera-flip-svg { width: 29px; height: 29px; display: block; }
#clock-screen, #clock-screen button, #photo-detail-screen .photo-detail-date,
#message-list-screen .inbox-status-time {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Apple SD Gothic Neo", "Helvetica Neue", sans-serif !important;
  font-synthesis: none;
}
/* Native Clock layout: round top actions, large Sleep section and scrolling alarms. */
#clock-screen .clock-header { top: 10.3%; left: 6.8%; right: 6.8%; }
#clock-screen .clock-top-row { justify-content: flex-end; gap: 13px; height: 43px; }
#clock-screen .clock-top-row .clock-edit,
#clock-screen .clock-top-row .clock-add {
  height: 43px; border-radius: 999px; background: #242426;
  color: #fff; display: grid; place-items: center;
  border: 1px solid #333; font-weight: 500;
}
#clock-screen .clock-top-row .clock-edit { padding: 0 16px; font-size: 15px; }
#clock-screen .clock-top-row .clock-add { width: 43px; padding: 0; font-size: 29px !important; font-weight: 300; }
#clock-screen .clock-header h1 { font-size: 31px; font-weight: 700; margin: 15px 0 0; }
#clock-screen .clock-alarm-scroll { top: 22.6%; bottom: 12%; left: 7%; right: 7%; }
#clock-screen .clock-sleep-row { height: 59px; border-bottom: 1px solid #323234; font-size: 16px; }
#clock-screen .clock-sleep-row svg { color: #fff; width: 21px; height: 21px; }
#clock-screen .clock-sleep-config { display: none; }
#clock-screen .clock-sleep-empty {
  min-height: 102px; display: grid; grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto; align-items: center; column-gap: 8px;
  border-bottom: 1px solid #303032; padding: 5px 0 13px;
}
#clock-screen .clock-sleep-none { color: #88888c; font-size: clamp(29px, 9vw, 42px); font-weight: 300; letter-spacing: -1.5px; }
#clock-screen .clock-sleep-change { background: #262628; color: #ff9f0a; border-radius: 20px; padding: 7px 11px; font-size: 13px; }
#clock-screen .clock-sleep-empty small { grid-column: 1 / -1; font-size: 12px; color: #88888c; }
#clock-screen .clock-section-heading { font-size: 17px; font-weight: 600; margin: 37px 0 10px; padding-bottom: 10px; border-bottom: 1px solid #303032; }
#clock-screen .clock-alarm-row { min-height: 94px; }
#clock-screen .clock-alarm-time { font-size: clamp(38px, 11.5vw, 53px); letter-spacing: -1.6px; font-weight: 300; }
#clock-screen .clock-alarm-caption { font-size: 12px; }
#clock-screen .clock-tabbar {
  left: 6.5%; right: 6.5%; bottom: 5.4%; height: 66px;
  border: 1px solid #343436; border-radius: 40px;
  background: rgba(37,37,39,.97); overflow: hidden;
  display: grid; grid-template-columns: repeat(4,1fr); padding: 4px;
}
#clock-screen .clock-tab { color: #fff; font-size: 10px; gap: 3px; }
#clock-screen .clock-tab svg { width: 25px; height: 25px; display: block; }
#clock-screen .clock-tab.selected { background: #111113; border-radius: 35px; color: #ff9f0a; }
/* Photo date and time: same weight, iOS typography. */
#photo-detail-screen .photo-detail-date,
#photo-detail-screen .photo-detail-date > div,
#photo-detail-screen .photo-detail-date small {
  font-weight: 400 !important; letter-spacing: -.2px;
}
#photo-detail-screen .photo-detail-date > div { font-size: 12px; line-height: 1.35; }
#photo-detail-screen .photo-detail-date small { font-size: 10px; line-height: 1.25; }
/* Messages list PNG contains signal icons but not a live clock. */
#message-list-screen .inbox-status-time {
  position: absolute; z-index: 12; left: 18.1%; top: 5.0%;
  color: #111; font-size: clamp(11px, 3.6vw, 17px);
  font-weight: 600; line-height: 1.15; letter-spacing: -.3px;
  pointer-events: none; font-variant-numeric: tabular-nums;
}

/* Clock screen: transparent touch target for the frame's existing home indicator. */
#clock-screen .clock-home-bar-touch {
    position: absolute;
    left: 30%;
    width: 40%;
    bottom: 2.4%;
    height: 5.2%;
    z-index: 150;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* One status clock for ALL screens. Position/size are relative to the
   simulated iPhone, not the browser window. No per-app movement. */
.device .game { container-type: inline-size; }
.device .png-status-clock,
.device.png-mode .png-status-clock {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    top: 4.6% !important;
    left: 18.2% !important;
    width: 15% !important;
    height: 2.1% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: clamp(10px, 3.15cqw, 15px) !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif !important;
    font-synthesis: none !important;
    font-feature-settings: normal !important;
    font-variant-numeric: normal !important;
    color: #fff !important;
    z-index: 300 !important;
    pointer-events: none !important;
    transform: none !important;
}
/* Messages: only the color changes, not geometry. Mask any baked-in time. */
.device.status-light .png-status-clock {
    color: #111 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px #fff !important;
}
#message-list-screen .inbox-status-time { display: none !important; }
/* 상단 시간 - PC / 모바일 동일한 크기 */
.device .png-status-clock,
.device.png-mode .png-status-clock {
    font-family: -apple-system, BlinkMacSystemFont,
                 "SF Pro Text", sans-serif !important;

    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
}


/* === LAST LOOP · Weather (only weather screen; existing status clock untouched) === */
#weather-screen { background:linear-gradient(180deg,#367bb5 0%,#608fb8 44%,#476b9d 100%); color:#fff; overflow:hidden; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; }
#weather-screen.weather-night { background:linear-gradient(180deg,#162c54 0%,#304b7c 54%,#415b86 100%); }
#weather-screen.weather-cloudy { background:linear-gradient(180deg,#526e8c 0%,#7d93ab 48%,#536c8b 100%); }
#weather-screen.weather-rain { background:linear-gradient(180deg,#35445f 0%,#62758c 52%,#394e71 100%); }
#weather-screen .weather-scroller { position:absolute; inset:0 0 10.5%; overflow-y:auto; overflow-x:hidden; padding:0 5.2% 22px; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; }
#weather-screen .weather-scroller::-webkit-scrollbar, #weather-screen .weather-hourly::-webkit-scrollbar {display:none}
#weather-screen .weather-hero {padding-top:23%; padding-bottom:16%; text-align:center; text-shadow:0 1px 6px #0002; }
#weather-screen .weather-city {font-size:clamp(27px,8cqw,36px); font-weight:400; letter-spacing:-.6px}
#weather-screen .weather-temp {font-size:clamp(72px,23cqw,103px); line-height:1.05; font-weight:200; letter-spacing:-5px; margin:1px 0 2px}
#weather-screen .weather-description {font-size:19px; font-weight:500}
#weather-screen .weather-high-low {font-size:15px; margin-top:4px; font-weight:500}
#weather-screen .weather-card {border-radius:15px; background:#233c6490; box-shadow:inset 0 1px 0 #ffffff20; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); margin-bottom:12px; overflow:hidden}
#weather-screen .weather-card-title {margin:0 14px; padding:12px 0 10px; font-size:11px; color:#e7edf5; letter-spacing:.35px; border-bottom:1px solid #ffffff35; font-weight:600}
#weather-screen .weather-hourly {display:flex; gap:0; overflow-x:auto; padding:15px 4px 18px; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x}
#weather-screen .weather-hour {min-width:61px; display:flex; flex-direction:column; align-items:center; gap:12px; font-size:13px; flex-shrink:0; font-weight:600}
#weather-screen .weather-hour .wx-icon {font-size:23px; height:27px; line-height:27px}
#weather-screen .weather-hour .wx-degree {font-size:16px}
#weather-screen .weather-daily {padding:0 14px 4px}
#weather-screen .weather-day {display:grid; grid-template-columns:46px 32px 36px minmax(0,1fr) 36px; align-items:center; gap:5px; min-height:46px; border-bottom:1px solid #ffffff24; font-size:15px; font-weight:600}
#weather-screen .weather-day:last-child {border-bottom:0}
#weather-screen .weather-day .wx-icon {font-size:21px; text-align:center}
#weather-screen .weather-low {color:#d1dce9; text-align:right}
#weather-screen .weather-high {text-align:right}
#weather-screen .weather-range {height:4px; border-radius:5px; background:#ffffff28; position:relative; overflow:hidden}
#weather-screen .weather-range span {position:absolute; height:100%; border-radius:5px; background:linear-gradient(90deg,#b2d5e9,#ffe28a,#ffc36e)}
#weather-screen .weather-source {font-size:10px; text-align:center; color:#e5eaf0b5; padding:10px 0 12px}
#weather-screen .weather-footer {position:absolute; bottom:0; height:10.5%; left:0; right:0; background:linear-gradient(0deg,#304b73c9,#304b7310); z-index:10; display:flex; justify-content:center; align-items:flex-start; padding-top:14px}
#weather-screen .weather-page-dots {display:flex; gap:8px; align-items:center}
#weather-screen .weather-page-dots span {height:6px; width:6px; background:#ffffff55; border-radius:50%}
#weather-screen .weather-page-dots span.active {background:#fff}
#weather-screen .weather-home-touch {position:absolute; bottom:0; left:20%; width:60%; height:32px; border:0; background:transparent; display:grid; place-items:end center; padding-bottom:8px; z-index:11}
#weather-screen .weather-home-line {height:5px; width:43%; border-radius:6px; background:#fff}

/* Weather page: override the shared white app panel without touching other apps. */
#weather-screen.app-framed {
    background: linear-gradient(180deg,#367bb5 0%,#608fb8 44%,#476b9d 100%) !important;
    color: #fff;
}
#weather-screen.app-framed::before { display: none !important; }
#weather-screen.weather-night.app-framed {
    background: linear-gradient(180deg,#162c54 0%,#304b7c 54%,#415b86 100%) !important;
}
#weather-screen.weather-cloudy.app-framed {
    background: linear-gradient(180deg,#526e8c 0%,#7d93ab 48%,#536c8b 100%) !important;
}
#weather-screen.weather-rain.app-framed {
    background: linear-gradient(180deg,#35445f 0%,#62758c 52%,#394e71 100%) !important;
}

/* LAST LOOP: Weather confined to Lock.png's inner display, leaving the bezel
   and native-looking status area visible. Existing status clock untouched. */
#weather-screen.app-framed {
  background: transparent !important;
  overflow: hidden;
  color: #fff;
}
#weather-screen.app-framed::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 8.2% 4.7% 5.3%;
  border-radius: 28px;
  background: linear-gradient(180deg,#367bb5 0%,#608fb8 44%,#476b9d 100%);
  z-index: 0;
  pointer-events: none;
}
#weather-screen.weather-night.app-framed::before {background:linear-gradient(180deg,#162c54,#304b7c 54%,#415b86)}
#weather-screen.weather-cloudy.app-framed::before {background:linear-gradient(180deg,#526e8c,#7d93ab 48%,#536c8b)}
#weather-screen.weather-rain.app-framed::before {background:linear-gradient(180deg,#35445f,#62758c 52%,#394e71)}
#weather-screen .weather-scroller {
  position:absolute;
  top:8.2%; right:4.7%; bottom:15.8%; left:4.7%;
  z-index:1;
  padding:0 5.2% 22px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
#weather-screen .weather-hero {padding-top:11%;padding-bottom:13%;}
#weather-screen .weather-footer {
  position:absolute;
  bottom:5.3%; left:4.7%; right:4.7%;
  height:10.5%; z-index:2;
  background:linear-gradient(0deg,#304b73c9,#304b7310);
}
#weather-screen .weather-source {
  font-size:9px;
  opacity:.7;
  padding:12px 0 8px;
}
#weather-screen .weather-home-touch {bottom:0;}


/* === Weather full-bleed repair / desktop framed, mobile frameless === */
/* PC: extend color behind the status region to the bottom inside the bezel. */
#weather-screen.app-framed { background:transparent !important; }
#weather-screen.app-framed::before {
  display:block !important;
  inset:2.2% 4.7% 2.8% !important;
  border-radius:8% / 4% !important;
  z-index:0;
}
#weather-screen .weather-scroller {
  top:8.2%; right:4.7%; bottom:13%; left:4.7%;
  z-index:1;
  scroll-padding-top:0;
}
#weather-screen .weather-footer {
  bottom:2.8%; left:4.7%; right:4.7%; height:10.2%;
  border-radius:0 0 24px 24px;
}
/* Only one home indicator while Weather is open. */
.device:has(#weather-screen:not([hidden])) > .game > .home-indicator {display:none !important;}
/* The weather app supplies its own home bar; no extra black strip. */
#weather-screen .weather-home-touch {bottom:0;}

@media (max-width:767px) {
  /* Weather alone becomes a real edge-to-edge mobile screen. */
  body:has(#weather-screen:not([hidden])) {display:block; background:#000;}
  .device:has(#weather-screen:not([hidden])),
  .device.png-mode:has(#weather-screen:not([hidden])) {
    position:fixed; inset:0; width:100vw !important; height:100dvh !important;
    aspect-ratio:auto !important; max-width:none !important;
    border:0 !important; border-radius:0 !important; padding:0 !important;
  }
  .device:has(#weather-screen:not([hidden])) .game {width:100%;height:100%;border-radius:0;}
  .game:has(#weather-screen:not([hidden])) > .shared-iphone-frame {display:none !important;}
  #weather-screen.app-framed {background:linear-gradient(180deg,#367bb5,#608fb8 44%,#476b9d) !important;}
  #weather-screen.weather-night.app-framed {background:linear-gradient(180deg,#162c54,#304b7c 54%,#415b86) !important;}
  #weather-screen.weather-cloudy.app-framed {background:linear-gradient(180deg,#526e8c,#7d93ab 48%,#536c8b) !important;}
  #weather-screen.weather-rain.app-framed {background:linear-gradient(180deg,#35445f,#62758c 52%,#394e71) !important;}
  #weather-screen.app-framed::before {display:none !important;}
  #weather-screen .weather-scroller {top:env(safe-area-inset-top,0px);right:0;bottom:calc(85px + env(safe-area-inset-bottom,0px));left:0;padding:0 5% 22px;}
  #weather-screen .weather-hero {padding-top:85px;padding-bottom:65px;}
  #weather-screen .weather-footer {bottom:0;left:0;right:0;height:calc(80px + env(safe-area-inset-bottom,0px));border-radius:0;padding-top:12px;}
  #weather-screen .weather-home-touch {bottom:env(safe-area-inset-bottom,0px);}
  /* Keep the existing status clock typography, reposition only for frameless mobile. */
  .device:has(#weather-screen:not([hidden])) .png-status-clock {top:calc(14px + env(safe-area-inset-top,0px)) !important;left:7% !important;}
  /* Lightweight status symbols, because Lock.png artwork is hidden on mobile. */
  #weather-screen::after {content:'▂▃▅  ◉  ▰';position:absolute;right:7%;top:calc(11px + env(safe-area-inset-top,0px));font-size:15px;letter-spacing:2px;color:white;pointer-events:none;z-index:50;}
}

/* WEATHER DESKTOP FINAL: keep the weather background fully inside the bezel.
   Override the old 2.2% full-bleed rule; do not change status-clock typography. */
@media (min-width: 768px) {
  #weather-screen.app-framed { background: transparent !important; }
  #weather-screen.app-framed::before {
    display: block !important;
    inset: 4.0% 6.1% 4.4% !important;
    border-radius: 43px !important;
    overflow: hidden !important;
  }
  #weather-screen .weather-scroller {
    top: 8.2% !important;
    left: 6.1% !important;
    right: 6.1% !important;
    bottom: 14% !important;
  }
  #weather-screen .weather-footer {
    left: 6.1% !important;
    right: 6.1% !important;
    bottom: 4.4% !important;
    height: 10% !important;
    border-radius: 0 0 40px 40px !important;
  }
}
/* Mobile stays true fullscreen, with scrolling and no image frame. */


/* =========================================================
   Universal mobile full-screen mode — ALL screens
   Desktop styling and the existing status clock are untouched.
   ========================================================= */
@media (max-width: 767px) {
  html, body { width:100%; height:100%; margin:0; overflow:hidden; }
  body, body:has(#weather-screen:not([hidden])) {
    display:block !important; background:#000 !important;
  }
  .device, .device.png-mode,
  .device:has(#weather-screen:not([hidden])),
  .device.png-mode:has(#weather-screen:not([hidden])) {
    position:relative !important;
    width:100vw !important;
    height:100dvh !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    margin:0 !important; padding:0 !important;
    border:0 !important; border-radius:0 !important;
    box-shadow:none !important; overflow:hidden !important;
  }
  .device .game, .device.png-mode .game,
  .device:has(#weather-screen:not([hidden])) .game {
    width:100% !important; height:100% !important;
    border-radius:0 !important; overflow:hidden !important;
    background:#000;
  }
  .device::before, .device .device-side,
  .game > .shared-iphone-frame {display:none !important;}
  .game > .screen {inset:0 !important; border-radius:0 !important;}
  /* Figma screenshots contain a drawn bezel. Zoom the art to crop the
     outer frame on mobile while retaining the artwork and app buttons. */
  #lock-screen .png-screen-image,
  #passcode-screen .png-screen-image,
  #home-screen .png-screen-image,
  #message-list-screen .png-screen-image {
    width:111.5% !important; height:109% !important;
    max-width:none !important; object-fit:fill !important;
    position:absolute !important; left:-5.75% !important; top:-4.5% !important;
  }
  /* Make PNG home icon hitboxes follow the zoomed artwork. */
  #home-screen .png-app-hotspots,
  #home-screen .png-dock-hotspots {
    position:absolute !important;
    inset:-4.5% -5.75% !important;
    width:111.5% !important; height:109% !important;
  }
  /* HTML apps are edge-to-edge, with no white rounded inset. */
  .app-framed, .app-framed.placeholder-screen {background:#fff !important;}
  .app-framed::before {display:none !important;}
  #notes-screen, #note-detail-screen {background:#f2f2f7 !important;}
  #photos-screen, #photo-detail-screen, #camera-screen, #clock-screen {background:#000 !important;}
  #weather-screen.app-framed {background:linear-gradient(180deg,#367bb5,#608fb8 44%,#476b9d) !important;}
  #weather-screen.weather-night.app-framed {background:linear-gradient(180deg,#162c54,#304b7c 54%,#415b86) !important;}
  #weather-screen.weather-cloudy.app-framed {background:linear-gradient(180deg,#526e8c,#7d93ab 48%,#536c8b) !important;}
  #weather-screen.weather-rain.app-framed {background:linear-gradient(180deg,#35445f,#62758c 52%,#394e71) !important;}
  #weather-screen::after {display:none !important;content:none !important;}
  /* Keep the time text's font settings; prevent the PNG clock and the
     separate HTML clock from appearing simultaneously. */
  .device.png-mode .png-status-clock {display:none !important;}
  .device:not(.png-mode) .png-status-clock {display:block;}
  .game > .home-indicator {display:none !important;}
  #weather-screen .weather-scroller {top:0 !important;bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;}
  #weather-screen .weather-hero {padding-top:calc(120px + env(safe-area-inset-top,0px)) !important;}
  #weather-screen .weather-footer {bottom:0 !important;}
}


/* LAST LOOP: mobile in-game Home bar (separate from Safari / iOS Home bar).
   This overrides legacy rules which hid the shared button. */
@media (max-width: 767px) {
  .device .game > .home-indicator {
    display:block !important;
    position:absolute !important;
    left:50% !important;
    bottom:calc(15px + env(safe-area-inset-bottom, 0px)) !important;
    transform:translateX(-50%) !important;
    width:36% !important;
    max-width:145px !important;
    height:5px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:99px !important;
    background:#fff !important;
    box-shadow:0 1px 3px #0005 !important;
    z-index:1000 !important;
    pointer-events:auto !important;
    cursor:pointer;
    touch-action:manipulation;
  }
  /* The bar itself is only 5px tall; extend its tap area invisibly. */
  .device .game > .home-indicator::before {
    content:"";
    position:absolute;
    left:-30px; right:-30px; top:-19px; bottom:-18px;
  }
  /* Screens with a screenshot's existing bar or a dedicated bar use
     the shared tappable bar instead, avoiding two HTML indicators. */
  .app-framed .photos-home-indicator,
  #weather-screen .weather-home-line {display:none !important;}
  /* Lock / passcode should never navigate home on tap. Lock is swipe-to-unlock. */
  .device:has(#lock-screen:not([hidden])) .game > .home-indicator,
  .device:has(#passcode-screen:not([hidden])) .game > .home-indicator {display:none !important;}
}


/* ===== LAST LOOP mobile lock/passcode revision =====
   On iPhone Safari, use the device's REAL status bar.
   Desktop styling remains unchanged. ===== */
@media (max-width:767px) {
  /* Hide every simulated top status clock and any simulated top status icons. */
  .device .png-status-clock,
  .device.png-mode .png-status-clock,
  .device:not(.png-mode) .png-status-clock { display:none !important; }

  /* Mobile lock screen: no baked-in phone frame or scaled screenshot. */
  #lock-screen { background:#000 !important; }
  #lock-screen > .png-screen-image { display:none !important; }
  #lock-screen .lock-datetime {
    position:absolute !important; top:calc(12% + env(safe-area-inset-top,0px)) !important;
    left:0 !important; width:100% !important; z-index:3 !important;
  }
  #lock-screen #lock-date {font-size:clamp(17px,5vw,23px) !important;}
  #lock-screen #lock-time {font-size:clamp(75px,22vw,110px) !important;}
  #lock-screen .png-lock-actions {
    position:absolute !important; left:0 !important; right:0 !important;
    width:100% !important; bottom:calc(65px + env(safe-area-inset-bottom,0px)) !important;
    padding:0 8% !important; box-sizing:border-box !important;
    display:flex !important; justify-content:space-between !important;
  }
  #lock-screen .png-lock-actions .lock-quick {
    display:block !important; flex:0 0 52px !important; width:52px !important;
    height:52px !important; aspect-ratio:1 !important;
    border-radius:50% !important; background-color:rgba(80,80,80,.48) !important;
    background-repeat:no-repeat !important; background-position:center !important;
    background-size:25px 25px !important; cursor:pointer;
  }
  #lock-screen .png-lock-actions .flashlight-toggle {background-image:url('../assets/lock/flash.png') !important;}
  #lock-screen .png-lock-actions .lock-camera {background-image:url('../assets/lock/camera.png') !important;}
  /* The in-game bar stays visible on lock/passcode but does not navigate home. */
  .device:has(#lock-screen:not([hidden])) .game > .home-indicator,
  .device:has(#passcode-screen:not([hidden])) .game > .home-indicator {
    display:block !important;
  }
  /* Passcode is a real HTML keypad, not a scaled phone PNG. */
  #passcode-screen {background:#000 !important;}
  #passcode-screen > .png-screen-image {display:none !important;}
  #passcode-screen .passcode-panel {top:calc(16% + env(safe-area-inset-top,0px)) !important;}
  #passcode-screen .passcode-footer {bottom:calc(80px + env(safe-area-inset-bottom,0px)) !important;}
}


/* Mobile lock screen: use the user's complete transparent PNG buttons.
   No additional CSS circle or icon background; left camera, right flash. */
@media (max-width:767px) {
  #lock-screen .lock-datetime {
    top:calc(13% + env(safe-area-inset-top,0px)) !important;
  }
  #lock-screen #lock-date {
    font-size:clamp(21px,5.8vw,29px) !important;
    line-height:1.25 !important;
  }
  #lock-screen #lock-time {
    font-size:clamp(96px,26vw,145px) !important;
    line-height:1.05 !important;
    letter-spacing:-3.5px !important;
  }
  #lock-screen .png-lock-actions {
    padding:0 7.5% !important;
    bottom:calc(65px + env(safe-area-inset-bottom,0px)) !important;
    align-items:center !important;
  }
  #lock-screen .png-lock-actions .lock-quick {
    flex:0 0 clamp(62px,17vw,82px) !important;
    width:clamp(62px,17vw,82px) !important;
    height:clamp(62px,17vw,82px) !important;
    min-width:0 !important;
    border:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    background-color:transparent !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:contain !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }
  #lock-screen .png-lock-actions .lock-camera {
    order:0 !important;
    background-image:url('../assets/lock/camera.png') !important;
  }
  #lock-screen .png-lock-actions .flashlight-toggle {
    order:1 !important;
    background-image:url('../assets/lock/flash.png') !important;
  }
}

/* 2026-10-21: mobile lock shortcuts: flashlight left, camera right; slightly smaller. */
@media (max-width:767px) {
  #lock-screen .png-lock-actions .lock-quick {
    flex:0 0 clamp(52px,14vw,68px) !important;
    width:clamp(52px,14vw,68px) !important;
    height:clamp(52px,14vw,68px) !important;
  }
  #lock-screen .png-lock-actions .flashlight-toggle { order:0 !important; }
  #lock-screen .png-lock-actions .lock-camera { order:1 !important; }
}

/* ===== Mobile-only passcode layout: preserve confirmed lock screen ===== */
@media (max-width: 767px) {
  #passcode-screen { background:#000 !important; overflow:hidden !important; }
  #passcode-screen > .png-screen-image { display:none !important; }
  #passcode-screen .passcode-panel {
    position:absolute !important; z-index:5 !important;
    left:6% !important; right:6% !important; width:88% !important;
    top:calc(env(safe-area-inset-top, 0px) + 13%) !important;
    display:flex !important; flex-direction:column !important; align-items:center !important;
  }
  #passcode-screen .passcode-panel h1 {
    font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif !important;
    font-size:clamp(22px,6vw,28px) !important;
    font-weight:500 !important; letter-spacing:-.5px !important;
    margin:0 0 22px !important; color:white !important;
  }
  #passcode-screen .passcode-dots { gap:clamp(19px,6vw,27px) !important; margin:0 0 clamp(27px,5.5vh,47px) !important; }
  #passcode-screen .passcode-dots span { width:13px !important; height:13px !important; box-sizing:border-box !important; }
  #passcode-screen .passcode-pad {
    width:min(100%,335px) !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    column-gap:12px !important; row-gap:clamp(10px,1.65vh,17px) !important;
  }
  #passcode-screen .passcode-pad button[data-digit] {
    width:clamp(65px,21vw,85px) !important;
    height:clamp(65px,21vw,85px) !important;
    aspect-ratio:1 !important; border-radius:50% !important;
    background:rgba(145,145,150,.34) !important;
    border:0 !important; color:white !important;
    -webkit-tap-highlight-color:transparent;
  }
  #passcode-screen .passcode-pad button strong {font-size:clamp(30px,8.5vw,39px) !important;font-weight:300 !important;}
  #passcode-screen .passcode-pad button small {font-size:10px !important;}
  #passcode-screen .passcode-footer {
    left:9% !important;right:9% !important;
    bottom:calc(72px + env(safe-area-inset-bottom,0px)) !important;
    z-index:5 !important;
  }
  #passcode-screen .passcode-footer button {font-size:16px !important;}
}
@media (max-width:767px) and (max-height:700px) {
  #passcode-screen .passcode-panel {top:calc(env(safe-area-inset-top,0px) + 8%) !important;}
  #passcode-screen .passcode-panel h1 {margin-bottom:13px !important;}
  #passcode-screen .passcode-dots {margin-bottom:18px !important;}
  #passcode-screen .passcode-pad {row-gap:7px !important;}
  #passcode-screen .passcode-pad button[data-digit] {width:clamp(58px,17vw,71px) !important;height:clamp(58px,17vw,71px) !important;}
}

/* LAST LOOP | MOBILE PASSCODE: final placement override
   Keep lock-screen styling and desktop frame untouched. */
@media (max-width:767px) {
  #passcode-screen .passcode-panel {
    top:calc(env(safe-area-inset-top,0px) + 18%) !important;
    left:7% !important; right:7% !important; width:86% !important;
  }
  #passcode-screen .passcode-panel h1 {
    font-size:clamp(23px,6vw,28px) !important;
    font-weight:400 !important;
    margin:0 0 19px !important;
  }
  #passcode-screen .passcode-dots {
    gap:clamp(25px,7.5vw,34px) !important;
    margin:0 0 0 !important;
  }
  #passcode-screen .passcode-dots span {
    width:13px !important; height:13px !important;
    border:1.5px solid white !important;
  }
  /* Deliberately separate the keypad from the passcode dots.
     Earlier CSS rules reset this space, making the layout appear unchanged. */
  #passcode-screen .passcode-pad {
    margin-top:clamp(82px,12vh,112px) !important;
    width:min(100%,320px) !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    column-gap:10px !important;
    row-gap:clamp(12px,1.8vh,18px) !important;
    justify-items:center !important;
  }
  #passcode-screen .passcode-pad button[data-digit] {
    width:clamp(68px,21vw,83px) !important;
    height:clamp(68px,21vw,83px) !important;
    border-radius:50% !important;
    background:rgba(165,165,170,.42) !important;
    border:1px solid rgba(255,255,255,.24) !important;
  }
  #passcode-screen .passcode-pad button strong {
    font-size:clamp(33px,9vw,42px) !important;
    font-weight:300 !important;
  }
  #passcode-screen .passcode-pad button small {
    font-size:10px !important; letter-spacing:2px !important;
  }
  #passcode-screen .passcode-footer {
    left:16% !important; right:16% !important;
    bottom:calc(38px + env(safe-area-inset-bottom,0px)) !important;
  }
  #passcode-screen .passcode-footer button {font-size:15px !important;}
}
@media (max-width:767px) and (max-height:720px) {
  #passcode-screen .passcode-panel {top:calc(env(safe-area-inset-top,0px) + 12%) !important;}
  #passcode-screen .passcode-pad {margin-top:clamp(43px,7vh,60px) !important;row-gap:8px !important;}
  #passcode-screen .passcode-pad button[data-digit] {width:clamp(58px,19vw,76px) !important;height:clamp(58px,19vw,76px) !important;}
}
/* 모바일 숫자 키패드 위치 조정 */
@media (max-width: 767px) {
    #passcode-screen .passcode-pad {
        transform: translateY(30px) !important;
    }
}

/* ==============================================================
   LAST LOOP | HOME SCREEN PNG ICONS + DOCK (2026-10-21)
   Only #home-screen changes. Lock/passcode/other apps unchanged.
   Icon PNGs include their own text labels; no extra HTML labels.
   =============================================================== */
#home-screen .png-app-hotspots,
#home-screen .png-dock-hotspots {
    z-index: 5;
}
#home-screen .png-app-touch,
#home-screen .png-dock-touch {
    overflow: visible;
    border-radius: 0;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
}
#home-screen .png-app-touch {
    left: calc((59 + var(--col) * 91) / 450 * 100%);
    top: calc((113 + var(--row) * 98) / 920 * 100%);
    width: calc(60 / 450 * 100%);
    height: calc(69 / 920 * 100%);
}
#home-screen .png-app-touch img,
#home-screen .png-dock-touch img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
}
#home-screen .png-app-touch:active,
#home-screen .png-dock-touch:active {
    background: transparent !important;
    opacity: .65;
    transform: scale(.96);
}
#home-screen .png-dock-background {
    position: absolute;
    left: calc(23 / 450 * 100%);
    width: calc(404 / 450 * 100%);
    top: calc(778 / 920 * 100%);
    height: calc(115 / 920 * 100%);
    pointer-events: none;
    z-index: 3;
}
#home-screen .png-dock-background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
#home-screen .png-dock-touch {
    left: calc((57 + var(--col) * 92) / 450 * 100%);
    top: calc(805 / 920 * 100%);
    width: calc(60 / 450 * 100%);
    height: calc(66 / 920 * 100%);
}
#home-screen .home-search-pill {
    position: absolute;
    left: 50%;
    top: calc(748 / 920 * 100%);
    transform: translateX(-50%);
    border-radius: 99px;
    padding: 4px 11px;
    background: #29292b;
    color: #fff;
    font-size: clamp(9px, 2.6vw, 12px);
    font-weight: 600;
    line-height: 1.4;
    z-index: 4;
    white-space: nowrap;
}
/* Lock.png contains the status icons, but not the time. */
.device.png-mode:has(#home-screen:not([hidden])) .png-status-clock {
    display: block !important;
}

/* LAST LOOP: mobile home is edge-to-edge, NO iPhone bezel or fake status bar. */
@media (max-width: 767px) {
  body:has(#home-screen:not([hidden])) { background:#000 !important; }
  .device:has(#home-screen:not([hidden])),
  .device.png-mode:has(#home-screen:not([hidden])) {
    position:relative !important; width:100vw !important; height:100dvh !important;
    max-width:none !important; aspect-ratio:auto !important;
    margin:0 !important; padding:0 !important; border:0 !important;
    border-radius:0 !important; box-shadow:none !important; overflow:hidden !important;
    background:#000 !important;
  }
  .device:has(#home-screen:not([hidden])) .game {
    position:relative !important; width:100% !important; height:100% !important;
    border-radius:0 !important; overflow:hidden !important; background:#000 !important;
  }
  .device:has(#home-screen:not([hidden]))::before,
  .device:has(#home-screen:not([hidden]))::after,
  .device:has(#home-screen:not([hidden])) .device-side,
  .device:has(#home-screen:not([hidden])) .shared-iphone-frame,
  #home-screen > .png-screen-image,
  .device:has(#home-screen:not([hidden])) .png-status-clock,
  .device:has(#home-screen:not([hidden])) .inbox-status-time {
    display:none !important;
  }
  #home-screen {
    position:absolute !important; inset:0 !important; width:100% !important;
    height:100% !important; border:0 !important; border-radius:0 !important;
    background:#000 !important; overflow:hidden !important;
  }
  #home-screen .png-app-hotspots,
  #home-screen .png-dock-hotspots {
    position:absolute !important; inset:0 !important; width:100% !important;
    height:100% !important; transform:none !important;
    pointer-events:none !important;
  }
  #home-screen .png-app-touch,
  #home-screen .png-dock-touch {position:absolute !important;pointer-events:auto !important;}
  /* App PNGs already contain labels. Four evenly spaced columns. */
  #home-screen .png-app-touch {
    left:calc(4% + var(--col) * 24%) !important;
    top:calc(13.5% + var(--row) * 10.5%) !important;
    width:20% !important; height:8.8% !important;
    padding:0 !important; margin:0 !important;
  }
  #home-screen .png-app-touch img {
    width:100% !important; height:100% !important; object-fit:contain !important;
  }
  #home-screen .png-dock-background {
    left:2% !important; width:96% !important;
    top:auto !important; bottom:calc(35px + env(safe-area-inset-bottom,0px)) !important;
    height:110px !important; max-height:none !important;
  }
 #home-screen .png-dock-background img {
    object-fit: fill !important;
}
  #home-screen .png-dock-touch {
    left: calc(16% + var(--col) * 18%) !important;
    top: auto !important;
    bottom: calc(73px + env(safe-area-inset-bottom, 0px)) !important;
    width: 15% !important;
    height: 59px !important;
    padding: 0 !important;
    margin: 0 !important;
}
  #home-screen .png-dock-touch img {object-fit:contain !important;}
  #home-screen .home-search-pill {
    top:auto !important; bottom:calc(137px + env(safe-area-inset-bottom,0px)) !important;
    font-size:12px !important;
  }
  .device:has(#home-screen:not([hidden])) .game > .home-indicator {
    display:block !important;
    bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important;
  }
}

/* MOBILE HOME ONLY — icon sizing and row spacing. Other screens unchanged. */
@media (max-width: 767px) {
  #home-screen .png-app-touch {
    left: calc(4% + var(--col) * 24%) !important;
    top: calc(12% + var(--row) * 13%) !important;
    width: 21% !important;
    height: auto !important;
    aspect-ratio: 249 / 274 !important;
  }
  #home-screen .png-app-touch img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  #home-screen .png-dock-touch {
    left: calc(7% + var(--col) * 24%) !important;
    width: 14% !important;
    height: 56px !important;
    bottom: calc(55px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* 모바일 홈 화면 Dock 통합 PNG 전용: style.css 맨 아래에 추가 */
@media (max-width: 767px) {
  #home-screen .png-dock-background {
    left: 4% !important;
    width: 92% !important;
    height: auto !important;
    aspect-ratio: 1206 / 360 !important;
    max-height: none !important;
    top: auto !important;
    bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #home-screen .png-dock-background img {
    content: url("../assets/DockCombined.png") !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  /* PNG 안에 아이콘이 있으므로 중복 이미지만 숨김. 클릭 버튼은 유지. */
  #home-screen .png-dock-touch {
    left: calc(7.5% + var(--col) * 23%) !important;
    width: 17% !important;
    height: 68px !important;
    top: auto !important;
    bottom: calc(55px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    opacity: 1 !important;
    z-index: 20 !important;
  }
  #home-screen .png-dock-touch img {
    visibility: hidden !important;
  }
}


/* Mobile only: use the iPhone's real status bar; move icons up without resizing. */
@media (max-width: 767px) {
  .device .png-status-clock,
  .device.png-mode .png-status-clock,
  .device .inbox-status-time {
    display: none !important;
    visibility: hidden !important;
  }
  #home-screen .png-app-touch {
    top: calc(8.5% + var(--row) * 13%) !important;
  }
}


/* ============================================================
   MOBILE HOME ONLY — separate Dock background + clickable icons
   Other screens and PC layout remain unchanged.
   ============================================================ */
@media (max-width: 767px) {
  /* Replace combined Dock image with a CSS-drawn rounded rectangle. */
  #home-screen .png-dock-background {
    left: 4% !important;
    width: 92% !important;
    height: auto !important;
    aspect-ratio: 1206 / 360 !important;
    top: auto !important;
    bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 32px !important;
    background: linear-gradient(160deg, rgba(58,58,61,.88), rgba(33,33,35,.92)) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    overflow: hidden !important;
  }
  #home-screen .png-dock-background img {
    display: none !important;
    content: normal !important;
  }

  /* Use the four existing individual button elements and their PNGs. */
  #home-screen .png-dock-touch {
    left: calc(8% + var(--col) * 23%) !important;
    width: 16% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    top: auto !important;
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 22% !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 20 !important;
    transition: transform .10s ease, background-color .10s ease !important;
  }
  #home-screen .png-dock-touch img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    transition: filter .10s ease !important;
  }
  #home-screen .png-dock-touch:active {
    background: rgba(0,0,0,.28) !important;
    transform: scale(.95) !important;
  }
  #home-screen .png-dock-touch:active img {
    filter: brightness(.65) !important;
  }
}


/* LAST LOOP: 모바일 홈 화면 Search만 변경 (기존 앱/Dock 유지) */
@media (max-width: 767px) {
  #home-screen .home-search-pill {
    position: absolute !important;
    top: auto !important;
    bottom: calc(153px + env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 65px !important;
    height: 30px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: #242426 !important;
    border-radius: 999px !important;
    color: #fff !important;
    font-size: 0 !important; /* 기존 영문 Search 텍스트만 숨김 */
    line-height: 1 !important;
    white-space: nowrap !important;
    z-index: 21 !important;
    pointer-events: none !important;
  }
  /* 돋보기 아이콘 */
  #home-screen .home-search-pill::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round'%3E%3Ccircle cx='10.7' cy='10.7' r='7'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E");
  }
  #home-screen .home-search-pill::after {
    content: "검색";
    display: block;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.5px;
  }
}
#sohee-notification {
  touch-action: pan-x;
  will-change: transform, opacity;
}
/* 비밀번호 오답 시 숫자 키패드는 흔들리지 않음 */
#passcode-screen .passcode-pad.wrong {
    animation: none !important;
}

/* 오답 시 점 4개만 좌우로 흔들기 */
#passcode-screen .passcode-dots:has(~ .passcode-pad.wrong) {
    animation: passcode-dots-shake 0.42s ease-in-out;
}

@keyframes passcode-dots-shake {
    0%, 100% {
        transform: translateX(0);
    }

    15%, 45%, 75% {
        transform: translateX(-9px);
    }

    30%, 60%, 90% {
        transform: translateX(9px);
    }
}
/* LAST LOOP weather: only weather screen layout; full screen on actual phones. */
@media (max-width:767px) {
  #weather-screen .weather-scroller {
    top:calc(48px + env(safe-area-inset-top,0px)) !important;
    right:0 !important; left:0 !important;
    bottom:calc(64px + env(safe-area-inset-bottom,0px)) !important;
    padding:0 5% 24px !important;
  }
  #weather-screen .weather-hero {
    padding-top:clamp(32px,7dvh,75px) !important;
    padding-bottom:clamp(32px,7dvh,68px) !important;
  }
  #weather-screen .weather-footer {
    bottom:0 !important; left:0 !important; right:0 !important;
    height:calc(64px + env(safe-area-inset-bottom,0px)) !important;
    padding-top:12px !important;
  }
  #weather-screen .weather-home-touch {bottom:env(safe-area-inset-bottom,0px) !important;}
}
@media (max-width: 767px) {
  #clock-screen .clock-header {
    top: calc(72px + env(safe-area-inset-top, 0px) * 0) !important;
    left: 7% !important;
    right: 7% !important;
  }

  #clock-screen .clock-header h1 {
    margin-top: 13px !important;
  }

  #clock-screen .clock-alarm-scroll {
    top: 183px !important;
    bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    left: 7% !important;
    right: 7% !important;
  }

  #clock-screen .clock-section-heading {
    margin-top: 25px !important;
  }

  #clock-screen .clock-tabbar {
    bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    left: 6.5% !important;
    right: 6.5% !important;
  }
}

/* 세로 높이가 짧은 모바일 화면에서도 목록이 메뉴와 겹치지 않도록 */
@media (max-width: 767px) and (max-height: 700px) {
  #clock-screen .clock-header { top: 62px !important; }
  #clock-screen .clock-alarm-scroll { top: 173px !important; }
  #clock-screen .clock-tabbar { bottom: calc(22px + env(safe-area-inset-bottom, 0px)) !important; }
}


/* ============================================================
   LAST LOOP | 알람 화면 실제 iPhone 기준 정렬 (모바일 전용)
   기존 알람 데이터/기능 및 다른 앱에는 영향 없음
   ============================================================ */
@media (max-width: 767px) {
  /* 실제 iPhone 상태바 아래부터 편집/+ 버튼 시작 */
  #clock-screen .clock-header {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    left: 4.5% !important;
    right: 4.5% !important;
  }
  #clock-screen .clock-header h1 {
    margin-top: 13px !important;
  }

  /* 제목 아래 수면/기상과 알람 목록: 프레임용 여백 제거 */
  #clock-screen .clock-alarm-scroll {
    top: calc(137px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important;
    left: 4.5% !important;
    right: 4.5% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  #clock-screen .clock-section-heading {
    margin-top: 25px !important;
  }

  /* 메뉴는 하단 고정, 목록이 메뉴 아래로 숨지 않게 분리 */
  #clock-screen .clock-tabbar {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 4.5% !important;
    right: 4.5% !important;
  }
}
@media (max-width: 767px) and (max-height: 700px) {
  #clock-screen .clock-header {
    top: calc(8px + env(safe-area-inset-top, 0px)) !important;
  }
  #clock-screen .clock-alarm-scroll {
    top: calc(132px + env(safe-area-inset-top, 0px)) !important;
  }
  #clock-screen .clock-tabbar {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* LAST LOOP | Notes app full-bleed iPhone layout — scoped only to Notes */
#notes-screen,#note-detail-screen{background:#f2f2f7!important;color:#101014!important;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif!important}
#notes-screen::before,#note-detail-screen::before{display:none!important}
#notes-screen .notes-top{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:0;right:0;padding:0 20px 0 20px;z-index:2;background:#f2f2f7}
#notes-screen .notes-nav{height:45px;display:flex;align-items:center;justify-content:space-between}
#notes-screen .notes-nav button,#notes-screen .notes-new,#note-detail-screen .note-detail-back{border:0;background:transparent;color:#e4a500;padding:0;font-size:17px}
#notes-screen .notes-back-arrow{font-size:34px;line-height:0;vertical-align:-3px;font-weight:300}
#notes-screen .notes-more{width:26px;height:26px;border:2px solid #e4a500!important;border-radius:50%;font-size:17px!important;line-height:15px;letter-spacing:-2px}
#notes-screen .notes-top h1{font-size:34px;line-height:1.16;font-weight:750;letter-spacing:-1.5px;margin:8px 0 12px}
#notes-screen .notes-search{height:37px;display:flex;align-items:center;gap:7px;background:#e3e3e8;border-radius:11px;padding:0 10px;color:#86868c}
#notes-screen .notes-search svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
#notes-screen .notes-search input{min-width:0;flex:1;background:none;border:0;outline:none;font-size:16px;color:#111}
#notes-screen .notes-search input::-webkit-search-cancel-button{-webkit-appearance:none}
#notes-screen .notes-mic{font-size:20px;color:#888}
#notes-screen .notes-scroll{position:absolute!important;top:calc(env(safe-area-inset-top,0px) + 157px)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 66px)!important;left:0!important;right:0!important;padding:0 20px 18px!important;overflow-y:auto!important;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#notes-screen .notes-group{margin:0 0 21px}
#notes-screen .notes-group h2{display:flex;justify-content:space-between;align-items:center;font-size:19px;font-weight:750;letter-spacing:-.4px;margin:13px 2px 13px}
#notes-screen .notes-chevron-down{color:#e4a500;font-size:22px;font-weight:400}
#notes-screen .notes-content{background:#fff;border-radius:11px;overflow:hidden}
#notes-screen .note-touch{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;position:relative;width:100%;min-height:76px;padding:11px 27px!important;background:#fff;border:0!important;text-align:left;color:#111;grid-template-columns:none!important}
#notes-screen .note-touch+.note-touch::before{content:"";position:absolute;top:0;left:27px;right:0;height:1px;background:#e5e5e9}
#notes-screen .note-touch.pressed{background:#ececf0}
#notes-screen .note-name{font-size:16px;font-weight:700;line-height:1.2}
#notes-screen .note-preview{display:block!important;grid-row:auto!important;color:#89898f;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
#notes-screen .note-folder{display:flex;align-items:center;gap:3px;color:#8a8a90;font-size:13px;line-height:1.2}
#notes-screen .note-folder svg{width:18px;height:16px}
#notes-screen .notes-footer{position:absolute;bottom:0;left:0;right:0;height:calc(64px + env(safe-area-inset-bottom,0px));border-top:1px solid #dddde2;background:#fafafa;display:flex;align-items:flex-start;justify-content:center;padding-top:18px;font-size:12px;z-index:3}
#notes-screen .notes-new{position:absolute;right:22px;top:13px;color:#e4a500}
#notes-screen .notes-new svg{width:25px;height:25px}
#note-detail-screen .notes-detail-header{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:20px;right:20px;height:44px;display:flex;align-items:center;z-index:3}
#note-detail-screen .note-detail-back{font-size:18px;color:#e4a500}
#note-detail-screen .note-detail-content{position:absolute!important;top:calc(env(safe-area-inset-top,0px) + 60px)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;left:0!important;right:0!important;padding:0 12px 30px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#note-detail-screen .note-detail-content img{display:block;width:100%;height:auto;object-fit:contain}
@media(min-width:768px){#notes-screen .notes-top{top:12px}#notes-screen .notes-scroll{top:157px!important;bottom:66px!important}#note-detail-screen .notes-detail-header{top:12px}#note-detail-screen .note-detail-content{top:60px!important;bottom:12px!important}}

/* LAST LOOP Notes — reference polish (only notes list) */
#notes-screen { background:#f2f2f7!important; }
#notes-screen .notes-top { background:#f2f2f7!important; }
#notes-screen .notes-nav button,#notes-screen .notes-more,#notes-screen .notes-chevron-down,#notes-screen .notes-new {color:#e8aa00!important;}
#notes-screen .notes-more {border-color:#e8aa00!important;}
#notes-screen .notes-search {background:#e6e6eb!important;}
#notes-screen .notes-mic {display:none!important;}
#notes-screen .notes-top h1 {font-size:32px!important;font-weight:700!important;letter-spacing:-1.25px!important;margin-top:5px!important;margin-bottom:10px!important;}
#notes-screen .notes-group {margin-bottom:17px!important;}
#notes-screen .notes-group h2 {font-size:17px!important;margin:11px 2px 10px!important;font-weight:700!important;}
#notes-screen .note-touch {min-height:69px!important;padding:9px 20px!important;gap:2px!important;}
#notes-screen .note-touch+.note-touch::before {left:20px!important;}
#notes-screen .note-name {font-size:15px!important;}
#notes-screen .note-preview {font-size:13px!important;}
#notes-screen .note-folder {font-size:12px!important;}
#notes-screen .notes-scroll {top:calc(env(safe-area-inset-top,0px) + 151px)!important;}
@media(min-width:768px){#notes-screen .notes-scroll{top:151px!important;}}


/* LAST LOOP | DARK NOTES v1: only the two Notes screens */
#notes-screen,#note-detail-screen{background:#000!important;color:#f5f5f7!important;color-scheme:dark!important}
#notes-screen .notes-top{top:calc(env(safe-area-inset-top,0px) + 10px)!important;background:#000!important;padding:0 17px!important}
#notes-screen .notes-nav{height:54px!important}
#notes-screen .notes-nav button{width:46px!important;height:46px!important;display:grid!important;place-items:center!important;background:#242426!important;border:1px solid #353538!important;border-radius:50%!important;color:#fff!important;font-size:0!important}
#notes-screen .notes-back-arrow{font-size:44px!important;font-weight:300!important;line-height:32px!important;vertical-align:0!important;transform:translateY(-3px)}
#notes-screen .notes-more{font-size:23px!important;letter-spacing:1px!important;line-height:1!important;border-color:#353538!important}
#notes-screen .notes-top h1{color:#fff!important;font-size:35px!important;font-weight:750!important;letter-spacing:-1.5px!important;margin:21px 0 4px!important;line-height:1.15!important}
#notes-screen .notes-total{margin:8px 0 0!important;color:#8e8e93!important;font-size:14px!important}
#notes-screen .notes-scroll{top:calc(env(safe-area-inset-top,0px) + 155px)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 98px)!important;padding:0 17px 26px!important;background:#000!important}
#notes-screen .notes-group{margin-bottom:24px!important}
#notes-screen .notes-group h2{color:#f5f5f7!important;font-size:19px!important;font-weight:700!important;margin:14px 0 13px!important}
#notes-screen .notes-chevron-down{color:#a4a4a9!important}
#notes-screen .notes-content{background:#1c1c1e!important;border-radius:23px!important}
#notes-screen .note-touch{background:#1c1c1e!important;color:#f5f5f7!important;min-height:81px!important;padding:13px 26px!important;gap:4px!important}
#notes-screen .note-touch.pressed{background:#343438!important}
#notes-screen .note-touch+.note-touch::before{left:26px!important;right:17px!important;background:#38383b!important}
#notes-screen .note-name{color:#f5f5f7!important;font-size:16px!important;font-weight:650!important}
#notes-screen .note-preview{color:#929298!important;font-size:14px!important}
#notes-screen .note-folder{color:#929298!important;font-size:13px!important}
#notes-screen .notes-footer{height:calc(86px + env(safe-area-inset-bottom,0px))!important;bottom:0!important;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;padding:10px 17px 0!important;background:linear-gradient(to top,#000 65%,rgba(0,0,0,.95))!important;border:0!important}
#notes-screen .notes-search{display:flex!important;flex:1!important;min-width:0!important;height:50px!important;padding:0 16px!important;background:#242426!important;border:1px solid #39393c!important;border-radius:999px!important;color:#b7b7bd!important;gap:10px!important}
#notes-screen .notes-search svg{width:22px!important;height:22px!important;flex-shrink:0!important}
#notes-screen .notes-search input{font-size:17px!important;color:#fff!important;background:transparent!important;width:100%!important}
#notes-screen .notes-search input::placeholder{color:#88888e!important;opacity:1}
#notes-screen .notes-new{position:static!important;flex:0 0 50px!important;width:50px!important;height:50px!important;display:grid!important;place-items:center!important;background:#242426!important;border:1px solid #39393c!important;border-radius:50%!important;color:#fff!important}
#notes-screen .notes-new svg{width:27px!important;height:27px!important}
#note-detail-screen .notes-detail-header{top:calc(env(safe-area-inset-top,0px) + 10px)!important;left:17px!important;right:17px!important;height:54px!important;display:flex!important;align-items:center!important;justify-content:space-between!important}
#note-detail-screen .note-detail-back,#note-detail-screen .notes-detail-more{display:grid!important;place-items:center!important;width:46px!important;height:46px!important;border:1px solid #353538!important;border-radius:50%!important;background:#242426!important;color:#fff!important;padding:0!important}
#note-detail-screen .note-detail-back{font-size:44px!important;line-height:1!important;padding-bottom:7px!important}
#note-detail-screen .notes-detail-more{font-size:23px!important;letter-spacing:1px!important}
#note-detail-screen .notes-detail-title{font-size:15px!important;color:#aaa!important}
#note-detail-screen .note-detail-content{top:calc(env(safe-area-inset-top,0px) + 74px)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)!important;padding:0 15px 30px!important;background:#000!important}
/* The legacy note bodies are light-background PNGs. Invert them for dark presentation.
   Photos or colored handwriting inside a note will also be altered by this filter. */
#note-detail-screen .note-detail-content img{filter:invert(1) hue-rotate(180deg)!important;width:100%!important;height:auto!important}
@media(min-width:768px){#notes-screen .notes-top{top:10px!important}#notes-screen .notes-scroll{top:155px!important;bottom:98px!important}#note-detail-screen .notes-detail-header{top:10px!important}#note-detail-screen .note-detail-content{top:74px!important;bottom:8px!important}}

/* LAST LOOP: Notes-only icon refinements, 2026-10-21 */
#notes-screen .notes-more{font-size:initial!important;letter-spacing:normal!important;line-height:normal!important;}
#notes-screen .notes-more svg{width:25px!important;height:25px!important;display:block!important;fill:#f5f5f7!important;stroke:none!important;}
#notes-screen .notes-chevron-down{display:inline-flex!important;align-items:center!important;justify-content:center!important;vertical-align:middle!important;}
#notes-screen .notes-chevron-down svg{width:19px!important;height:19px!important;display:block!important;fill:none!important;stroke:#929298!important;stroke-width:2.6!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
#notes-screen .notes-new svg{width:27px!important;height:27px!important;fill:none!important;stroke:#f5f5f7!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;}


/* LAST LOOP: notes detail HTML dark-mode only */
#note-detail-screen{background:#000!important;color:#f5f5f7!important}
#note-detail-screen .notes-detail-header{position:absolute!important;top:calc(env(safe-area-inset-top,0px) + 10px)!important;left:16px!important;right:16px!important;height:48px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;z-index:8!important}
#note-detail-screen .note-detail-back,#note-detail-screen .note-detail-undo,#note-detail-screen .note-detail-action-pill,#note-detail-screen .note-detail-tools,#note-detail-screen .note-detail-new{background:#242426!important;border:1px solid #3a3a3c!important;color:#fff!important;box-shadow:none!important}
#note-detail-screen .note-detail-back,#note-detail-screen .note-detail-undo{width:44px!important;height:44px!important;border-radius:50%!important;display:grid!important;place-items:center!important;padding:10px!important}
#note-detail-screen svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
#note-detail-screen .notes-detail-actions{display:flex;align-items:center;gap:10px}
#note-detail-screen .note-detail-action-pill{height:44px;min-width:98px;border-radius:24px;display:flex;align-items:center;justify-content:space-around;padding:0 10px}
#note-detail-screen .note-detail-action-pill button{border:0!important;background:transparent!important;color:#fff!important;padding:0 4px!important;min-width:30px!important;height:40px!important;display:grid!important;place-items:center!important}
#note-detail-screen .notes-detail-more{font-size:22px!important;line-height:1!important;letter-spacing:2px!important}
#note-detail-screen .note-detail-content{position:absolute!important;top:calc(env(safe-area-inset-top,0px) + 70px)!important;bottom:calc(env(safe-area-inset-bottom,0px) + 92px)!important;left:0!important;right:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;padding:0 24px 30px!important;background:#000!important}
#note-detail-screen .note-detail-date{font-size:13px;line-height:1.5;text-align:center;color:#8e8e93;margin:0 0 14px}
#note-detail-screen .note-detail-heading{font-size:25px;line-height:1.3;letter-spacing:-.5px;font-weight:700;margin:0 0 22px;color:#f5f5f7}
#note-detail-screen .note-detail-body{font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:#dedee1}
#note-detail-screen .note-detail-toolbar{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:24px;right:24px;height:50px;display:flex;justify-content:space-between;align-items:center;z-index:8;pointer-events:none}
#note-detail-screen .note-detail-tools{display:flex;gap:20px;align-items:center;justify-content:space-around;border-radius:30px;height:48px;padding:0 16px}
#note-detail-screen .note-detail-tools span{display:grid;place-items:center}
#note-detail-screen .note-detail-new{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:10px;pointer-events:auto}
#note-detail-screen .note-detail-toolbar svg{width:23px;height:23px}
@media(min-width:768px){#note-detail-screen .notes-detail-header{top:10px!important}#note-detail-screen .note-detail-content{top:70px!important;bottom:90px!important}#note-detail-screen .note-detail-toolbar{bottom:14px!important}}

/* Detail header icon refinement — only the Notes detail screen */
#note-detail-screen .note-detail-undo { padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; }
#note-detail-screen .note-detail-undo svg { width:23px!important; height:23px!important; display:block!important; transform:translate(0, -1px); }
#note-detail-screen .note-detail-share svg { width:24px!important; height:24px!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; }

/* LAST LOOP: native HTML dark Messages inbox. Only message list. */
#message-list-screen {background:#000 !important;color:#fff !important;overflow:hidden !important;}
#message-list-screen .inbox-native-top {position:absolute;top:calc(env(safe-area-inset-top, 0px) + 48px);left:4.2%;right:4.2%;z-index:4;}
#message-list-screen .inbox-native-controls {display:flex;align-items:center;justify-content:space-between;}
#message-list-screen .inbox-back-touch {position:static !important;width:auto !important;height:44px !important;min-width:68px;padding:0 17px;border:1px solid #3b3b3e !important;border-radius:28px;background:#242426 !important;color:#fff;font-size:16px;font-weight:600;}
#message-list-screen .inbox-filter-btn,#message-list-screen .inbox-compose-btn {display:grid;place-items:center;flex:none;border:1px solid #3b3b3e;border-radius:50%;background:#242426;color:#fff;width:46px;height:46px;padding:12px;}
#message-list-screen .inbox-filter-btn svg,#message-list-screen .inbox-compose-btn svg {width:100%;height:100%;}
#message-list-screen .inbox-native-top h1 {font-size:36px;line-height:1.1;letter-spacing:-1.3px;margin:22px 0 12px;font-weight:750;}
#message-list-screen .inbox-scroll-area {position:absolute !important;top:calc(env(safe-area-inset-top, 0px) + 171px) !important;bottom:calc(env(safe-area-inset-bottom, 0px) + 76px) !important;left:0 !important;width:100% !important;padding:0 4.2% !important;overflow:auto !important;z-index:3;}
#message-list-screen .inbox-hitbox-layer {height:auto !important;min-height:100% !important;position:relative;}
#message-list-screen .inbox-native-row {display:flex;align-items:center;width:100%;min-height:78px;position:relative;padding:9px 0;border:0;background:transparent;color:#fff;text-align:left;gap:10px;}
#message-list-screen .inbox-native-row:not(:last-child)::after {content:"";position:absolute;left:74px;right:0;bottom:0;border-bottom:1px solid #29292b;}
#message-list-screen .inbox-unread {width:9px;height:9px;background:#0a84ff;border-radius:50%;flex:none;}
#message-list-screen .inbox-unread.is-hidden {background:transparent;}
#message-list-screen .inbox-avatar {width:48px;height:48px;flex:none;border-radius:50%;background:linear-gradient(150deg,#666276,#3e3b53);display:grid;place-items:center;overflow:hidden;}
#message-list-screen .inbox-avatar svg {width:43px;height:43px;transform:translateY(5px);}
#message-list-screen .inbox-row-body {display:block;flex:1;min-width:0;}
#message-list-screen .inbox-row-heading {display:flex;align-items:baseline;justify-content:space-between;gap:6px;}
#message-list-screen .inbox-row-heading strong {font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#message-list-screen .inbox-row-time {color:#8e8e93;font-size:12px;white-space:nowrap;flex:none;}
#message-list-screen .inbox-row-preview {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line;line-height:1.3;color:#939398;font-size:13px;margin-top:2px;}
#message-list-screen .inbox-row-arrow {color:#55555a;font-size:30px;line-height:1;flex:none;}
#message-list-screen .inbox-bottom-bar {position:absolute;left:4.2%;right:4.2%;bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);height:51px;display:flex;gap:12px;align-items:center;z-index:8;}
#message-list-screen .inbox-search-pill {height:51px;min-width:0;flex:1;display:flex;align-items:center;gap:10px;padding:0 15px;background:rgba(48,48,51,.85);border:1px solid #525256;border-radius:30px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
#message-list-screen .inbox-search-pill svg {width:21px;height:21px;flex:none;color:#c8c8cc;}
#message-list-screen .inbox-search-pill .inbox-mic {width:18px;height:18px;}
#message-list-screen .inbox-search-pill input {width:100%;min-width:0;flex:1;background:transparent;border:0;outline:0;color:white;font-size:16px;}
#message-list-screen .inbox-search-pill input::placeholder {color:#8e8e93;opacity:1;}
#message-list-screen .inbox-compose-btn {height:51px;width:51px;padding:13px;}
@media (min-width:768px) {#message-list-screen .inbox-native-top {top:10%;}#message-list-screen .inbox-scroll-area {top:27% !important;bottom:12% !important;}#message-list-screen .inbox-bottom-bar {bottom:7%;}}

/* LAST LOOP: iPhone Messages list alignment and profile silhouette */
#message-list-screen .inbox-native-top {top:calc(env(safe-area-inset-top, 0px) + 8px) !important;}
#message-list-screen .inbox-native-top h1 {margin-top:19px !important;margin-bottom:7px !important;}
#message-list-screen .inbox-scroll-area {top:calc(env(safe-area-inset-top, 0px) + 119px) !important;}
#message-list-screen .inbox-native-row {min-height:75px !important;gap:10px !important;}
#message-list-screen .inbox-avatar {width:48px !important;height:48px !important;background:transparent !important;}
#message-list-screen .inbox-avatar svg {display:block;width:100% !important;height:100% !important;transform:none !important;}
#message-list-screen .inbox-row-arrow {font-size:25px !important;font-weight:300;}
#message-list-screen .inbox-native-row:not(:last-child)::after {left:73px !important;}
#message-list-screen .inbox-unread.is-hidden {visibility:hidden;}
@media(min-width:768px){#message-list-screen .inbox-native-top {top:10% !important;}#message-list-screen .inbox-scroll-area {top:27% !important;}}
/* Incoming Messages banner: translucent dark mode */
#sohee-notification {background:rgba(45,45,49,.78) !important;color:#fff !important;border:1px solid rgba(255,255,255,.16) !important;-webkit-backdrop-filter:blur(24px) saturate(125%) !important;backdrop-filter:blur(24px) saturate(125%) !important;box-shadow:0 8px 28px rgba(0,0,0,.3) !important;}
#sohee-notification .sohee-notification-heading strong,#sohee-notification .sohee-notification-content small {color:#fff !important;}
#sohee-notification .sohee-notification-when {color:#c1c1c7 !important;}

/* Message screens only: hide the simulated white home bar.
   Safari's actual bottom bar is controlled by iOS and is untouched. */
.device:has(#message-list-screen:not([hidden])) .game > .home-indicator,
.device:has(#message-screen:not([hidden])) .game > .home-indicator {
  display: none !important;
}
/* Use the exact same silhouette SVG in the incoming banner as in the inbox. */
#sohee-notification .sohee-notification-avatar {
  display:block; width:100%; height:100%; border-radius:50%;
}
/* No white outline around the green Messages badge. */
#sohee-notification .sohee-notification-app-badge {
  box-shadow:none !important; border:0 !important; outline:0 !important;
}

/* Sohee banner: near-black translucent glass, understated on black app screens */
#sohee-notification {
 background:rgba(22,22,25,.89) !important;
 border:1px solid rgba(255,255,255,.09) !important;
 -webkit-backdrop-filter:blur(28px) saturate(110%) !important;
 backdrop-filter:blur(28px) saturate(110%) !important;
 box-shadow:0 12px 28px rgba(0,0,0,.45) !important;
}

/* 메시지 전용: 흰 홈 바는 숨기고 같은 위치 터치는 활성화 */
#message-list-screen .message-invisible-home-touch,
#message-screen .message-invisible-home-touch {
  position:absolute; left:30%; bottom:0; width:40%; height:22px;
  border:0; padding:0; background:transparent; opacity:0;
  z-index:35; cursor:pointer; -webkit-tap-highlight-color:transparent;
}


/* LAST LOOP — iOS dark Messages conversation (reference image) */
#message-screen{background:#000!important;color:#fff!important;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif!important}
#message-screen .message-header{height:145px!important;top:0!important;padding:52px 16px 10px!important;background:#000!important;border:0!important;align-items:flex-start!important;justify-content:space-between!important}
#message-screen .back-touch{display:flex;align-items:center;gap:7px;background:#232326!important;border:1px solid #343437!important;border-radius:30px!important;padding:7px 11px!important;color:white!important;font-size:16px!important;min-height:43px}
#message-screen .ios-back-chevron{font-size:34px;line-height:25px;font-weight:300}
#message-screen .ios-back-count{background:#f5f5f7;color:#242426;border-radius:20px;padding:2px 9px;font-weight:600}
#message-screen .message-header-person{position:absolute;left:50%;top:51px;transform:translateX(-50%);gap:0!important;color:#fff!important}
#message-screen .mini-avatar{height:62px!important;width:62px!important;background:linear-gradient(150deg,#635a75,#332e49)!important;font-size:33px!important;font-weight:600!important;border-radius:50%!important}
#message-screen .message-header-person strong{background:#242426;border:1px solid #363638;border-radius:25px;padding:5px 14px;font-size:15px;font-weight:600;white-space:nowrap;margin-top:-2px}
#message-screen .message-header-person strong:after{content:" ›";color:#8b8b90}
#message-screen .message-header-end{width:43px;height:43px;background:#232326;border:1px solid #343437;border-radius:50%;display:grid;place-items:center;color:#fff!important}
#message-screen .message-header-end svg{width:28px;height:25px}
#message-screen .message-scroll{top:145px!important;bottom:76px!important;background:#000!important;color:#fff!important;padding:5px 16px 20px!important}
#message-screen .message-date{color:#89898f!important;font-size:12px!important;font-weight:500!important;margin:24px 0 13px!important}
#message-screen .message-row{margin:3px 0!important}
#message-screen .message-row.same-speaker{margin-top:3px!important}
#message-screen .message-row:not(.same-speaker){margin-top:11px!important}
#message-screen .message-bubble{font-size:16px!important;line-height:1.3!important;padding:10px 13px!important;border-radius:19px!important;max-width:78%!important}
#message-screen .message-row.sent .message-bubble{background:#2297fa!important;color:white!important;border-bottom-right-radius:6px!important}
#message-screen .message-row.received .message-bubble{background:#29292b!important;color:#fff!important;border-bottom-left-radius:6px!important}
#message-screen .message-compose{bottom:13px!important;height:53px!important;background:#000!important;padding:0 15px!important;gap:11px!important}
#message-screen .compose-plus{background:#343438!important;color:#eee!important;width:39px!important;height:39px!important;font-size:29px!important}
#message-screen .message-compose input{background:#222225!important;border:1px solid #454549!important;color:#aaa!important;height:42px!important;border-radius:24px!important}
#message-screen .message-compose button{display:none!important}
#message-screen .message-service-label{color:#85858b;text-align:center;font-size:12px;padding:7px 0 0}


/* v2: Compact, responsive iOS Messages layout; preserve scroll and safe areas */
#message-screen .message-header{
  height:clamp(106px, 15.3%, 128px)!important;
  padding:clamp(29px, 5.3%, 42px) 14px 6px!important;
}
#message-screen .message-header-person{
  top:clamp(29px, 5.3%, 42px)!important;
}
#message-screen .mini-avatar{
  width:clamp(48px, 7.1vh, 60px)!important;
  height:clamp(48px, 7.1vh, 60px)!important;
  font-size:clamp(26px, 4vh, 33px)!important;
}
#message-screen .message-scroll{
  top:clamp(106px, 15.3%, 128px)!important;
  bottom:calc(64px + env(safe-area-inset-bottom, 0px))!important;
  padding:6px 14px 16px!important;
}
#message-screen .message-compose{
  bottom:calc(6px + env(safe-area-inset-bottom, 0px))!important;
  height:54px!important;
  padding:0 12px!important;
  gap:9px!important;
}
#message-screen .message-compose input{
  font-size:16px!important;
  min-width:0!important;
  flex:1 1 auto!important;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
}
#message-screen .message-compose input:focus{
  border-color:#77777d!important;
}
#message-screen .message-compose button{
  display:grid!important;
  place-items:center;
  flex:0 0 30px;
  height:30px!important;
  width:30px!important;
  background:#2297fa!important;
  color:white!important;
  font-size:20px!important;
}
#message-screen .message-compose button:disabled{
  display:none!important;
}
@media(max-height:650px){
  #message-screen .message-header{height:102px!important;padding-top:25px!important}
  #message-screen .message-header-person{top:25px!important}
  #message-screen .mini-avatar{width:46px!important;height:46px!important}
  #message-screen .message-scroll{top:102px!important}
}


/* iOS Messages proportions: align to real iPhone screenshot, mobile responsive */
@media (max-width: 767px) {
  #message-screen { width:100% !important; height:100% !important; }
  /* Header starts under the real device status bar, not halfway down. */
  #message-screen .message-header {
    top:0 !important;
    height:calc(env(safe-area-inset-top, 0px) + 104px) !important;
    padding:calc(env(safe-area-inset-top, 0px) + 7px) 16px 0 !important;
    align-items:flex-start !important;
  }
  #message-screen .message-header-person {
    top:calc(env(safe-area-inset-top, 0px) + 7px) !important;
    transform:translateX(-50%) !important;
  }
  #message-screen .mini-avatar {
    width:60px !important; height:60px !important;
    font-size:32px !important;
  }
  #message-screen .message-header-person strong {
    font-size:14px !important; padding:4px 12px !important;
  }
  #message-screen .back-touch {
    min-height:43px !important;
    padding:6px 11px !important;
    font-size:15px !important;
  }
  #message-screen .message-header-end {width:43px !important;height:43px !important;}
  #message-screen .message-scroll {
    top:calc(env(safe-area-inset-top, 0px) + 104px) !important;
    bottom:calc(66px + env(safe-area-inset-bottom, 0px)) !important;
    padding:8px 16px 18px !important;
  }
  #message-screen .message-bubble {
    font-size:14px !important;
    line-height:1.32 !important;
    padding:8px 12px !important;
    border-radius:18px !important;
    max-width:82% !important;
    overflow-wrap:break-word !important;
    word-break:keep-all !important;
  }
  #message-screen .message-row {margin:2px 0 !important;}
  #message-screen .message-row.same-speaker {margin-top:3px !important;}
  #message-screen .message-row:not(.same-speaker) {margin-top:10px !important;}
  #message-screen .message-date {font-size:12px !important;margin:22px 0 14px !important;}
  #message-screen .message-compose {
    bottom:calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    padding:0 16px !important;
    height:50px !important;
    gap:10px !important;
  }
  #message-screen .compose-plus {width:36px !important;height:36px !important;font-size:27px !important;flex-shrink:0;}
  #message-screen .message-compose input {height:40px !important;font-size:16px !important;}
}
@media (max-width: 360px) {
  #message-screen .message-bubble {font-size:13.5px !important;padding:8px 10px !important;max-width:86% !important;}
  #message-screen .message-scroll {padding-left:12px !important;padding-right:12px !important;}
}
@media (max-height: 650px) and (max-width: 767px) {
  #message-screen .message-header {height:calc(env(safe-area-inset-top, 0px) + 91px) !important;}
  #message-screen .message-scroll {top:calc(env(safe-area-inset-top, 0px) + 91px) !important;}
  #message-screen .mini-avatar {width:49px !important;height:49px !important;font-size:27px !important;}
}

/* 2026-10-22: only horizontal conversation margins, no typography/header changes */
#message-screen .message-scroll {
  padding-left: 7px !important;
  padding-right: 7px !important;
}
#message-screen .message-bubble {
  max-width: min(90%, 520px) !important;
}
#message-screen .message-compose {
  padding-left: 7px !important;
  padding-right: 7px !important;
}
@media (max-width: 360px) {
  #message-screen .message-scroll {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* Small header alignment adjustment requested against iPhone reference */
@media (max-width:767px) {
  #message-screen .back-touch { transform:translateY(-6px) !important; }
}

/* 2026-10-22: center the chevron and 386 as a single group in the gray pill. */
#message-screen .back-touch {
  transform:none !important;
  display:grid !important;
  grid-template-columns:28px auto !important;
  align-items:center !important;
  justify-content:center !important;
  justify-items:center !important;
  column-gap:4px !important;
  box-sizing:border-box !important;
  width:102px !important;
  min-width:102px !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 10px !important;
  margin:0 !important;
  line-height:1 !important;
}
#message-screen .back-touch .ios-back-chevron {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:28px !important;
  height:32px !important;
  font-size:32px !important;
  font-weight:300 !important;
  line-height:1 !important;
  padding:0 0 4px !important;
  margin:0 !important;
}
#message-screen .back-touch .ios-back-count {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:27px !important;
  min-width:47px !important;
  padding:0 7px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  line-height:1 !important;
  font-size:16px !important;
}

/* Unread badge: iOS-style centered capsule and scalable chevron */
#message-screen .back-touch {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  width:auto !important;
  min-width:102px !important;
  height:51px !important;
  min-height:51px !important;
  padding:0 15px !important;
  border-radius:30px !important;
  background:linear-gradient(180deg,#303033 0%,#202023 100%) !important;
  border:1px solid #414146 !important;
  box-shadow:inset 0 1px 1px #55555a,0 2px 3px #0005 !important;
  transform:none !important;
}
#message-screen .back-touch .ios-back-chevron {
  width:21px !important;
  height:29px !important;
  display:block !important;
  flex:none !important;
  padding:0 !important;
  margin:0 !important;
}
#message-screen .back-touch .ios-back-count {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:28px !important;
  min-width:39px !important;
  padding:0 9px !important;
  margin:0 !important;
  border-radius:18px !important;
  background:#f5f5f7 !important;
  color:#222225 !important;
  font-size:17px !important;
  font-weight:600 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}
#message-screen .back-touch .ios-back-count[hidden] {display:none !important;}

/* Saved contacts show a name initial; unknown senders show the iOS silhouette. */
#message-screen .mini-avatar.unsaved-contact-avatar {
  background: #514b63 !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}
#message-screen .mini-avatar.unsaved-contact-avatar svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#message-list-screen .inbox-avatar.saved-contact-avatar {
  background: linear-gradient(150deg,#635a75,#332e49) !important;
  color: white !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  display: grid !important;
  place-items: center !important;
}
#message-list-screen .inbox-avatar.unsaved-contact-avatar {
  background: #514b63 !important;
}


/* Safari - isolated to prevent changes to other apps */
.safari-screen{background:#f5f5f7;color:#1c1c1e;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,sans-serif}
.safari-screen button{border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.safari-content{position:absolute;inset:59px 0 127px;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 17px 25px}
.safari-content::-webkit-scrollbar{display:none}
.safari-toolbar{position:absolute;bottom:0;left:0;right:0;min-height:127px;padding:8px 14px 24px;background:rgba(248,248,250,.96);border-top:1px solid #dddde2;z-index:20;backdrop-filter:blur(16px)}
.safari-toolbar-actions{display:flex;justify-content:space-around;align-items:center;height:33px}
.safari-toolbar-actions button{font-size:28px;color:#087cff;line-height:1;min-width:40px}
.safari-toolbar-actions button:disabled{color:#b7b7bd}
.safari-address-form{display:flex;align-items:center;gap:7px;background:#e6e6ea;border-radius:13px;padding:8px 10px;height:37px;margin-top:5px}
.safari-address-form span{color:#83838b}.safari-address-form input{background:transparent;border:0;outline:0;min-width:0;flex:1;font-size:13px;color:#1c1c1e}
.safari-address-form button{color:#007aff;font-size:12px;font-weight:600}
.safari-home-button{display:block!important;margin:9px auto 0!important;width:110px;height:9px;padding:0!important}
.safari-home-button span{display:block;background:#222;width:105px;height:4px;border-radius:8px;margin:auto}
.safari-content h1{font-size:31px;letter-spacing:-1px;margin:12px 0 20px}.safari-content h2{font-size:19px;margin:18px 0 10px}.safari-content h3{font-size:17px;margin:0 0 7px}
.safari-muted{font-size:12px;color:#888890}.safari-card{background:white;border-radius:14px;padding:14px;margin:12px 0}.safari-card button{display:block;width:100%;text-align:left;padding:12px 0;border-bottom:1px solid #eee}
.safari-card button:last-child{border-bottom:0}.safari-card button strong{display:block;font-size:14px}.safari-card button small{display:block;font-size:12px;color:#8e8e93;margin-top:4px;line-height:1.5}
.safari-shortcuts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.safari-shortcut{text-align:center!important;font-size:11px!important;border:0!important;padding:5px 0!important}
.safari-shortcut b{display:grid;place-items:center;background:white;border-radius:14px;width:53px;height:53px;margin:0 auto 6px;color:#1675e8;font-size:23px;box-shadow:0 1px 4px #0001}
.safari-topnav{display:flex;align-items:center;justify-content:space-between;margin:6px 0 20px}.safari-topnav button{color:#007aff;font-size:15px}.safari-result{display:block;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid #e1e1e6}.safari-result small{display:block;color:#74747c;font-size:11px;margin-bottom:5px}.safari-result strong{display:block;color:#1656ad;font-size:16px;line-height:1.4}.safari-result p{font-size:13px;color:#56565e;line-height:1.55;margin:6px 0 0}
.safari-website{background:white;margin:-10px -17px -25px;padding:16px 18px;min-height:100%;color:#242429}.safari-site-head{border-bottom:2px solid #1d1d20;padding:5px 0 14px;margin-bottom:22px}.safari-site-head strong{font-size:20px}.safari-website h1{font-size:23px;line-height:1.4;margin:14px 0}.safari-website p{font-size:14px;line-height:1.85;margin:14px 0}.safari-site-meta{font-size:11px;color:#8e8e95}.safari-comment{padding:12px 0;border-bottom:1px solid #e8e8eb;font-size:13px;line-height:1.6}.safari-comment b{display:block;font-size:12px;margin-bottom:4px}.safari-pill{display:inline-block;border-radius:7px;background:#ececf0;padding:5px 8px;color:#666;font-size:11px}.safari-empty{color:#8e8e93;text-align:center;padding:50px 10px;font-size:13px}


/* Safari dark mode — Safari only */
#safari-screen{background:#000;color:#f5f5f7;color-scheme:dark}
#safari-screen .safari-content{background:#000;color:#f5f5f7}
#safari-screen .safari-toolbar{background:rgba(24,24,26,.97);border-top:1px solid #38383a}
#safari-screen .safari-toolbar-actions button{color:#0a84ff;display:grid;place-items:center}
#safari-screen .safari-toolbar-actions button:disabled{color:#55555b}
#safari-screen .safari-toolbar-actions svg{width:23px;height:23px}
#safari-screen .safari-address-form{background:#333336;color:#f5f5f7}
#safari-screen .safari-address-form span{display:flex;color:#a1a1a6}
#safari-screen .safari-address-form span svg{width:17px;height:17px}
#safari-screen .safari-address-form input{color:#fff}
#safari-screen .safari-address-form input::placeholder{color:#99999e}
#safari-screen .safari-address-form button{color:#0a84ff}
#safari-screen .safari-home-button span{background:#fff}
#safari-screen .safari-card{background:#1c1c1e}
#safari-screen .safari-card button{border-bottom-color:#38383a}
#safari-screen .safari-card button small,#safari-screen .safari-muted{color:#98989e}
#safari-screen .safari-shortcut b{background:#252528;color:#0a84ff;box-shadow:none}
#safari-screen .safari-topnav button{color:#0a84ff}
#safari-screen .safari-result{border-bottom-color:#343438}
#safari-screen .safari-result strong{color:#69aaff}
#safari-screen .safari-result small{color:#a1a1a6}
#safari-screen .safari-result p{color:#c0c0c5}
#safari-screen .safari-website{background:#111113;color:#f2f2f4}
#safari-screen .safari-site-head{border-bottom-color:#49494c}
#safari-screen .safari-site-meta{color:#a1a1a6}
#safari-screen .safari-comment{border-bottom-color:#343438}
#safari-screen .safari-pill{background:#29292e;color:#b8b8bf}
#safari-screen .safari-empty{color:#a1a1a6}
#safari-screen .safari-history-group{font-size:12px;font-weight:700;color:#9999a0;margin:21px 0 7px}
#safari-screen .safari-history-entry{display:block;width:100%;text-align:left;padding:11px 2px;border-bottom:1px solid #303035}
#safari-screen .safari-history-entry strong{display:block;font-size:14px;color:#f5f5f7;font-weight:500}
#safari-screen .safari-history-entry small{display:block;margin-top:5px;font-size:11px;color:#898991}
#safari-screen .safari-news-lead{font-size:16px;font-weight:650;line-height:1.7}
#safari-screen .safari-news-divider{border:0;border-top:1px solid #35353a;margin:22px 0}
#safari-screen .safari-history-title{display:flex;justify-content:space-between;align-items:center}
#safari-screen .safari-history-title button{font-size:12px;color:#0a84ff}

/* Safari-only corrections: preserve every other app */
#safari-screen.app-framed::before{background:#000!important;inset:8.2% 0 0!important;border-radius:0!important}
#safari-screen .safari-content{top:8.2%!important;bottom:132px!important;left:0;right:0;padding:10px 17px 28px!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;z-index:2}
#safari-screen .safari-content h1{margin-top:9px}
#safari-screen .safari-shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 26px}
#safari-screen .safari-shortcut{font-size:12px!important}
#safari-screen .safari-shortcut b{width:58px;height:58px;border-radius:15px}
#safari-screen .safari-shortcut b svg{width:28px;height:28px}
#safari-screen .safari-website{min-height:100%;padding-bottom:65px}
#safari-screen .safari-toolbar{z-index:25}
.game:has(#safari-screen:not([hidden])) > .home-indicator{display:none!important}
#safari-screen .safari-home-button{margin-top:10px!important}
#safari-screen .safari-history-list{padding-bottom:30px}

/* Safari ONLY: override the global mobile .app-framed white !important rule.
   Previous ::before fixes could not work because mobile CSS disables ::before. */
#safari-screen.app-framed,
#safari-screen.app-framed.safari-screen {
  background: #000 !important;
  background-image: none !important;
  color: #f5f5f7 !important;
}
#safari-screen.app-framed::before,
#safari-screen.app-framed::after {
  display: none !important;
  content: none !important;
}
/* Put the content directly below the iPhone status bar, no reserved white panel. */
#safari-screen .safari-content {
  top: 52px !important;
  bottom: 132px !important;
  background: #000 !important;
  border: 0 !important;
}
#safari-screen .safari-toolbar {
  border-top: 1px solid #303034 !important;
  box-shadow: none !important;
}

/* Safari only: prevent iOS input-focus auto zoom */
#safari-screen #safari-address { font-size:16px !important; }
/* LAST LOOP / 미리 알림 전용 스타일 — 다른 앱에는 적용되지 않음 */
#reminders-screen{background:#000!important;color:#f7f7f9!important;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;z-index:4}
#reminders-screen *{box-sizing:border-box}
#reminders-screen button{font-family:inherit}
#reminders-screen .reminders-status{position:absolute;top:17px;left:9%;right:8%;height:28px;display:flex;justify-content:space-between;align-items:center;font-size:17px;font-weight:650;z-index:4;pointer-events:none}
#reminders-screen .reminders-scroll{position:absolute;top:20px;bottom:38px;left:0;right:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 16px 95px}
#reminders-screen .reminders-scroll::-webkit-scrollbar{display:none}
#reminders-screen .reminders-header{height:47px;display:flex;align-items:center;justify-content:flex-end;gap:2px;margin:0 0 15px auto;width:max-content;padding:0 4px;background:linear-gradient(#29292b,#1c1c1e);border:1px solid #333337;border-radius:28px}
#reminders-screen .reminders-header-btn{display:grid;place-items:center;width:42px;height:40px;border:0;background:transparent;color:#f5f5f7;font-size:21px;font-weight:650;padding:9px}
#reminders-screen .reminders-header-btn svg{width:25px;height:25px}
#reminders-screen .reminders-dashboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 34px}
#reminders-screen .reminders-tile{border:0;border-radius:16px;padding:13px 12px 10px;height:77px;display:flex;flex-direction:column;justify-content:space-between;color:white;text-align:left;min-width:0}
#reminders-screen .reminders-tile-top{display:flex;justify-content:space-between;align-items:flex-start}
#reminders-screen .reminders-tile svg{width:28px;height:28px;stroke:white;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#reminders-screen .reminders-tile-num{font-size:27px;font-weight:700;line-height:1}
#reminders-screen .reminders-tile-label{font-size:14px;font-weight:650}
#reminders-screen .tile-today{background:linear-gradient(130deg,#7bb4e7,#5d9bdf)}
#reminders-screen .tile-scheduled{background:linear-gradient(130deg,#e1989a,#d6797e)}
#reminders-screen .tile-all{background:linear-gradient(130deg,#5a5a5a,#353535)}
#reminders-screen .tile-flagged{background:linear-gradient(130deg,#efc99e,#e6b37c)}
#reminders-screen .tile-urgent{background:linear-gradient(130deg,#e48eaa,#d46c94)}
#reminders-screen .tile-completed{background:linear-gradient(130deg,#a7b0b5,#8f989e)}
#reminders-screen .reminders-suggestion{min-height:65px;border-radius:23px;background:#1c1c1e;display:flex;align-items:center;gap:14px;padding:12px 14px;margin:0 0 28px}
#reminders-screen .reminders-carrot{width:35px;height:35px;border-radius:50%;background:#5ad165;display:grid;place-items:center;font-size:22px;flex:none}
#reminders-screen .reminders-suggestion-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
#reminders-screen .reminders-suggestion-copy strong{font-size:13px;font-weight:500}
#reminders-screen .reminders-suggestion-copy small{font-size:12px;color:#8e8e93}
#reminders-screen #reminders-grocery-add{border:0;border-radius:50%;width:23px;height:23px;background:#5ad165;color:white;font-size:22px;line-height:20px;padding:0}
#reminders-screen .reminders-list-heading{font-size:22px;letter-spacing:-.6px;margin:0 0 15px 14px;font-weight:750}
#reminders-screen .reminders-lists{background:#1c1c1e;border-radius:24px;padding:2px 16px;margin:0 0 16px}
#reminders-screen .reminders-list-row{width:100%;min-height:61px;background:transparent;border:0;color:#f5f5f7;display:flex;align-items:center;gap:14px;text-align:left;padding:10px 0}
#reminders-screen .reminders-list-row+.reminders-list-row{border-top:1px solid #39393b}
#reminders-screen .reminders-list-icon{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#f4a431;flex:none;font-size:20px;color:white}
#reminders-screen .reminders-list-icon.deleted{background:#35353a;color:#a5a5ab}
#reminders-screen .reminders-list-name{font-size:15px;flex:1;min-width:0}
#reminders-screen .reminders-list-count{color:#a1a1a6;font-size:15px}
#reminders-screen .reminders-chevron{color:#77777c;font-size:27px;font-weight:200;margin-left:2px}
#reminders-screen .reminders-add-button{position:absolute;right:19px;bottom:45px;width:53px;height:53px;border:1px solid #75baff;border-radius:50%;background:#368ef5;color:white;font-size:35px;font-weight:300;display:grid;place-items:center;line-height:1;z-index:7;box-shadow:0 2px 12px #0008}
#reminders-screen .reminders-home-touch{position:absolute;bottom:0;left:25%;width:50%;height:30px;border:0;background:transparent;display:grid;place-items:center;z-index:8}
#reminders-screen .reminders-home-touch span{width:108px;height:4px;border-radius:5px;background:white}
#reminders-screen .reminders-search-wrap{display:flex;gap:8px;margin:0 0 15px}
#reminders-screen .reminders-search-wrap[hidden]{display:none}
#reminders-screen .reminders-search-wrap input{min-width:0;flex:1;border:0;border-radius:10px;background:#252527;color:white;padding:10px;font-size:16px}
#reminders-screen .reminders-search-wrap button{border:0;background:transparent;color:#0a84ff}
#reminders-screen .reminders-items-view{margin-top:15px}
#reminders-screen .reminders-items-view[hidden]{display:none}
#reminders-screen .reminders-view-back{border:0;background:transparent;color:#0a84ff;font-size:15px;padding:0 0 13px}
#reminders-screen .reminders-view-title{font-size:30px;font-weight:750;margin:0 0 18px}
#reminders-screen .reminders-item{display:flex;align-items:center;gap:12px;padding:12px 5px;border-bottom:1px solid #333}
#reminders-screen .reminders-item-check{width:23px;height:23px;border:2px solid #777;border-radius:50%;background:transparent;color:white;flex:none}
#reminders-screen .reminders-item-check.checked{background:#0a84ff;border-color:#0a84ff}
#reminders-screen .reminders-item-info{flex:1;min-width:0}
#reminders-screen .reminders-item-title{font-size:16px;overflow-wrap:anywhere}
#reminders-screen .reminders-item-title.done{text-decoration:line-through;color:#888}
#reminders-screen .reminders-item-detail{font-size:12px;color:#929298;margin-top:4px}
#reminders-screen .reminders-item-delete{border:0;background:transparent;color:#8e8e93;font-size:18px;padding:7px}
#reminders-screen .reminders-empty{color:#8e8e93;text-align:center;padding:50px 0;font-size:14px}
#reminders-screen .reminders-sheet{position:absolute;inset:0;background:#0009;z-index:12;display:flex;align-items:flex-end}
#reminders-screen .reminders-sheet[hidden]{display:none}
#reminders-screen .reminders-sheet-panel{background:#242426;border-radius:20px 20px 0 0;padding:18px 17px 42px;width:100%;min-height:350px}
#reminders-screen .reminders-sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}
#reminders-screen .reminders-sheet-top button{border:0;background:transparent;color:#0a84ff;font-size:15px}
#reminders-screen .reminders-sheet-top strong{font-size:15px}
#reminders-screen #reminders-edit-form{display:flex;flex-direction:column;gap:10px}
#reminders-screen #reminders-edit-title,#reminders-screen #reminders-edit-notes{width:100%;border:0;border-radius:10px;padding:12px;background:#363638;color:white;font-size:16px;resize:none}
#reminders-screen .reminders-edit-row{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;background:#363638;font-size:14px}
#reminders-screen .reminders-edit-row input{background:transparent;color:white;border:0;max-width:160px;font-size:14px;color-scheme:dark}
#reminders-screen .reminders-edit-row input[type=checkbox]{width:19px;height:19px}
/* 다른 화면의 공통 홈 표시와 겹치지 않도록 미리 알림에서만 숨김 */
.game:has(#reminders-screen:not([hidden]))>.home-indicator{display:none!important}

/* Reminders v2: use existing device status bar only; center list glyphs */
#reminders-screen .reminders-list-icon svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
#reminders-screen .reminders-list-icon{display:flex;align-items:center;justify-content:center;padding:0;line-height:1}

/* LAST LOOP - Reminders UI alignment refinements */
#reminders-screen .reminders-header-btn{padding:0;display:flex;align-items:center;justify-content:center;line-height:1;}
#reminders-screen .reminders-header-btn svg{display:block;flex:none;}
#reminders-screen #reminders-more{font-size:21px;letter-spacing:1px;line-height:1;padding-bottom:5px;}
#reminders-screen .reminders-add-button{display:flex;align-items:center;justify-content:center;padding:0 0 5px;font-family:Arial,sans-serif;font-size:35px;line-height:1;}
#reminders-screen .reminders-dashboard{margin-bottom:34px;}

/* LAST LOOP: reminders-only cleanup, no layout changes to other apps */
#reminders-screen .reminders-suggestion{display:none!important;}
#reminders-screen .reminders-add-button{padding:0!important;display:flex;align-items:center;justify-content:center;}
#reminders-screen .reminders-add-button svg{display:block;width:30px;height:30px;flex:none;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;}

/* LAST LOOP — Reminders detail views only */
#reminders-screen.reminders-detail-open .reminders-header{display:none!important}
#reminders-screen.reminders-detail-open .reminders-scroll{top:20px;padding-bottom:110px}
#reminders-screen .reminders-items-view{margin-top:0!important}
#reminders-screen .reminders-view-toolbar{display:flex;align-items:center;justify-content:space-between;height:49px;margin:0 0 16px}
#reminders-screen .reminders-view-back{width:46px;height:46px;display:grid;place-items:center;border:1px solid #333!important;border-radius:50%;background:linear-gradient(#29292b,#1c1c1e)!important;color:#fff!important;padding:0!important}
#reminders-screen .reminders-view-back svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
#reminders-screen .reminders-view-actions{height:46px;display:flex;align-items:center;padding:0 10px;gap:16px;border:1px solid #333;border-radius:26px;background:linear-gradient(#29292b,#1c1c1e)}
#reminders-screen .reminders-view-actions button{width:29px;height:35px;border:0;background:transparent;color:#fff;font-size:22px;display:grid;place-items:center;padding:0}
#reminders-screen .reminders-view-actions svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#reminders-screen .reminders-view-title{font-size:34px!important;letter-spacing:-1px;margin:0 0 25px!important;font-weight:750}
#reminders-screen .reminders-item{align-items:flex-start!important;border-bottom:0!important;padding:10px 1px!important;gap:12px!important;min-height:51px}
#reminders-screen .reminders-item-check{width:22px!important;height:22px!important;margin-top:2px;border:2px solid #56565a!important;border-radius:50%;padding:0;flex:none}
#reminders-screen .reminders-item-check.checked{background:#0a84ff!important;border-color:#0a84ff!important}
#reminders-screen .reminders-item-title{font-size:16px!important;line-height:1.4}
#reminders-screen .reminders-item-detail{font-size:13px!important;color:#939399!important;line-height:1.4;margin-top:3px!important}
#reminders-screen .reminders-static-check{display:block;border-style:dotted!important}
#reminders-screen .reminders-schedule-section{border-bottom:2px solid #272729;padding-bottom:16px;margin-bottom:18px}
#reminders-screen .reminders-schedule-section h2{font-size:23px;font-weight:720;letter-spacing:-.6px;margin:0 0 14px;color:#fff}
#reminders-screen .reminders-schedule-section.reminders-schedule-muted h2{color:#55555a}
#reminders-screen .reminders-schedule-date{font-size:13px;color:#9a9a9e;margin:10px 0 5px}
#reminders-screen .reminders-schedule-today{min-height:45px;display:flex;align-items:flex-start;padding:5px 0 0}
#reminders-screen .reminders-dotted-circle{width:22px;height:22px;border:2px dotted #4b4b50;border-radius:50%}

/* LAST LOOP - Calendar: iOS dark month view (shared status bar is external) */
#calendar-screen{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',Arial,sans-serif;overflow:hidden}
#calendar-screen button{color:inherit;border:0;font-family:inherit}
.calendar-toolbar{position:absolute;top:67px;left:15px;right:15px;height:46px;display:flex;justify-content:space-between;align-items:center;z-index:4}
.calendar-pill{border-radius:40px!important;background:linear-gradient(#323234,#242426)!important;box-shadow:inset 0 1px 1px #ffffff36,0 1px 1px #000;display:flex;align-items:center;justify-content:center}
.calendar-year{height:44px;padding:0 17px;font-size:18px;font-weight:550;gap:8px}.calendar-back-chevron{font-size:38px;font-weight:300;line-height:0;position:relative;top:-3px}
.calendar-tools{height:44px;min-width:157px;justify-content:space-around;padding:0 5px}.calendar-tools button,.calendar-bottom-right button{background:transparent;width:44px;height:42px;display:grid;place-items:center;padding:9px}.calendar-tools svg,.calendar-bottom-right svg{width:27px;height:27px;fill:none;stroke:#f7f7f7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.calendar-tools #calendar-mode svg{width:25px;stroke-width:1.5}
.calendar-current-month{position:absolute;top:122px;left:19px;font-size:34px;line-height:1.15;letter-spacing:-1px;margin:0;font-weight:750;z-index:2}
.calendar-weekdays{position:absolute;top:174px;left:0;right:0;height:27px;display:grid;grid-template-columns:repeat(7,1fr);align-items:center;border-bottom:1px solid #333;z-index:3;background:#000}.calendar-weekdays span{text-align:center;font-size:11px;font-weight:600;color:#d8d8dc}.calendar-weekdays span:first-child,.calendar-weekdays span:last-child{color:#929297}
.calendar-month-scroll{position:absolute;top:201px;bottom:66px;left:0;right:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}.calendar-month-scroll::-webkit-scrollbar{display:none}
.calendar-month-name{height:36px;padding:11px 18px 4px;color:#ff453a;font-size:21px;font-weight:700;border-bottom:1px solid #313134}
.calendar-week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:73px}
.calendar-day{position:relative;background:#000;text-align:center;display:flex;align-items:center;flex-direction:column;gap:16px;padding:11px 0 0;border-bottom:1px solid #303034!important;border-radius:0;min-width:0}
.calendar-day-number{font-size:21px;line-height:29px;font-weight:550;min-width:31px;height:31px;display:grid;place-items:center;border-radius:50%}
.calendar-day.calendar-weekend .calendar-day-number{color:#8e8e93}.calendar-day.calendar-outside .calendar-day-number{color:#77777b}
.calendar-day.calendar-is-today .calendar-day-number{background:#ff453a;color:#fff;font-weight:750}
.calendar-day.calendar-selected:not(.calendar-is-today) .calendar-day-number{background:#454548;color:#fff}
.calendar-day-dots{display:flex;justify-content:center;gap:2px;min-height:5px}.calendar-dot{width:5px;height:5px;border-radius:50%;background:#ff9f0a}.calendar-dot.green{background:#30b27e}
.calendar-bottom{position:absolute;bottom:21px;left:20px;right:20px;display:flex;justify-content:space-between;z-index:5;pointer-events:none}.calendar-bottom button,.calendar-bottom .calendar-pill{pointer-events:auto}.calendar-bottom>#calendar-today{height:45px;padding:0 17px;font-size:17px;font-weight:600}.calendar-bottom-right{height:45px;min-width:104px;gap:3px}
.calendar-agenda{position:absolute;left:0;right:0;bottom:65px;max-height:40%;overflow:auto;background:#111114;border-top:1px solid #48484a;z-index:4;padding:13px 19px 18px;box-shadow:0 -12px 25px #0009}.calendar-agenda-heading{display:flex;align-items:center;gap:12px;font-size:16px}.calendar-agenda-heading button{background:transparent;font-size:28px}.calendar-no-events{color:#98989f;text-align:center;padding:18px 0;font-size:14px}.calendar-agenda-event{display:flex;gap:12px;align-items:center;padding:12px 4px;border-bottom:1px solid #333}.calendar-agenda-event>span{height:32px;width:4px;background:#ff9f0a;border-radius:3px}.calendar-agenda-event small{display:block;color:#999;margin-top:4px}
.calendar-year-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:15px}.calendar-year-grid button{background:#1c1c1e;padding:20px 5px;border-radius:10px;font-size:21px;font-weight:650}.calendar-year-grid span{display:block;font-size:10px;color:#999;margin-top:8px}
.calendar-overlay{position:absolute;inset:0;background:#000a;z-index:8;display:grid;place-items:center;padding:22px}.calendar-dialog{width:100%;background:#29292b;border-radius:17px;padding:18px;color:#fff}.calendar-dialog h2{font-size:20px;margin:0 0 15px}.calendar-dialog input{width:100%;background:#3b3b3e;border:0;border-radius:8px;padding:12px;margin:0 0 10px;color:#fff}.calendar-dialog button{background:#48484b;border-radius:8px;padding:10px 16px;margin-top:8px}.calendar-form-buttons{display:flex;justify-content:flex-end;gap:8px}

/* LAST LOOP: iOS-style compact year overview */
#calendar-screen.calendar-year-mode .calendar-toolbar{top:67px}
#calendar-screen.calendar-year-mode #calendar-year{visibility:hidden;pointer-events:none}
#calendar-screen.calendar-year-mode #calendar-mode{display:none}
#calendar-screen.calendar-year-mode .calendar-tools{min-width:104px}
#calendar-screen.calendar-year-mode .calendar-current-month{display:none}
#calendar-screen.calendar-year-mode .calendar-weekdays{display:none}
#calendar-screen.calendar-year-mode .calendar-month-scroll{top:117px;bottom:66px}
#calendar-screen .calendar-year-section{padding:0 18px 32px}
#calendar-screen .calendar-year-section>h2{font-size:31px;line-height:1.2;color:#ff5657;font-weight:750;text-align:center;margin:0 0 18px}
#calendar-screen .calendar-year-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px;row-gap:32px;padding:0}
#calendar-screen .calendar-mini-month{background:transparent;border:0;border-radius:0;padding:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;min-width:0;gap:9px}
#calendar-screen .calendar-mini-month>strong{font-size:19px;line-height:24px;font-weight:750;color:#f5f5f7}
#calendar-screen .calendar-mini-month>strong.calendar-mini-current{color:#ff5657}
#calendar-screen .calendar-mini-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:19px;align-items:center;justify-items:center;width:100%}
#calendar-screen .calendar-mini-day{display:grid;place-items:center;width:18px;height:18px;line-height:18px;font-size:10px;font-weight:450;color:#f6f6f6;font-variant-numeric:tabular-nums}
#calendar-screen .calendar-mini-today{background:#ff5657;color:#fff;border-radius:50%;font-weight:750}
#calendar-screen .calendar-mini-blank{width:100%;height:100%}
#calendar-screen.calendar-year-mode .calendar-bottom{bottom:21px}

/* LAST LOOP: 2026 공휴일과 미리 알림 캘린더 연동 */
#calendar-screen .calendar-day.calendar-red-day:not(.calendar-is-today):not(.calendar-selected) .calendar-day-number{color:#ff555a}
#calendar-screen .calendar-day.calendar-red-day.calendar-outside:not(.calendar-is-today) .calendar-day-number{color:#a8474c}
#calendar-screen .calendar-mini-day.calendar-mini-red:not(.calendar-mini-today){color:#ff5657}
#calendar-screen .calendar-mini-day.calendar-mini-reminder:not(.calendar-mini-today){position:relative}
#calendar-screen .calendar-mini-day.calendar-mini-reminder:not(.calendar-mini-today)::after{content:'';position:absolute;width:3px;height:3px;border-radius:50%;background:#ff9f0a;bottom:-2px;left:50%;transform:translateX(-50%)}
#calendar-screen .calendar-mini-day.calendar-mini-today{color:#fff}
#calendar-screen .calendar-agenda-event.calendar-holiday-event>span{background:#ff453a}

/* Calendar: keep native date input inside the new-event dialog */
#calendar-screen .calendar-dialog,
#calendar-screen .calendar-dialog form { min-width:0; max-width:100%; box-sizing:border-box; }
#calendar-screen .calendar-dialog input { display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; }
#calendar-screen .calendar-dialog input[type="date"] { appearance:none; -webkit-appearance:none; min-height:46px; padding:10px 12px; color-scheme:dark; }
#calendar-screen .calendar-dialog input[type="date"]::-webkit-date-and-time-value { min-width:0; text-align:left; }

/* LAST LOOP calendar: iOS-like neutral date numbers and full day schedule */
#calendar-screen .calendar-day.calendar-red-day .calendar-day-number,
#calendar-screen .calendar-day.calendar-red-day.calendar-outside .calendar-day-number {color:#fff}
#calendar-screen .calendar-day.calendar-weekend .calendar-day-number,
#calendar-screen .calendar-day.calendar-outside .calendar-day-number {color:#8e8e93}
#calendar-screen .calendar-day.calendar-is-today .calendar-day-number {background:#ff453a;color:#fff}
#calendar-screen .calendar-day.calendar-selected:not(.calendar-is-today) .calendar-day-number {background:#fff;color:#000}
#calendar-screen .calendar-mini-day.calendar-mini-red:not(.calendar-mini-today) {color:#f6f6f6}
#calendar-screen .calendar-dot.holiday {background:#bf65ce}
#calendar-screen.calendar-day-mode .calendar-current-month,
#calendar-screen.calendar-day-mode .calendar-weekdays,
#calendar-screen.calendar-day-mode .calendar-month-scroll {display:none!important}
#calendar-screen.calendar-day-mode .calendar-agenda {display:block!important;position:absolute;top:162px;bottom:65px;left:0;right:0;max-height:none;overflow-y:auto;overflow-x:hidden;background:#000;box-shadow:none;border:0;padding:0;z-index:3;scrollbar-width:none}
#calendar-screen .calendar-day-strip {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));height:82px;border-bottom:1px solid #333;position:sticky;top:0;background:#000;z-index:2}
#calendar-screen .calendar-day-strip-date {display:flex;flex-direction:column;align-items:center;gap:9px;justify-content:flex-start;background:transparent;padding:7px 0 0}
#calendar-screen .calendar-day-strip-date small {font-size:11px;color:#d8d8dc}
#calendar-screen .calendar-day-strip-date:first-child small,
#calendar-screen .calendar-day-strip-date:last-child small {color:#8e8e93}
#calendar-screen .calendar-day-strip-date span {font-size:21px;font-weight:550;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#fff}
#calendar-screen .calendar-day-strip-date:first-child span,
#calendar-screen .calendar-day-strip-date:last-child span {color:#8e8e93}
#calendar-screen .calendar-day-strip-date.active span {background:#fff;color:#000}
#calendar-screen .calendar-day-strip-date.today:not(.active) span {background:#ff453a;color:#fff}
#calendar-screen .calendar-day-heading {font-size:17px;font-weight:700;text-align:center;padding:12px 5px 10px}
#calendar-screen .calendar-all-day {display:grid;grid-template-columns:73px minmax(0,1fr);align-items:center;gap:5px;padding:3px 12px 4px 0;border-bottom:1px solid #333;min-height:47px}
#calendar-screen .calendar-all-day>span {text-align:right;font-size:12px;line-height:1.15;color:#8e8e93;padding-right:6px}
#calendar-screen .calendar-all-day-events {display:flex;gap:3px;flex-wrap:wrap;min-width:0}
#calendar-screen .calendar-day-event {min-width:0;max-width:100%;flex:1 1 auto;background:#194734;color:#30b77b;border-radius:20px;padding:6px 10px;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#calendar-screen .calendar-day-event.holiday {background:#402342;color:#d179d7}
#calendar-screen .calendar-day-event.reminder {background:#493015;color:#ffab37}
#calendar-screen .calendar-hours {padding:8px 0 30px}
#calendar-screen .calendar-hour-row {display:grid;grid-template-columns:73px minmax(0,1fr);height:44px;align-items:start;gap:4px}
#calendar-screen .calendar-hour-row>span {font-size:12px;color:#8e8e93;text-align:right;padding-right:5px;transform:translateY(-7px)}
#calendar-screen .calendar-hour-row>div {border-top:1px solid #303034;height:100%}
#calendar-screen.calendar-day-mode .calendar-bottom {z-index:5}


/* ===== FaceTime: independent app styles ===== */
#facetime-screen{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Arial,sans-serif}
#facetime-screen button{color:inherit;border:0;font:inherit;-webkit-tap-highlight-color:transparent}
.ft-header{position:absolute;top:49px;left:15px;right:15px;height:48px;display:flex;align-items:center;justify-content:space-between;z-index:12}
.ft-header h1{position:absolute;left:50%;transform:translateX(-50%);font-size:19px;font-weight:600;margin:0;white-space:nowrap}
.ft-pill{height:43px;background:linear-gradient(180deg,#343436,#222224);border:1px solid #49494c!important;box-shadow:inset 0 1px 1px #ffffff15;border-radius:30px;font-weight:550!important}
.ft-edit{padding:0 17px;font-size:16px!important}
.ft-filter-toggle{width:43px;display:grid;place-items:center}
.ft-filter-toggle svg{width:27px;height:27px}
.ft-scroll{position:absolute;top:105px;bottom:75px;left:0;right:0;overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 15px 95px}
.ft-scroll::-webkit-scrollbar{display:none}
.ft-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ft-card{position:relative;height:244px;border-radius:34px;background:#1d1d1f;overflow:hidden;text-align:left;min-width:0}
.ft-card.ft-card-photo{background:#191b1e}
.ft-card-name{position:absolute;top:17px;left:16px;right:12px;font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-card-name.missed{color:#ff453a}
.ft-avatar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:106px;height:106px;border-radius:50%;background:linear-gradient(160deg,#605c70,#302642);display:grid;place-items:center;color:white;font-size:48px;font-weight:600;letter-spacing:-3px;overflow:hidden}
.ft-avatar img{width:100%;height:100%;object-fit:cover}
.ft-card-bottom{position:absolute;left:16px;bottom:16px;font-size:13px;line-height:1.25}
.ft-card-bottom small{display:block;font-size:13px}
.ft-card-video{position:absolute;right:11px;bottom:13px;width:45px;height:45px;border-radius:50%;background:#414143!important;display:grid;place-items:center}
.ft-card-video svg{width:25px;height:25px}
.ft-new-call{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);height:48px;padding:0 17px;white-space:nowrap;display:flex;align-items:center;gap:8px;background:#60d466!important;border-radius:40px;font-size:17px!important;font-weight:650!important;z-index:9}
.ft-new-call svg{width:24px;height:24px}
.ft-filter-shade{position:absolute;inset:0;background:#0008;backdrop-filter:blur(5px);z-index:20}
.ft-filter-menu{position:absolute;top:48px;right:14px;width:247px;padding:10px 12px 9px;background:rgba(57,57,61,.94);backdrop-filter:blur(30px);border:1px solid #7775;border-radius:26px;z-index:21;box-shadow:0 15px 40px #0009}
.ft-filter-menu button{width:100%;height:45px;background:transparent;text-align:left;display:flex;align-items:center;gap:12px;font-size:15px!important}
.ft-check{width:13px;text-align:center;font-size:16px}
.ft-menu-symbol{width:22px;font-size:21px;text-align:center;color:#eee}
.ft-menu-divider{height:1px;background:#ffffff23;margin:4px 7px}
.ft-filter-menu .ft-manage{padding-left:26px}
.ft-sheet-backdrop,.ft-call-overlay{position:absolute;inset:0;z-index:30;background:#000b;display:flex;align-items:flex-end}
.ft-sheet{width:100%;padding:22px 20px 38px;border-radius:26px 26px 0 0;background:#242426}
.ft-sheet h2{text-align:center;font-size:20px;margin:0 0 20px}
.ft-sheet input{width:100%;height:42px;border:0;border-radius:12px;background:#3b3b3e;color:white;padding:0 14px;font-size:15px}
#ft-sheet-contacts{max-height:260px;overflow:auto;margin:12px 0}
.ft-sheet-person{display:block;width:100%;padding:12px;text-align:left;background:transparent;border-bottom:1px solid #ffffff1c!important}
#ft-sheet-close{display:block;width:100%;padding:13px;background:#414145!important;border-radius:12px}
.ft-call-overlay{background:linear-gradient(#252034,#09090b);align-items:center;justify-content:center;flex-direction:column}
.ft-call-avatar{width:115px;height:115px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#605c70,#302642);font-size:56px}
.ft-call-overlay h2{font-size:29px;margin:19px 0 5px}
.ft-call-overlay p{color:#c7c7ce}
#ft-call-end{position:absolute;bottom:85px;background:#ff453a!important;padding:16px 35px;border-radius:35px;font-weight:650!important}

/* FaceTime filter menu: iOS-style vector icons and tighter alignment */
.ft-filter-menu{background:rgba(56,56,60,.92);border-color:#ffffff29;box-shadow:0 16px 45px #0008;backdrop-filter:blur(38px);-webkit-backdrop-filter:blur(38px)}
.ft-filter-menu button{gap:11px;letter-spacing:-.3px}
.ft-menu-symbol{display:inline-flex;align-items:center;justify-content:center;flex:0 0 23px;width:23px;height:27px;color:#f5f5f7}
.ft-menu-symbol svg{display:block;width:23px;height:23px}
.ft-check{flex:0 0 13px;width:13px;color:#fff;font-size:16px;font-weight:600}
.ft-filter-menu .ft-manage{padding-left:26px}


/* LAST LOOP — App Store & Settings (독립 스타일) */
.ll-appstore,.ll-settings{background:#000;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif}
.ll-store-top{position:absolute;top:65px;left:20px;right:20px;height:65px;display:flex;align-items:center;justify-content:space-between;z-index:2}
.ll-store-top h1{font-size:32px;letter-spacing:-1px;margin:0}
.ll-store-profile{width:36px;height:36px;border-radius:50%;background:#62616c;display:grid;place-items:center;font-size:16px}
.ll-store-content{position:absolute;top:132px;bottom:90px;left:0;right:0;padding:0 20px 30px;overflow-y:auto;scrollbar-width:none}
.ll-store-date{font-size:12px;color:#8e8e93;font-weight:600;margin:3px 0 14px}
.ll-store-feature{height:300px;background:linear-gradient(150deg,#213d63,#565078 60%,#171b36);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:22px;margin-bottom:24px}
.ll-store-feature-text small{color:#c8c8d3;font-weight:600;font-size:12px}
.ll-store-feature-text h2{font-size:27px;margin:8px 0}
.ll-store-feature-text p{font-size:13px;color:#d4d4e0}
.ll-store-feature-art{text-align:center;font-size:105px;color:#fff8;line-height:1}
.ll-store-section-title{font-size:21px;margin:0 0 10px}
.ll-store-app{display:flex;width:100%;gap:12px;align-items:center;border:0;border-top:1px solid #343438;padding:12px 0;background:none;color:white;text-align:left}
.ll-store-icon{width:55px;height:55px;border-radius:13px;display:grid;place-items:center;font-size:28px;flex-shrink:0;color:white}
.ll-store-app>span:nth-child(2){flex:1;min-width:0}
.ll-store-app strong,.ll-store-app small{display:block}
.ll-store-app strong{font-size:15px}.ll-store-app small{color:#98989f;font-size:12px;margin-top:3px}
.ll-store-app em,.ll-store-get{font-style:normal;background:#2b2b30;color:#0a84ff;border:0;border-radius:20px;padding:7px 17px;font-weight:700;font-size:13px}
.ll-store-tabs{position:absolute;bottom:0;left:0;right:0;height:87px;display:grid;grid-template-columns:repeat(5,1fr);background:#161618eF;border-top:1px solid #363638;padding:10px 3px 23px}
.ll-store-tabs button{background:none;border:0;color:#92929a;font-size:24px;display:flex;flex-direction:column;align-items:center;gap:3px}
.ll-store-tabs button.active{color:#0a84ff}
.ll-store-tabs small{font-size:10px}
.ll-store-search,.ll-settings-search{display:flex;align-items:center;background:#28282b;color:#9c9ca4;border-radius:10px;padding:9px 12px;gap:8px}
.ll-store-search input,.ll-settings-search input{background:none;border:0;outline:none;color:white;min-width:0;width:100%;font-size:15px}
.ll-store-muted{color:#8e8e93;font-size:14px}
.ll-store-return{background:none;border:0;color:#0a84ff;font-size:17px;padding:10px 0}
.ll-store-detail-icon{margin-top:28px}.ll-store-detail-icon .ll-store-icon{width:95px;height:95px;font-size:48px}
.ll-store-get{background:#0a84ff;color:white}
.ll-settings{background:#000}
.ll-settings-nav{position:absolute;top:60px;left:18px;right:18px;height:35px;display:flex;align-items:center;justify-content:space-between;color:#fff;z-index:2}
.ll-settings-nav button{border:0;background:none;color:#0a84ff;font-size:17px;padding:0}
.ll-settings-nav span{font-weight:600;font-size:17px}
.ll-settings-scroll{position:absolute;top:99px;bottom:20px;left:0;right:0;overflow-y:auto;padding:0 16px 30px;scrollbar-width:none}
.ll-settings-scroll h1{font-size:34px;margin:9px 4px 17px;letter-spacing:-1px}
.ll-settings-search{margin:0 0 23px}
.ll-settings-account,.ll-settings-row{display:flex;align-items:center;width:100%;border:0;background:#1c1c1e;color:white;text-align:left}
.ll-settings-account{border-radius:12px;padding:13px 14px;gap:12px;margin-bottom:28px}
.ll-settings-avatar{height:53px;width:53px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#747080,#3b344d);font-size:25px;flex-shrink:0}
.ll-settings-account span:nth-child(2){flex:1}
.ll-settings-account strong,.ll-settings-account small{display:block}
.ll-settings-account strong{font-size:18px}.ll-settings-account small{font-size:12px;color:#a2a2aa;margin-top:4px}
.ll-settings-account b,.ll-settings-chevron{font-size:24px;font-weight:300;color:#6c6c72}
.ll-settings-group{background:#1c1c1e;border-radius:12px;margin-bottom:28px;overflow:hidden}
.ll-settings-row{height:47px;gap:12px;padding:0 13px;position:relative}
.ll-settings-row+.ll-settings-row:before{content:"";position:absolute;left:52px;right:0;top:0;height:1px;background:#343438}
.ll-settings-symbol{height:28px;width:28px;border-radius:7px;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.ll-settings-row-name{font-size:15px;flex:1}
.ll-settings-switch{width:45px;height:26px;border-radius:20px;background:#555;position:relative}
.ll-settings-switch:before{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:white;transition:transform .2s}
.ll-settings-switch.on{background:#34c759}.ll-settings-switch.on:before{transform:translateX(19px)}
.ll-settings-info{padding:18px;font-size:14px;color:#a5a5aa}
.ll-settings-account-detail{text-align:center;padding:30px 0 22px}
.ll-settings-account-detail .ll-settings-avatar{margin:auto;width:84px;height:84px;font-size:36px}
.ll-settings-account-detail h2{margin:12px 0 5px}.ll-settings-account-detail p{color:#999;font-size:13px}

/* App Store icon + photo refresh */
.ll-store-feature{position:relative;isolation:isolate;background:#1b1c28;padding:0;justify-content:flex-start}
.ll-store-feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 37%;z-index:-2}
.ll-store-feature::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.3) 37%,rgba(0,0,0,.05) 72%,rgba(0,0,0,.32) 100%);z-index:-1}
.ll-store-feature-text{padding:22px 20px;text-shadow:0 1px 6px #0009}
.ll-store-feature-text small,.ll-store-feature-text p{color:#f3f3f6}
.ll-store-feature-art{display:none}
.ll-store-icon{overflow:hidden;background:transparent;border-radius:13px}
.ll-store-icon svg{width:100%;height:100%;display:block}
.ll-store-tabs button{font-size:initial;gap:5px;justify-content:center}
.ll-store-tab-icon{width:25px;height:25px;flex-shrink:0}
.ll-store-tabs small{font-size:10px;line-height:1.2}
.ll-store-detail-icon .ll-store-icon{width:95px;height:95px}
/* 소희 메시지 알림 위치 조정 */
.sohee-notification {
    top: 45px !important;
}
/* LAST LOOP: clickable historical run records and timeline transition */
#message-screen .loop-action { appearance:none;border:0;background:transparent;color:#61aaff;font:inherit;font-weight:750;text-decoration:underline;padding:0;cursor:pointer; }
#message-screen .loop-result { margin-top:10px;padding-top:9px;border-top:1px solid #626269;color:#c9c9d1;font-size:13px;line-height:1.45; }
#loop-notification { cursor:pointer;z-index:1000; }
#loop-transition {
  position:absolute; inset:0; z-index:99999; overflow:hidden;
  background:#000; pointer-events:all; isolation:isolate;
}
#loop-transition .loop-transition-snapshot {
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  display:block !important; visibility:visible !important;
  opacity:1; transform:translate3d(0,0,0);
  pointer-events:none; overflow:hidden;
  animation:loop-screen-shift 1s steps(1,end) both;
}
#loop-transition .loop-transition-noise {
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(to bottom, transparent 0 5px, rgba(255,255,255,.16) 6px, transparent 7px 13px),
    linear-gradient(90deg,transparent 0 20%,rgba(185,208,225,.17) 23%,transparent 26% 72%,rgba(255,255,255,.12) 74%,transparent 78%);
  background-size:100% 18px,100% 100%;
}
#loop-transition.loop-transition-running .loop-transition-noise {
  animation:loop-noise 1s 1s steps(1,end) both;
}
#loop-transition .loop-transition-black {
  position:absolute; inset:0; background:#000; z-index:3;
  opacity:0; pointer-events:none;
}
#loop-transition.loop-transition-dark .loop-transition-black { opacity:1; }
#loop-transition.loop-transition-reveal .loop-transition-black {
  opacity:0; transition:opacity .85s ease-in-out;
}
#loop-transition.loop-transition-reveal .loop-transition-snapshot,
#loop-transition.loop-transition-dark .loop-transition-snapshot { opacity:0; }
#loop-transition.loop-transition-reveal .loop-transition-noise { opacity:0; animation:none; }
@keyframes loop-screen-shift {
  0%,13%,31%,54%,76%,100% {transform:translate3d(0,0,0);filter:none;clip-path:none}
  14%,18% {transform:translate3d(6px,0,0);filter:contrast(1.45);clip-path:inset(22% 0 36% 0)}
  19%,30% {transform:translate3d(0,0,0);filter:none;clip-path:none}
  55%,61% {transform:translate3d(-8px,0,0);filter:contrast(1.6);clip-path:inset(49% 0 12% 0)}
  62%,75% {transform:translate3d(0,0,0);filter:none;clip-path:none}
  77%,82% {transform:translate3d(3px,0,0);filter:brightness(.75)}
}
@keyframes loop-noise {
  0%,13%,36%,57%,80%,100% {opacity:0;transform:translateY(0)}
  14%,22% {opacity:.75;transform:translateY(-12px)}
  37%,44% {opacity:.5;transform:translateY(7px)}
  58%,67% {opacity:.8;transform:translateY(-6px)}
  81%,87% {opacity:.35;transform:translateY(3px)}
}

/* LAST LOOP fix: invisible Messages home zone must be BELOW the input pill.
   Keep it narrow and at the very bottom, not over the compose field. */
#message-list-screen .message-invisible-home-touch,
#message-screen .message-invisible-home-touch {
  bottom:0 !important;
  height:9px !important;
  left:32% !important;
  width:36% !important;
  z-index:35 !important;
}
#message-screen .message-compose,
#message-screen .message-input,
#message-screen .message-composer { position:relative; z-index:36; }

/* Messages: the home gesture is restricted to the strip BELOW the compose pill. */
#message-screen .message-invisible-home-touch,
#message-list-screen .message-invisible-home-touch {
  bottom:0 !important;
  height:8px !important;
  left:35% !important;
  width:30% !important;
  z-index:110 !important;
}
/* The global home indicator must never intercept taps on Messages input. */
.game:has(#message-screen:not([hidden])) > .home-indicator,
.game:has(#message-list-screen:not([hidden])) > .home-indicator {
  display:none !important;
}
#message-screen .message-compose {z-index:120 !important;}

/* v4: restore the original bottom composer; never reposition it to relative. */
#message-screen .message-compose {
  position:absolute !important;
  top:auto !important;
  bottom:calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  left:0 !important; right:0 !important;
  z-index:120 !important;
}
/* Invisible home gesture lives only below the composer, in the home-indicator strip. */
#message-screen .message-invisible-home-touch,
#message-list-screen .message-invisible-home-touch {
  position:absolute !important; top:auto !important;
  bottom:0 !important; height:6px !important;
  left:35% !important; width:30% !important;
  z-index:130 !important; background:transparent !important;
}
/* Future-dated Safari content displays as a broken text encoding, not a missing page. */
.safari-future-corrupt {word-break:break-word;overflow-wrap:anywhere;letter-spacing:.02em;}

/* LAST LOOP v5 — Messages composer stays at the bottom, with a visible home bar below it. */
#message-screen .message-compose {
  position:absolute !important;
  top:auto !important;
  bottom:calc(29px + env(safe-area-inset-bottom, 0px)) !important;
  z-index:120 !important;
}
#message-screen .message-invisible-home-touch,
#message-list-screen .message-invisible-home-touch {
  position:absolute !important;
  left:35% !important;
  width:30% !important;
  height:6px !important;
  bottom:calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background:#fff !important;
  opacity:1 !important;
  border:0 !important;
  border-radius:100px !important;
  z-index:130 !important;
  cursor:pointer !important;
}
#message-screen .message-invisible-home-touch::before,
#message-list-screen .message-invisible-home-touch::before {
  content:""; position:absolute; left:-12px;right:-12px;top:-8px;bottom:-8px;
}

/* v6: use one shared dark Messages banner style for every sender. */
#loop-notification {
  background:rgba(22,22,25,.89) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.09) !important;
  -webkit-backdrop-filter:blur(28px) saturate(110%) !important;
  backdrop-filter:blur(28px) saturate(110%) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.45) !important;
}
#loop-notification .sohee-notification-heading strong,
#loop-notification .sohee-notification-content small {color:#fff !important;}
#loop-notification .sohee-notification-when {color:#c1c1c7 !important;}
#loop-notification .sohee-notification-avatar {display:block;width:100%;height:100%;border-radius:50%;}
#loop-notification .sohee-notification-app-badge {box-shadow:none !important;border:0 !important;outline:0 !important;}

/* LAST LOOP photo viewer: iOS-style detail interactions */
#photo-detail-screen .photo-info-sheet {
    position:absolute; left:0; right:0; bottom:0; z-index:24;
    background:#202024; border-radius:20px 20px 0 0;
    padding:10px 20px 40px; color:#fff;
    box-shadow:0 -12px 45px #0008; max-height:55%; overflow:auto;
}
#photo-detail-screen .photo-info-sheet[hidden],
#photo-detail-screen .photo-unavailable[hidden] {display:none!important}
.photo-info-grabber {width:36px;height:5px;border-radius:9px;background:#666;margin:0 auto 18px}
.photo-info-top {display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;font-size:17px}
.photo-info-top button {border:0;background:none;color:#0a84ff;font-size:15px}
.photo-info-row {display:flex;flex-direction:column;gap:5px;padding:11px 0;border-top:1px solid #3c3c42;overflow-wrap:anywhere}
.photo-info-row small {font-size:12px;color:#a6a6ac}
.photo-info-row span {font-size:14px}
#photo-detail-screen.info-open .photo-detail-bottom {opacity:0;pointer-events:none}
#photo-detail-screen .photo-unavailable {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:22px;color:#e5e5e8}
.photo-broken-symbol {width:64px;height:64px;border:2px solid #999;border-radius:10px;display:grid;place-items:center;font-size:38px;color:#aaa}
.photo-unavailable strong {font-size:15px}
.photo-unavailable small {font-size:12px;color:#8e8e93}
#photo-detail-screen .photo-trash[disabled] {opacity:.25;cursor:default}
#photo-detail-image {transform-origin:center center;will-change:transform}
#photo-detail-viewer {touch-action:pan-y}


/* LAST LOOP Photos: edge-to-edge immersive iOS-style library.
   This block intentionally overrides the old inset .app-framed layout. */
#photos-screen.app-framed { background:#000 !important; color:#fff !important; }
#photos-screen.app-framed::before { display:none !important; }
#photos-screen.app-framed .photos-scroll {
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  bottom:0 !important; width:100% !important; height:100% !important;
  overflow-y:auto !important; overflow-x:hidden !important;
  padding:0 0 175px !important; margin:0 !important;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
#photos-screen .photos-grid {
  width:100% !important; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2px !important; padding:0 !important; margin:0 !important;
}
#photos-screen .photo-grid-item { display:block; width:100%; aspect-ratio:1; min-width:0; }
#photos-screen .photo-grid-item img,
#photos-screen .photo-grid-item video { display:block; width:100%; height:100%; object-fit:cover; }
#photos-screen.app-framed .photos-header {
  position:absolute !important; top:0 !important; left:0 !important; right:0 !important;
  width:100% !important; height:235px !important; z-index:14 !important;
  padding:25px 19px 0 !important; margin:0 !important;
  background:linear-gradient(180deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.52) 67%,transparent 100%) !important;
  pointer-events:none;
}
#photos-screen .photos-header-row { height:54px; align-items:center; }
#photos-screen .photos-header-row h1 { font-size:32px; font-weight:750; letter-spacing:-.7px; }
#photos-screen .photos-select-btn { pointer-events:auto; color:#fff; font-size:15px; padding:8px 11px; background:#3339; border-radius:24px; }
#photos-screen .photos-subheader { height:auto; display:flex; align-items:center; justify-content:flex-start; gap:10px; padding-top:2px; }
#photos-screen #photos-date-label { font-size:14px; font-weight:600; }
#photos-screen .photos-item-count {
    display:none !important;
}
#photos-screen .photos-more-btn { margin-left:auto; pointer-events:auto; background:#333b; }
#photos-screen.app-framed .photos-bottom {
  position:absolute !important; left:0 !important; right:0 !important;
  bottom:0 !important; width:100% !important; height:164px !important;
  padding:6px 14px 27px !important; margin:0 !important; z-index:16 !important;
  background:linear-gradient(0deg,#080809 0%,rgba(8,8,9,.92) 58%,transparent 100%) !important;
}
#photos-screen .photos-floating-tools { display:flex; justify-content:space-between; align-items:center; gap:8px; height:52px; }
#photos-screen .photos-sort-btn,
#photos-screen .photos-tools-spacer { flex:0 0 39px; width:39px; height:39px; }
#photos-screen .photos-sort-btn { display:grid; place-items:center; background:#39393de8; color:#fff; border-radius:50%; padding:9px; }
#photos-screen .photos-sort-btn svg { width:22px; height:22px; }
#photos-screen .photos-zoom { flex:0 1 205px; max-width:none; width:auto; margin:0; padding:4px; border-radius:28px; background:#353538e8; }
#photos-screen .photos-zoom-btn { font-size:14px; padding:8px 5px; border-radius:22px; }
#photos-screen .photos-tabs { height:72px; margin-top:3px; }
#photos-screen .photos-tab svg { width:25px; height:25px; }
#photos-screen .photos-tab span { font-size:11px; }
#photos-screen .photos-home-touch { bottom:0; height:19px; }
@media(max-width:767px) {
  #photos-screen.app-framed .photos-header {
    padding-top:calc(25px + env(safe-area-inset-top,0px)) !important;
  }
  #photos-screen.app-framed .photos-bottom { padding-bottom:calc(23px + env(safe-area-inset-bottom,0px)) !important; }
}


/* 2026-10-25 — Photo detail layout matched to the supplied iPhone reference.
   Detail screen only: library, messages, and other apps are unchanged. */
#photo-detail-screen.app-framed {
  background:#000 !important;
  color:#fff !important;
}
#photo-detail-screen.app-framed::before { display:none !important; }
#photo-detail-screen.app-framed .photo-detail-header {
  position:absolute !important;
  top:calc(49px + env(safe-area-inset-top, 0px)) !important;
  left:16px !important; right:16px !important;
  width:auto !important; height:46px !important;
  z-index:20 !important; gap:10px !important;
}
#photo-detail-screen .photo-detail-back,
#photo-detail-screen .photo-detail-more {
  flex:0 0 46px !important;
  width:46px !important; height:46px !important;
  background:rgba(40,40,42,.96) !important;
  border-radius:50% !important;
}
#photo-detail-screen .photo-detail-date {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  flex:0 1 auto !important;
  min-width:138px !important;
  max-width:calc(100% - 116px) !important;
  padding:6px 14px !important;
  border-radius:999px !important;
  background:rgba(40,40,42,.96) !important;
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:500 !important;
  white-space:nowrap !important;
}
#photo-detail-screen .photo-detail-date small {
  display:block !important;
  font-size:12px !important;
  line-height:1.35 !important;
  color:#d0d0d2 !important;
}
#photo-detail-screen.app-framed .photo-detail-viewer {
  position:absolute !important;
  top:calc(112px + env(safe-area-inset-top, 0px)) !important;
  bottom:calc(160px + env(safe-area-inset-bottom, 0px)) !important;
  left:0 !important; right:0 !important;
  width:100% !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  overflow:hidden !important;
}
#photo-detail-screen .photo-detail-viewer img,
#photo-detail-screen .photo-detail-viewer video {
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}
#photo-detail-screen .photo-detail-viewer img[hidden],
#photo-detail-screen .photo-detail-viewer video[hidden] {display:none !important;}
#photo-detail-screen.app-framed .photo-detail-bottom {
  position:absolute !important;
  left:0 !important; right:0 !important;
  width:100% !important;
  height:150px !important;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  background:#000 !important;
  z-index:21 !important;
}
#photo-detail-screen .photo-filmstrip {
  height:60px !important;
  gap:3px !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
}
#photo-detail-screen .photo-filmstrip-item {
  flex:0 0 36px !important;
  width:36px !important;
  height:48px !important;
  border-radius:5px !important;
}
#photo-detail-screen .photo-filmstrip-item.active {transform:scale(1.08) !important;}
#photo-detail-screen .photo-detail-toolbar {
  height:72px !important;
  padding:0 18px !important;
  gap:8px !important;
}
#photo-detail-screen .photo-detail-toolbar .photo-tool {
  width:46px !important; height:46px !important;
  flex:0 0 46px !important;
}
#photo-detail-screen .photo-detail-toolbar .photo-tool-group {
  min-height:46px !important;
  padding:0 6px !important;
  gap:3px !important;
}
#photo-detail-screen .photo-detail-toolbar .photo-tool-group .photo-tool {
  width:40px !important; height:46px !important; flex:0 0 40px !important;
}
#photo-detail-screen.controls-hidden .photo-detail-viewer {
  top:calc(55px + env(safe-area-inset-top, 0px)) !important;
  bottom:calc(26px + env(safe-area-inset-bottom, 0px)) !important;
}
@media(max-width:360px) {
  #photo-detail-screen.app-framed .photo-detail-header {left:12px !important;right:12px !important;}
  #photo-detail-screen .photo-detail-date {min-width:120px !important;padding:5px 10px !important;font-size:12px !important;}
  #photo-detail-screen .photo-detail-toolbar {padding:0 12px !important;}
  #photo-detail-screen .photo-detail-toolbar .photo-tool {width:41px !important;height:41px !important;flex-basis:41px !important;}
  #photo-detail-screen .photo-detail-toolbar .photo-tool-group .photo-tool {width:35px !important;flex-basis:35px !important;}
}

/* LAST LOOP: interactive iOS Photos pull-down dismissal. */
#photo-detail-screen .photo-drag-backdrop {
    position:absolute; inset:0; z-index:1; overflow:hidden;
    background:#000; opacity:0; pointer-events:none;
}
#photo-detail-screen .photo-drag-library-grid {
    position:absolute; left:0; right:0;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px;
}
#photo-detail-screen .photo-drag-library-tile {aspect-ratio:1; overflow:hidden; background:#222;}
#photo-detail-screen .photo-drag-library-tile img {width:100%;height:100%;object-fit:cover;display:block;}
#photo-detail-screen .photo-drag-library-heading {
    position:absolute;top:75px;left:18px;color:#fff;font-size:29px;font-weight:700;
    text-shadow:0 2px 10px #000;pointer-events:none;
}
#photo-detail-screen .photo-detail-viewer {z-index:3;}
#photo-detail-screen .photo-detail-header {z-index:5;}
#photo-detail-screen .photo-detail-bottom {z-index:5;}
#photo-detail-screen.photo-is-dragging .photo-drag-backdrop {
    opacity:var(--photo-drag-progress,0);
}
#photo-detail-screen.photo-is-dragging .photo-detail-header,
#photo-detail-screen.photo-is-dragging .photo-detail-bottom {
    opacity:calc(1 - var(--photo-drag-progress,0)); pointer-events:none;
}
#photo-detail-screen.photo-is-dragging .photo-detail-viewer {
    overflow:visible !important; touch-action:none !important;
    background:transparent !important;
}
#photo-detail-screen.photo-is-dragging .photo-detail-viewer > img,
#photo-detail-screen.photo-is-dragging .photo-detail-viewer > video,
#photo-detail-screen.photo-is-dragging .photo-detail-viewer > .photo-unavailable {
    transform:translate3d(0,var(--photo-drag-y,0px),0) scale(var(--photo-drag-scale,1)) !important;
    transform-origin:center center !important;
    background:transparent !important;
    will-change:transform;
}
#photo-detail-screen.photo-drag-returning .photo-detail-viewer > img,
#photo-detail-screen.photo-drag-returning .photo-detail-viewer > video,
#photo-detail-screen.photo-drag-returning .photo-detail-viewer > .photo-unavailable {
    transition:transform .22s cubic-bezier(.22,.75,.25,1) !important;
}
#photo-detail-screen.photo-drag-returning .photo-drag-backdrop,
#photo-detail-screen.photo-drag-returning .photo-detail-header,
#photo-detail-screen.photo-drag-returning .photo-detail-bottom {transition:opacity .22s ease !important;}
#photo-detail-screen:not(.photo-is-dragging) .photo-detail-viewer {touch-action:none;}

/* LAST LOOP: iOS-style inline video viewer (no native fullscreen controls). */
#photo-detail-video { pointer-events:none !important; }
#photo-detail-screen .photo-video-ui[hidden] { display:none !important; }
#photo-detail-screen .photo-video-ui {
  position:absolute; inset:0; z-index:4; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
#photo-detail-screen .photo-video-play {
  pointer-events:auto; border:0; color:white; background:rgba(20,20,20,.48);
  border-radius:50%; width:60px; height:60px; font-size:25px;
  display:flex; align-items:center; justify-content:center; padding:0;
  -webkit-tap-highlight-color:transparent;
}
#photo-detail-screen .photo-video-timeline {
  pointer-events:none; position:absolute; bottom:12px; left:15px; right:15px;
  display:flex; align-items:center; gap:9px; color:white; font-size:12px;
  text-shadow:0 1px 3px #000; padding:8px 9px; border-radius:12px;
  background:rgba(0,0,0,.35);
}
#photo-detail-screen .photo-video-timeline input {
  pointer-events:auto; flex:1; min-width:0; accent-color:white;
  height:22px; touch-action:none;
}
#photo-detail-screen.photo-is-dragging .photo-video-ui,
#photo-detail-screen.photo-drag-returning .photo-video-ui { opacity:0; pointer-events:none; }
#photo-detail-screen .photo-detail-viewer { touch-action:none !important; }

/* iPhone Photos: floating video transport, placed above the thumbnail strip. */
#photo-detail-screen .photo-video-ui[hidden] {display:none !important;}
#photo-detail-screen .photo-video-ui {
  position:fixed !important;
  top:auto !important;
  bottom:calc(174px + env(safe-area-inset-bottom, 0px)) !important;
  left:7% !important; right:7% !important;
  height:51px !important;
  padding:0 13px !important;
  box-sizing:border-box !important;
  border-radius:30px !important;
  background:rgba(39,39,41,.97) !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important;
  gap:12px !important;
  z-index:25 !important;
  pointer-events:auto !important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
#photo-detail-screen .photo-video-play,
#photo-detail-screen .photo-video-mute {
  flex:0 0 30px !important;width:30px !important;height:36px !important;
  border:0 !important;border-radius:0 !important;
  background:none !important;color:#fff !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  padding:3px !important;pointer-events:auto !important;
}
#photo-detail-screen .photo-video-play svg,
#photo-detail-screen .photo-video-mute svg {width:24px;height:24px;fill:currentColor;}
#photo-detail-screen .photo-video-play .video-play-icon,
#photo-detail-screen .photo-video-mute .video-muted-icon {display:none;}
#photo-detail-screen .photo-video-ui.is-paused .video-pause-icon,
#photo-detail-screen .photo-video-ui.is-muted .video-volume-icon {display:none;}
#photo-detail-screen .photo-video-ui.is-paused .video-play-icon,
#photo-detail-screen .photo-video-ui.is-muted .video-muted-icon {display:block;}
#photo-detail-screen .photo-video-timeline {
  position:static !important;flex:1 1 auto !important;min-width:0 !important;
  height:36px !important;padding:0 !important;margin:0 !important;
  border-radius:0 !important;background:none !important;
  display:flex !important;align-items:center !important;gap:0 !important;
  pointer-events:auto !important;
}
#photo-detail-screen .photo-video-timeline input {
  width:100% !important;flex:1 1 auto !important;height:24px !important;
  margin:0 !important;accent-color:#f5f5f5 !important;
  pointer-events:auto !important;touch-action:none !important;
}
#photo-detail-screen.controls-hidden .photo-video-ui {opacity:0 !important;pointer-events:none !important;}
#photo-detail-screen.photo-is-dragging .photo-video-ui,
#photo-detail-screen.photo-drag-returning .photo-video-ui {opacity:0 !important;pointer-events:none !important;}


/* Video seek track appearance only. Preserve current playback bar position. */
#photo-detail-screen .photo-video-timeline input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 5px !important;
  border-radius: 100px !important;
  outline: none !important;
  background: linear-gradient(to right, #f7f7f7 0%, #f7f7f7 var(--video-progress, 0%), #77777b var(--video-progress, 0%), #77777b 100%) !important;
}
#photo-detail-screen .photo-video-timeline input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#photo-detail-screen .photo-video-timeline input[type="range"]::-moz-range-thumb {
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
}

/* LAST LOOP additions: deleted album and Safari search only */
#photos-screen .deleted-album-tile {display:flex;flex-direction:column;align-items:flex-start;gap:7px;width:48%;margin:20px 14px;border:0;background:transparent;color:#fff;text-align:left;padding:0}
#photos-screen .deleted-album-tile img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;filter:brightness(.7)}
#photos-screen .deleted-album-tile strong{font-size:16px}#photos-screen .deleted-album-tile small{font-size:12px;color:#999}
#safari-screen .safari-google-header{display:flex;align-items:center;gap:12px;margin:20px 0 18px}
#safari-screen .safari-google-logo{font-size:23px;font-weight:750;letter-spacing:-1.3px;color:#e8e8ed}
#safari-screen .safari-google-query{min-width:0;flex:1;padding:13px 15px;border-radius:28px;background:#27272b;color:#aaaab1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px}
#safari-screen .safari-google-tabs{display:flex;gap:26px;border-bottom:1px solid #33343a;padding:0 2px}
#safari-screen .safari-google-tabs span{font-size:14px;color:#999;padding:0 2px 12px}
#safari-screen .safari-google-tabs span.active{color:#8ab4f8;border-bottom:3px solid #8ab4f8}
#safari-screen .safari-google-count{color:#999;font-size:12px;margin:20px 0}
#safari-screen .safari-google-result{padding:13px 0 26px;margin-bottom:8px;border-bottom:1px solid #303035}
#safari-screen .safari-google-source{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#dedee2;font-size:13px}
#safari-screen .safari-google-source b{display:block;font-weight:500}
#safari-screen .safari-google-source small{display:block;font-size:11px;margin-top:3px}
#safari-screen .safari-google-favicon{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#34363b;font-weight:700}
#safari-screen .safari-google-result strong{font-size:19px;font-weight:500;color:#8ab4f8}
#safari-screen .safari-google-result p{font-size:13px;line-height:1.6;color:#bfc0c6}
#safari-screen .safari-google-result em{display:block;margin-top:8px;font-size:11px;color:#888;font-style:normal}
#loop-notification{touch-action:pan-y}

/* LAST LOOP 2026-10-25: targeted Safari and Photos redesign */
#safari-screen .safari-shortcuts{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;align-items:start!important}
#safari-screen .safari-shortcut{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-width:0!important;padding:8px 0!important;margin:0!important;line-height:1.5!important}
#safari-screen .safari-shortcut b{margin:0 auto 7px!important;flex:0 0 58px!important}
#safari-screen .ll-search-home{position:relative;min-height:100%;display:flex;flex-direction:column;background:#202124;color:#e8eaed;margin:-10px -17px -28px;padding:22px 17px 15px;box-sizing:border-box}
#safari-screen .ll-search-top{display:flex;align-items:center;gap:25px;font-size:13px;color:#aeb2b8;padding:0 4px 13px}
#safari-screen .ll-search-top .active{color:#a8c7fa;border-bottom:2px solid #a8c7fa;padding-bottom:13px;margin-bottom:-13px}
#safari-screen .ll-search-top-icons{margin-left:auto;font-size:16px}
#safari-screen .ll-search-avatar{display:inline-grid;place-items:center;background:#17634d;border-radius:50%;height:29px;width:29px;color:white}
#safari-screen .ll-search-logo{font-size:clamp(44px,12vw,66px);font-weight:600;letter-spacing:-3px;text-align:center;margin:68px 0 33px;color:white}
#safari-screen .ll-search-box{border:0;border-radius:40px;background:#4b5055;color:#d4d7dc;display:flex;align-items:center;gap:12px;width:100%;padding:0 16px;height:52px;text-align:left;font-size:15px}
#safari-screen .ll-search-box svg{width:23px;height:23px;flex:none}
#safari-screen .ll-search-box span:nth-child(2){flex:1}
#safari-screen .ll-search-mic{font-size:19px}
#safari-screen .ll-search-region{margin-top:auto;border-bottom:1px solid #44474a;padding:13px 0;color:#9da1a6;font-size:13px}
#safari-screen .ll-search-footer{font-size:11px;text-align:center;padding:18px 0 8px;color:#aeb1b7}
#safari-screen .ll-search-focus{background:#202124;min-height:100%;margin:-10px -17px -28px;padding:12px 13px;color:#e8eaed}
#safari-screen .ll-focus-input{height:56px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #55585d}
#safari-screen .ll-focus-input button{font-size:34px;color:#a8c7fa;line-height:1;border:0;background:none;padding:0 6px}
#safari-screen .ll-focus-input input{min-width:0;flex:1;font-size:17px;color:#fff;background:transparent;border:0;outline:none}
#safari-screen .ll-focus-input>span{font-size:19px;color:#bdc1c6}
#safari-screen .ll-suggestion{display:flex;align-items:center;border-bottom:1px solid #303134;min-height:58px}
#safari-screen .ll-suggestion>button{flex:1;min-width:0;display:flex;align-items:center;gap:18px;text-align:left;border:0;background:none;color:#e8eaed;font-size:16px;padding:10px 6px}
#safari-screen .ll-clock{font-size:26px;color:#9aa0a6}
#safari-screen .ll-suggestion-cross{color:#9aa0a6;padding:0 9px;font-size:23px}
#photos-screen .ll-album-overlay[hidden]{display:none!important}
#photos-screen .ll-album-overlay{position:absolute!important;inset:0 0 105px!important;z-index:15!important;overflow-y:auto!important;background:#000!important;color:#fff!important;padding:0!important;box-sizing:border-box!important}
#photos-screen:has(.ll-album-overlay:not([hidden])) .photos-header{display:none!important}
#photos-screen:has(.ll-album-overlay:not([hidden])) .photos-floating-tools{display:none!important}
#photos-screen:has(.ll-album-overlay:not([hidden])) .photos-bottom{height:107px!important;padding-top:0!important}
#photos-screen .ll-album-title{font-size:33px;font-weight:750;padding:64px 20px 20px}
#photos-screen .ll-album-section{font-size:20px;font-weight:700;padding:10px 20px 14px}
#photos-screen .ll-deleted-tile{display:flex;flex-direction:column;align-items:flex-start;width:48%;padding:0 0 0 20px;background:transparent;border:0;color:#fff;text-align:left}
#photos-screen .ll-album-cover{width:100%;aspect-ratio:1;position:relative;background:#181818;border-radius:10px;overflow:hidden}
#photos-screen .ll-album-cover img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) blur(6px)}
#photos-screen .ll-lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:42px}
#photos-screen .ll-deleted-tile strong{font-size:15px;margin-top:9px}
#photos-screen .ll-deleted-tile small{color:#999;font-size:13px;margin-top:3px}
#photos-screen .ll-deleted-header{padding:18px 18px 19px;background:#000}
#photos-screen .ll-deleted-actions{display:flex;justify-content:space-between;align-items:center;height:58px}
#photos-screen .ll-deleted-actions>button,#photos-screen .ll-deleted-actions>div>button{border:0;background:#262629;color:#fff;border-radius:40px;height:45px;min-width:45px;font-size:24px}
#photos-screen .ll-deleted-actions>div{display:flex;gap:12px}
#photos-screen .ll-deleted-actions .ll-deleted-select{font-size:16px;padding:0 16px}
#photos-screen .ll-deleted-header h1{font-size:34px;letter-spacing:-1px;margin:14px 0 4px;font-weight:750}
#photos-screen .ll-deleted-count{font-size:14px;font-weight:600;color:#e4e4e8}
#photos-screen .ll-deleted-count span{color:#0a84ff;margin-left:8px}
#photos-screen .ll-deleted-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
#photos-screen .ll-deleted-grid button{aspect-ratio:1;position:relative;padding:0;border:0;background:#18181a;overflow:hidden}
#photos-screen .ll-deleted-grid img{width:100%;height:100%;object-fit:cover;display:block}
#photos-screen .ll-deleted-grid button:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#0009);pointer-events:none}
#photos-screen .ll-deleted-grid button>span{position:absolute;bottom:9px;left:0;right:0;text-align:center;color:#fff;font-size:13px;z-index:1;text-shadow:0 1px 3px #000}

/* Equal-height, same-row Safari shortcuts. */
#safari-screen .safari-shortcuts {display:flex!important;flex-flow:row nowrap!important;align-items:flex-start!important;justify-content:space-between!important;gap:0!important;width:100%!important;margin:14px 0 26px!important}
#safari-screen .safari-shortcuts>.safari-shortcut {display:flex!important;flex:0 0 33.333%!important;width:33.333%!important;min-width:0!important;height:105px!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;padding:0!important;margin:0!important;text-align:center!important;line-height:1.4!important}
#safari-screen .safari-shortcuts>.safari-shortcut>b {display:flex!important;flex:0 0 58px!important;width:58px!important;height:58px!important;margin:0 auto 8px!important;align-items:center!important;justify-content:center!important}

/* Targeted Safari search screens: seamless black canvas and tighter spacing. */
#safari-screen .ll-search-home,
#safari-screen .ll-search-focus { background:#000 !important; color:#f5f5f7 !important; }
#safari-screen .ll-search-home { padding-top:10px !important; }
#safari-screen .ll-search-logo { margin:34px 0 19px !important; font-size:clamp(42px,11vw,60px) !important; }
#safari-screen .ll-search-box { background:#29292c !important; height:52px !important; }
#safari-screen .ll-search-mic { display:flex !important; align-items:center; gap:15px; color:#c9c9ce; }
#safari-screen .ll-search-mic svg { width:20px;height:20px; }
#safari-screen .ll-search-top-icons { display:flex;align-items:center;gap:12px; }
#safari-screen .ll-search-region { margin-top:auto !important; }
#safari-screen .ll-search-focus { padding-top:0 !important; }
#safari-screen .ll-focus-input { height:58px !important; }
#safari-screen .ll-focus-input > span { display:flex;align-items:center;gap:15px; }
#safari-screen .ll-focus-input > span svg { width:20px;height:20px; }
#safari-screen .ll-suggestion { background:#000 !important; }
#loop-notification { touch-action:pan-y; will-change:transform,opacity; }

/* 2026-10-26: photo album overlay repairs; preserve existing media and photo viewer. */
#photos-screen:has(#ll-album-overlay:not([hidden])) .photos-scroll { visibility:hidden!important; pointer-events:none!important; }
#photos-screen #ll-album-overlay:not([hidden]) {display:block!important;top:57px!important;bottom:108px!important;z-index:15!important;}
#photos-screen #ll-album-overlay .ll-album-title{margin:0!important;padding:26px 20px 22px!important;line-height:1.15!important;}
#photos-screen #ll-album-overlay .ll-album-section{margin:0!important;padding:12px 20px 18px!important;}
#photos-screen #ll-album-overlay .ll-deleted-tile{width:52%!important;gap:0!important;}
#photos-screen #ll-album-overlay .ll-deleted-tile strong{margin-top:12px!important;line-height:1.35!important;}
#photos-screen #ll-album-overlay .ll-deleted-tile small{margin-top:6px!important;}
#photos-screen #ll-album-overlay .ll-deleted-header{padding-top:18px!important;}
#photos-screen #ll-album-overlay .ll-deleted-header h1{line-height:1.2!important;}
/* Allow gesture handling on the notification itself across all apps. */
#loop-notification,#sohee-notification{touch-action:none!important;will-change:transform,opacity;}

/* 2026-10-26: compact Recently Deleted header, keep photo grid unchanged. */
#photos-screen #ll-album-overlay:not([hidden]) { top:0!important; }
#photos-screen #ll-album-overlay .ll-deleted-header { padding:64px 18px 10px!important; }
#photos-screen #ll-album-overlay .ll-deleted-actions { height:44px!important; }
#photos-screen #ll-album-overlay .ll-deleted-actions>button { width:42px!important;height:42px!important;min-width:42px!important; }
#photos-screen #ll-album-overlay .ll-deleted-header h1 { margin:8px 0 5px!important;font-size:32px!important;line-height:1.15!important; }
#photos-screen #ll-album-overlay .ll-deleted-count { margin:0 0 8px!important; }

/* 2026-10-26: align Recently Deleted heading with the Albums heading. */
#photos-screen #ll-album-overlay .ll-deleted-header {
  padding:31px 18px 10px!important;
}
#photos-screen #ll-album-overlay .ll-deleted-actions>button {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  line-height:1!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif!important;
}
#photos-screen #ll-album-overlay .ll-deleted-actions>button>span,
#photos-screen #ll-album-overlay .ll-deleted-actions>button>svg {
  display:block;
  flex-shrink:0;
  margin:0!important;
  transform:translateY(-1px);
}

/* Recently Deleted: geometrically centered back chevron, independent of font glyph metrics. */
#photos-screen #ll-album-overlay .ll-deleted-actions > button:first-child {
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
}
#photos-screen #ll-album-overlay .ll-deleted-actions > button:first-child > * {
  visibility:hidden!important;
}
#photos-screen #ll-album-overlay .ll-deleted-actions > button:first-child::after {
  content:"";
  display:block;
  width:11px;
  height:11px;
  border-left:2.5px solid #fff;
  border-bottom:2.5px solid #fff;
  transform:translateX(2px) rotate(45deg);
  box-sizing:border-box;
  pointer-events:none;
}

/* 2026-10-26: center the Recently Deleted back icon using a fixed SVG viewBox.
   Override the prior pseudo-chevron without moving the round button. */
#photos-screen #ll-album-overlay .ll-deleted-actions > button:first-child {
  background-color:#262629!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5 8 12l7 7' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-size:22px 22px!important;
}
#photos-screen #ll-album-overlay .ll-deleted-actions > button:first-child::after {
  content:none!important;
}

/* LAST LOOP / 2022: cinematic Korean iPhone keyboard */
.ll22-incoming{position:absolute;top:62px;left:4%;width:92%;z-index:160;border:1px solid #ffffff35;border-radius:20px;background:#38383be8;backdrop-filter:blur(18px);color:#fff;padding:15px 18px;display:flex;flex-direction:column;gap:5px;text-align:left;box-shadow:0 8px 20px #0004}
.ll22-incoming strong{font-size:16px}.ll22-incoming span{font-size:13px;color:#e7e7e9}

/* 2022 SMS: preserve the real iOS input keyboard and visible send control. */
#message-screen .message-compose button#message-send{display:grid!important;place-items:center!important;opacity:1!important;visibility:visible!important}
#message-screen .message-compose button#message-send:disabled{display:grid!important;opacity:.35!important}
#message-screen .message-compose input:focus{color:#fff!important}

/* 2022 Sohee cinematic keyboard: scoped to iMessage, no changes to other apps */
#message-screen .ll22-keyboard{position:absolute;bottom:0;left:0;right:0;height:264px;background:#d1d4dc;z-index:55;padding:7px 3px 16px;display:flex;flex-direction:column;gap:8px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#message-screen .ll22-keyboard[hidden]{display:none!important}
#message-screen .ll22-keyrow{display:flex;justify-content:center;gap:4px;height:43px;flex-shrink:0}
#message-screen .ll22-key{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;border-radius:5px;background:#fff;color:#151515;font-size:20px;font-weight:400;box-shadow:0 1px 0 #9da2ae;transform-origin:center bottom}
#message-screen .ll22-key.ll22-special{background:#aeb4c0;font-size:15px}
#message-screen .ll22-key.ll22-wide{flex:4;font-size:13px}
#message-screen .ll22-key.ll22-pressed{background:#f9fafc;z-index:2;animation:ll22-keypress .19s ease-out}
#message-screen .ll22-key.ll22-pressed:not(.ll22-special):not(.ll22-wide):after{content:attr(data-key);position:absolute;bottom:calc(100% - 5px);left:50%;transform:translateX(-50%);width:140%;height:55px;background:#fff;border-radius:9px 9px 6px 6px;box-shadow:0 -2px 7px #7776;display:grid;place-items:center;font-size:27px;pointer-events:none}
@keyframes ll22-keypress{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
#message-screen .ll22-keyboard-footer{display:flex;justify-content:space-between;color:#6d7380;padding:0 22px;font-size:19px;flex:1;align-items:center}
#message-screen.ll22-keyboard-open .message-compose{bottom:264px!important;z-index:56;background:#000!important;padding-bottom:0!important}
#message-screen.ll22-keyboard-open .message-scroll{bottom:318px!important}
#message-screen.ll22-keyboard-open .message-compose input{color:#fff!important;caret-color:transparent}
#message-screen.ll22-keyboard-open .message-compose button:disabled{display:none!important}
#message-screen.ll22-keyboard-open .message-compose button:not(:disabled){display:grid!important;border-radius:50%!important}
@media(max-height:650px){#message-screen .ll22-keyboard{height:226px;gap:5px}#message-screen .ll22-keyrow{height:36px}#message-screen.ll22-keyboard-open .message-compose{bottom:226px!important}#message-screen.ll22-keyboard-open .message-scroll{bottom:280px!important}}


/* LAST LOOP Safari: remove the obsolete bottom URL/search field only.
   The custom SEARCH page and Safari navigation controls stay intact. */
#safari-screen #safari-address-form { display: none !important; }
#safari-screen .safari-toolbar {
  min-height: 0 !important;
  height: 84px !important;
  padding: 8px 14px 16px !important;
}
#safari-screen .safari-content {
  bottom: 84px !important;
}


/* LAST LOOP — Messages back capsule: align arrow and unread badge like iOS. */
#message-screen .back-touch {
  width: auto !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 13px 0 12px !important;
  gap: 9px !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, #333336 0%, #242427 100%) !important;
  border: 1px solid #47474b !important;
  box-shadow: inset 0 1px 1px #ffffff21, 0 2px 5px #0004 !important;
  -webkit-tap-highlight-color: transparent;
}
#message-screen .back-touch .ios-back-chevron {
  width: 18px !important;
  height: 26px !important;
  flex: 0 0 18px !important;
}
#message-screen .back-touch .ios-back-count {
  min-width: 35px !important;
  height: 27px !important;
  padding: 0 8px !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  background: #f5f5f7 !important;
  color: #252529 !important;
  font-variant-numeric: tabular-nums;
}
#message-screen .back-touch:active { filter: brightness(1.15); }

/* LAST LOOP: darker, intermittent 1314 time-loop interference. */
#loop-transition .loop-transition-snapshot.loop-transition-dark-messages {
  background:#000 !important; color:#fff !important;
  animation:loop-screen-shift-intense 2s steps(1,end) both !important;
}
#loop-transition .loop-transition-dark-messages .message-header,
#loop-transition .loop-transition-dark-messages .message-scroll,
#loop-transition .loop-transition-dark-messages .message-compose,
#loop-transition .loop-transition-dark-messages .message-header-person,
#loop-transition .loop-transition-dark-messages .message-input {
  background-color:#000 !important; color:#fff !important;
}
#loop-transition .loop-transition-dark-messages .message-row.received .message-bubble {background:#29292c !important;color:#fff !important;}
#loop-transition .loop-transition-dark-messages .message-row.sent .message-bubble {background:#0a84ff !important;color:#fff !important;}
#loop-transition .loop-transition-noise {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(200,220,235,.21) 4px, transparent 5px 9px),
    repeating-linear-gradient(90deg, transparent 0 33px, rgba(165,200,230,.12) 34px, transparent 36px 89px),
    linear-gradient(180deg, transparent 0 13%, rgba(225,240,255,.21) 14%, transparent 16% 47%, rgba(210,230,255,.19) 48%, transparent 51% 83%, rgba(235,240,255,.26) 84%, transparent 86%);
  background-size:100% 13px, 135% 100%, 100% 100%;
  mix-blend-mode:screen;
}
#loop-transition.loop-transition-running .loop-transition-noise {animation:loop-noise-intense 2s steps(1,end) both !important;}
@keyframes loop-noise-intense {
  0%,7%,15%,24%,32%,39%,48%,57%,65%,73%,81%,89%,100% {opacity:0;transform:translate(0,0)}
  8%,11% {opacity:.45;transform:translate(-5px,-9px)}
  16%,20% {opacity:.58;transform:translate(7px,3px)}
  25%,29% {opacity:.35;transform:translate(-3px,-14px)}
  40%,45% {opacity:.7;transform:translate(9px,8px)}
  49%,54% {opacity:.5;transform:translate(-7px,-5px)}
  66%,70% {opacity:.82;transform:translate(5px,-11px)}
  74%,78% {opacity:.62;transform:translate(-11px,9px)}
  82%,87% {opacity:.94;transform:translate(12px,-8px)}
  90%,98% {opacity:.78;transform:translate(-13px,7px)}
}
@keyframes loop-screen-shift-intense {
  0%,8%,14%,24%,39%,49%,65%,73%,82%,100% {transform:translate3d(0,0,0);filter:none;clip-path:none}
  9%,11% {transform:translate3d(4px,0,0);filter:contrast(1.3)}
  15%,18% {transform:translate3d(-6px,0,0);filter:contrast(1.5)}
  25%,28% {transform:translate3d(5px,0,0);filter:brightness(.7)}
  40%,44% {transform:translate3d(-9px,0,0);filter:contrast(1.7)}
  50%,54% {transform:translate3d(7px,0,0);filter:brightness(.55)}
  66%,69% {transform:translate3d(-10px,0,0);filter:contrast(1.8)}
  74%,78% {transform:translate3d(11px,0,0);filter:brightness(.55)}
  83%,88% {transform:translate3d(-15px,0,0);filter:contrast(2.1) saturate(.5)}
  90%,97% {transform:translate3d(17px,0,0);filter:contrast(2.3) brightness(.55)}
}

/* LAST LOOP — persistent iOS-style Messages notification on the 2022 lock screen. */
#lock-screen .sohee-lock-notification {
  position:absolute; z-index:35; top:38%; left:3%; width:94%;
  display:flex; flex-direction:column; align-items:stretch; gap:4px;
  padding:13px 15px 15px; border-radius:23px;
  border:1px solid rgba(255,255,255,.17);
  background:rgba(73,73,78,.76); color:#fff;
  -webkit-backdrop-filter:blur(25px) saturate(125%);
  backdrop-filter:blur(25px) saturate(125%);
  box-shadow:0 5px 24px rgba(0,0,0,.22);
  text-align:left; cursor:pointer; font-family:inherit;
  opacity:0; transform:translateY(18px) scale(.985);
  transition:opacity .42s ease, transform .5s cubic-bezier(.22,1,.36,1);
  -webkit-tap-highlight-color:transparent;
}
#lock-screen .sohee-lock-notification[hidden]{display:none!important}
#lock-screen .sohee-lock-notification.visible{opacity:1;transform:translateY(0) scale(1)}
#lock-screen .sohee-lock-heading{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.2}
#lock-screen .sohee-lock-heading strong{font-size:14px;font-weight:650}
#lock-screen .sohee-lock-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:6px;background:#4acb67;flex-shrink:0}
#lock-screen .sohee-lock-icon svg{width:19px;height:19px}
#lock-screen .sohee-lock-now{margin-left:auto;color:#d0d0d5;font-size:13px}
#lock-screen .sohee-lock-sender{font-size:15px;font-weight:650;margin-top:4px}
#lock-screen .sohee-lock-body{font-size:15px;font-weight:400}

/* LAST LOOP | passcode keypad spacing — mobile only.
   Keep passcode heading, dots and vertical position unchanged. */
@media (max-width:767px) {
  #passcode-screen .passcode-pad {
    width:min(100%, 320px) !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    column-gap:15px !important;
    row-gap:18px !important;
    justify-items:center !important;
  }
  #passcode-screen .passcode-pad button[data-digit] {
    width:clamp(65px,19vw,76px) !important;
    height:clamp(65px,19vw,76px) !important;
  }
}

/* Lock-screen-only correction: preserve clock layout and place alert below it. */
#lock-screen .lock-datetime { pointer-events:none; }
#lock-screen .sohee-lock-notification { position:absolute !important; bottom:auto !important; margin:0 !important; }
body:has(#lock-screen:not([hidden])) #sohee-notification { display:none !important; }


/* LAST LOOP / all in-app notification banners — final shared override.
   Placed last to supersede older 45px / 6.8% rules.
   Lock-screen notification cards are intentionally excluded. */
.game > #sohee-notification,
.game > #loop-notification,
#sohee-notification,
#loop-notification {
  position: absolute !important;
  top: 8px !important;
  bottom: auto !important;
  left: 2.5% !important;
  right: 2.5% !important;
  width: 95% !important;
  min-height: 66px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
  border-radius: 22px !important;
  background: rgba(65,65,70,.72) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  -webkit-backdrop-filter: blur(26px) saturate(135%) !important;
  backdrop-filter: blur(26px) saturate(135%) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.22) !important;
  z-index: 1000 !important;
}
#sohee-notification .sohee-notification-icon,
#loop-notification .sohee-notification-icon {
  width: 38px !important; height: 38px !important; flex: 0 0 38px !important;
}
#sohee-notification .sohee-notification-content small,
#loop-notification .sohee-notification-content small {
  margin-top: 2px !important; line-height: 1.25 !important;
}

/* FaceTime 2022 Sohee video test */
#ft-call-overlay{z-index:110;background:#29292b;overflow:hidden}
.ft-connecting-stage{display:flex;align-items:center;flex-direction:column}
.ft-video-stage{position:absolute;inset:0;background:#383838}
#ft-test-video{width:100%;height:100%;object-fit:contain;background:#383838;display:block}
.ft-self-preview{position:absolute;top:52px;left:16px;width:26%;aspect-ratio:3/4;background:#000;border-radius:9px;box-shadow:0 2px 12px #0005}
.ft-video-controls{position:absolute;bottom:0;left:0;right:0;height:142px;background:#1d1d1f;border-radius:20px 20px 0 0}
.ft-control-grip{width:34px;height:5px;background:#525255;border-radius:8px;margin:12px auto 15px}
.ft-video-buttons{display:flex;justify-content:space-around;padding:0 8px}
.ft-video-buttons button{width:58px;height:58px;border-radius:50%;background:#424245!important;display:grid;place-items:center}
.ft-video-buttons svg{width:29px;height:29px;color:white}
#ft-call-end{z-index:3;bottom:34px;width:61px;height:61px;padding:0!important;border-radius:50%!important;background:#ff3b30!important;display:grid;place-items:center;font-size:0!important}
#ft-call-end svg{width:33px;height:33px;color:white}
.ft-video-stage~#ft-call-end{bottom:32px}
.ft-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;padding:12px 20px;background:#222c!important;border-radius:30px}

/* 암호 키패드 간격 최종 조정 */
#passcode-screen .passcode-pad {
    width: 88%;
    max-width: 290px;
    column-gap: 9px;
    row-gap: 14px;
    margin: 0 auto;
}

#passcode-screen .passcode-pad button {
    width: min(100%, 76px);
}


/* ===== 2026-11-01: unified in-game home indicator =====
   Keep the existing shared button and its game.js click handler.
   This rule intentionally comes after legacy app-specific overrides. */
@media (max-width: 767px) {
  .device .game > .home-indicator {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: auto !important;
    bottom: 15px !important;
    transform: translateX(-50%) !important;
    width: 36% !important;
    max-width: 145px !important;
    height: 5px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 99px !important;
    background: #fff !important;
    z-index: 1000 !important;
    pointer-events: auto !important;
  }
  /* Preserve the existing swipe-to-unlock / passcode behavior. */
  .device:has(#lock-screen:not([hidden])) .game > .home-indicator,
  .device:has(#passcode-screen:not([hidden])) .game > .home-indicator {
    display: none !important;
  }
  /* App-specific decorative copies should not compete with the shared bar. */
  .device .photos-home-indicator,
  #weather-screen .weather-home-line {
    display: none !important;
  }
}

/* LAST LOOP — FaceTime / Clock 하단 겹침 수정 */
@media (max-width: 767px) {

  /* FaceTime: 새로운 통화 버튼을 홈 바 위로 이동 */
  #facetime-screen .ft-new-call {
    bottom: calc(43px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* FaceTime: 마지막 통화 기록이 버튼에 가려지지 않도록 */
  #facetime-screen .ft-scroll {
    bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 시계: 회색 타원형 탭 바를 홈 바 위로 이동 */
  #clock-screen .clock-tabbar {
    bottom: calc(43px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 시계: 알람 목록과 하단 탭 바 분리 */
  #clock-screen .clock-alarm-scroll {
    bottom: calc(135px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Phone app: restore the ONE shared, clickable home indicator. */
.device .game:has(#phone-screen:not([hidden])) > button.home-indicator {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  position:absolute !important;
  bottom:calc(15px + env(safe-area-inset-bottom, 0px)) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  width:36% !important;
  max-width:145px !important;
  height:5px !important;
  background:#fff !important;
  border:0 !important;
  border-radius:99px !important;
  z-index:9999 !important;
  pointer-events:auto !important;
}
/* The phone tabs stay above the bar; do not hide the shared button. */
#phone-screen .llp-tabs {margin-bottom:43px !important;}

/* FaceTime 통화 종료 버튼 — decline 이미지 */
#ft-call-end {
    position: absolute;
    bottom: 34px;
    width: 61px;
    height: 61px;
    padding: 0 !important;
    border: none;
    border-radius: 50% !important;
    background: transparent !important;
    display: grid;
    place-items: center;
    overflow: hidden;
    z-index: 3;
}

#ft-call-end img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Desktop access notice — mobile gameplay remains unchanged */
#pc-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #111;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}
.pc-notice-content { max-width: 420px; }
.pc-notice-content svg { width: 45px; height: 45px; color: #999; margin-bottom: 28px; }
.pc-notice-content h1 { font-size: 21px; font-weight: 600; margin: 0 0 18px; word-break: keep-all; }
.pc-notice-content p { font-size: 14px; line-height: 1.9; color: #999; margin: 0; word-break: keep-all; }
html.pc-access #pc-notice { display: flex !important; }
html.pc-access .device { display: none !important; }

/* 2022: empty Recently Deleted album — centered label and neutral cover. */
#photos-screen #ll-album-overlay .ll-deleted-grid.is-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 260px;
    height: calc(100% - 215px);
    padding: 24px !important;
}
#photos-screen #ll-album-overlay .ll-deleted-grid.is-empty .photos-empty {
    margin: 0 !important;
    width: 100%;
    text-align: center !important;
    white-space: nowrap;
    color: #8e8e93;
    font-size: 15px;
    line-height: 1.5;
}
#photos-screen #ll-album-overlay .ll-album-cover:not(:has(img)) {
    background: #1b1b1d !important;
}


/* LAST LOOP — Notes detail toolbar above the shared home indicator.
   Scope: mobile note detail only; other app layouts remain unchanged. */
@media (max-width: 767px) {
  #note-detail-screen .note-detail-toolbar {
    bottom: calc(49px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #note-detail-screen .note-detail-content {
    bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* FINAL: Notes detail only — separate controls from the fixed white home indicator. */
@media (max-width: 767px) {
  .device #note-detail-screen:not([hidden]) > .note-detail-toolbar {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .device #note-detail-screen:not([hidden]) .note-detail-content {
    bottom: calc(148px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* LAST LOOP final fix: keep the 1314 return-to-2026 lock-screen alert centered.
   Only this alert is affected; Sohee and in-app banners stay unchanged. */
#lock-screen #ll-1314-lock-notification {
  left: 3% !important;
  right: auto !important;
  width: 94% !important;
  margin: 0 !important;
  transform: translateY(18px) scale(.985);
}
#lock-screen #ll-1314-lock-notification.visible {
  transform: translateY(0) scale(1);
}

/* LAST LOOP: hide damaged photo metadata even if a later UI update rewrites it. */
#photo-detail-screen.ll-unavailable-date #photo-detail-date > * { display: none !important; }
#photo-detail-screen.ll-unavailable-date #photo-detail-date::after { content: "알 수 없음"; display: block; text-align: center; }

/* LAST LOOP: actual final 1314 lock notification (ending.js).
   Match the same horizontal position and width as Sohee's lock notification. */
#lock-screen #ll-final-1314-lock {
  left: 3% !important;
  right: auto !important;
  width: 94% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Final 1314 lock-screen card: same edge-to-edge geometry as Sohee. */
#lock-screen #ll-final-1314-lock {
  left:3% !important; right:3% !important; width:auto !important;
  max-width:none !important; min-width:0 !important;
  margin:0 !important; box-sizing:border-box !important;
  border:1px solid rgba(255,255,255,.17) !important;
}