:root{
  --ios-blue:#007aff;
  --ios-green:#34c759;
  --ios-red:#ff3b30;
  --ios-gray:#f2f2f7;
  --screen-w:min(100vw,calc(94vh * 9 / 16));
  --screen-h:min(94vh,calc(100vw * 16 / 9));
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 15%,#25262a 0,#121316 48%,#070708 100%);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:#111}
button,input{font:inherit}
button{border:0}
#stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.phone{width:var(--screen-w);height:var(--screen-h);aspect-ratio:9/16;position:relative;border-radius:clamp(28px,6vw,54px);padding:clamp(7px,1vw,11px);background:linear-gradient(145deg,#202124,#050506 58%,#2c2d31);box-shadow:0 35px 100px #000b,0 0 0 1px #5558 inset,0 0 0 2px #000;overflow:hidden}
.phone:before{content:"";position:absolute;right:-4px;top:22%;width:5px;height:12%;border-radius:0 5px 5px 0;background:#333}
.phone:after{content:"";position:absolute;left:-4px;top:18%;width:5px;height:19%;border-radius:5px 0 0 5px;background:linear-gradient(#333 0 20%,transparent 20% 30%,#333 30% 62%,transparent 62% 70%,#333 70%)}
.screen{position:relative;width:100%;height:100%;border-radius:clamp(23px,5vw,46px);overflow:hidden;background:#000;isolation:isolate}
.wallpaper{position:absolute;inset:0;background:url('assets/wallpaper.webp') center/cover no-repeat;transform:scale(1.02)}
.wallpaper:after{content:"";position:absolute;inset:0;background:linear-gradient(#0002,#0000 32%,#0005 100%)}
.layer{position:absolute;inset:0;transition:opacity .25s ease,transform .32s cubic-bezier(.2,.8,.2,1)}
.hidden{opacity:0;pointer-events:none;transform:scale(.985)}
.status{position:absolute;left:0;right:0;top:0;height:30px;display:flex;align-items:center;justify-content:space-between;padding:7px 17px 0 19px;color:#fff;font-size:12px;font-weight:650;z-index:50;text-shadow:0 1px 2px #0004}
.status.dark{color:#09090b;text-shadow:none}
.status-icons{display:flex;align-items:center;gap:5px}
.signal{display:flex;gap:1.5px;align-items:flex-end;height:10px}
.signal i{display:block;width:2.3px;background:currentColor;border-radius:2px}
.signal i:nth-child(1){height:3px}.signal i:nth-child(2){height:5px}.signal i:nth-child(3){height:7px}.signal i:nth-child(4){height:9px}
.wifi{width:13px;height:9px;border:2px solid currentColor;border-color:currentColor transparent transparent transparent;border-radius:50%;position:relative;transform:translateY(2px)}
.wifi:after{content:"";position:absolute;width:3px;height:3px;background:currentColor;border-radius:50%;left:3px;top:3px}
.battery{width:20px;height:9px;border:1.4px solid currentColor;border-radius:3px;padding:1px;position:relative}
.battery:before{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
.battery b{display:block;width:63%;height:100%;background:currentColor;border-radius:1px}
.island{position:absolute;z-index:51;top:9px;left:50%;transform:translateX(-50%);width:31%;height:24px;max-width:125px;background:#050505;border-radius:18px;box-shadow:0 1px 0 #3338 inset}
.home-indicator{position:absolute;z-index:100;bottom:6px;left:50%;transform:translateX(-50%);width:32%;height:4px;border-radius:999px;background:#fff;opacity:.95;cursor:pointer;mix-blend-mode:difference}

/* Lock */
.lock{color:white;display:flex;flex-direction:column;align-items:center;padding-top:11%}
.lock-date{font-size:14px;font-weight:550;margin-top:4%;text-shadow:0 2px 8px #0008}
.lock-time{font-size:clamp(58px,17vw,92px);font-weight:220;line-height:1;letter-spacing:-4px;text-shadow:0 3px 16px #0006;margin-top:1%}
.lock-empty{margin-top:auto;margin-bottom:19%;font-size:13px;color:#fff9;background:#0003;border:1px solid #fff2;padding:8px 13px;border-radius:18px;backdrop-filter:blur(12px)}
.lock-actions{position:absolute;bottom:8%;left:7%;right:7%;display:flex;justify-content:space-between}
.circle-action{width:42px;height:42px;border-radius:50%;background:#1119;backdrop-filter:blur(14px);display:grid;place-items:center;font-size:18px}
.unlock{position:absolute;bottom:3%;font-size:12px;color:#fffd;letter-spacing:.2px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.65;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* Home */
.home{color:#fff;padding:44px 18px 84px;display:flex;flex-direction:column}
.home:before{content:"";position:absolute;inset:0;background:url('assets/wallpaper.webp') center/cover no-repeat;z-index:-2;transform:scale(1.03)}
.home:after{content:"";position:absolute;inset:0;background:linear-gradient(#07131b55,#1115 45%,#0007);backdrop-filter:blur(.2px);z-index:-1}
.widgets{display:grid;grid-template-columns:1.15fr .85fr;gap:10px;height:24%;min-height:110px;margin-top:2%}
.widget{border-radius:20px;background:#f7f7f7dc;color:#111;padding:14px;backdrop-filter:blur(26px);box-shadow:0 8px 24px #0003;overflow:hidden}
.widget.weather{background:linear-gradient(160deg,#5ca8e8e8,#27679ee6);color:#fff;position:relative}
.widget.weather .temp{font-size:34px;font-weight:300}.widget.weather .city{font-size:13px;font-weight:600}.widget.weather .desc{font-size:11px;color:#fffd;margin-top:2px}
.widget.weather:after{content:"☁︎";position:absolute;font-size:62px;right:8px;bottom:-12px;color:#ffffff66}
.widget.cal{display:flex;flex-direction:column;justify-content:center;align-items:center}
.widget.cal .month{color:#ff3b30;font-size:12px;font-weight:700}.widget.cal .day{font-size:42px;line-height:1;font-weight:350}.widget.cal .weekday{font-size:11px;color:#777}
.apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px 10px;margin-top:17px;padding:0 3px}
.app-icon-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;user-select:none;background:none;color:inherit;padding:0}
.app-icon{width:min(13vw,55px);height:min(13vw,55px);max-width:58px;max-height:58px;border-radius:14px;display:grid;place-items:center;box-shadow:0 3px 8px #0004,0 0 0 .5px #fff5 inset;overflow:hidden;position:relative}
.app-icon svg{width:65%;height:65%}.app-label{font-size:11px;color:white;text-shadow:0 1px 3px #000b;white-space:nowrap}
.icon-photos{background:#fff}.flower{width:42px;height:42px;border-radius:50%;background:conic-gradient(#f44,#fb3,#ffea35,#52d273,#4dc7f0,#5d70f1,#b05ce5,#f35b9f,#f44);filter:saturate(1.1);position:relative}.flower:after{content:"";position:absolute;inset:13px;background:#fff;border-radius:50%}
.icon-contacts{background:linear-gradient(#d8d8dc,#aaa)}.icon-maps{background:linear-gradient(135deg,#dff3ff 0 32%,#94d46f 32% 56%,#f7d56b 56% 72%,#e9edf0 72%)}
.icon-notes{background:linear-gradient(#f9d74b 0 24%,#fff 24%)}.icon-notes:after{content:"";width:65%;height:45%;background:repeating-linear-gradient(#cdd0d5 0 1px,transparent 1px 8px)}
.dock{position:absolute;left:14px;right:14px;bottom:18px;height:72px;border-radius:24px;background:#f4f4f43d;backdrop-filter:blur(28px);display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:8px 12px;box-shadow:0 8px 30px #0003}
.dock .app-label{display:none}.dock .app-icon-wrap{gap:0}
.icon-phone,.icon-messages{background:#34c759}.icon-safari{background:#fff}.icon-youtube{background:#fff}

/* App shell */
.app-layer{background:#f2f2f7;z-index:20;transform-origin:center 72%;overflow:hidden}
.app-layer.open{opacity:1;pointer-events:auto;transform:scale(1)}
.app{position:absolute;inset:0;padding-top:32px;display:flex;flex-direction:column;background:#f2f2f7;overflow:hidden}
.nav{height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-bottom:.5px solid #c8c7cc;background:#f7f7f8e8;backdrop-filter:blur(24px);flex:none;z-index:5}
.nav.large{height:68px;align-items:flex-end}.nav-title{font-size:25px;font-weight:720;letter-spacing:-.5px}.nav-title.small{font-size:17px;font-weight:650}.nav-btn{border:0;background:none;color:var(--ios-blue);font-size:15px;padding:6px;cursor:pointer}.back{display:flex;align-items:center;gap:2px}
.app-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;-webkit-overflow-scrolling:touch}
.search{margin:9px 14px;background:#e3e3e8;border-radius:11px;height:34px;display:flex;align-items:center;padding:0 10px;color:#8e8e93;font-size:14px;gap:7px}
.search input{border:0;background:transparent;outline:0;width:100%;font-size:14px;color:#222}
.row{background:white;display:flex;align-items:center;min-height:61px;padding:9px 13px;border-bottom:.5px solid #e5e5ea;cursor:pointer}
.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:white;font-weight:700;flex:none;box-shadow:0 0 0 .5px #0001 inset}
.row-main{min-width:0;flex:1;margin-left:11px}.row-top{display:flex;justify-content:space-between;gap:10px}.row-name{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-time{font-size:11px;color:#8e8e93;white-space:nowrap}.row-preview{font-size:13px;color:#8e8e93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--ios-blue);margin-right:4px}

/* Messages */
.thread{background:white}.thread-head{height:57px;display:flex;align-items:center;justify-content:center;border-bottom:.5px solid #ddd;background:#f7f7f8e8;backdrop-filter:blur(20px);position:relative}.thread-head .nav-btn{position:absolute;left:7px}.thread-person{text-align:center}.thread-person .mini-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:white;margin:auto;font-size:11px;font-weight:700}.thread-person b{font-size:11px;font-weight:600}
.messages{padding:12px 10px 28px;display:flex;flex-direction:column;gap:5px;min-height:100%}.bubble{max-width:77%;padding:8px 11px;border-radius:17px;font-size:14px;line-height:1.35;word-break:keep-all}.bubble.me{align-self:flex-end;background:#0b84ff;color:white;border-bottom-right-radius:5px}.bubble.them{align-self:flex-start;background:#e9e9ed;color:#111;border-bottom-left-radius:5px}.msg-date{align-self:center;color:#8e8e93;font-size:11px;margin:8px 0 5px}.msg-meta{align-self:flex-end;color:#8e8e93;font-size:10px;margin:0 3px 3px}.sender{font-size:10px;color:#8e8e93;margin-left:4px}.compose{height:48px;background:#fff;border-top:.5px solid #ddd;display:flex;align-items:center;padding:7px 10px;gap:7px}.compose .field{height:32px;border:1px solid #ccc;border-radius:17px;flex:1;color:#999;padding:7px 12px;font-size:12px}

/* Calls */
.segment{margin:8px auto 10px;background:#dedee3;border-radius:8px;padding:2px;display:flex;width:52%;font-size:12px}.segment span{flex:1;text-align:center;padding:5px;border-radius:6px}.segment .active{background:white;box-shadow:0 1px 3px #0002}.call-icon{width:24px;color:#8e8e93;font-size:16px}.call-missed .row-name,.call-missed .row-preview{color:#ff3b30}

/* Contacts */
.section-letter{padding:7px 14px 4px;font-size:12px;font-weight:650;color:#666}.contact-letter{width:30px;height:30px}.contact-detail{text-align:center;padding:20px 18px}.contact-detail .avatar{width:86px;height:86px;font-size:32px;margin:0 auto 10px}.contact-detail h2{margin:6px 0 3px;font-size:23px}.contact-detail p{margin:0;color:#8e8e93;font-size:13px}.contact-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.ca{background:white;border-radius:14px;padding:10px 2px;color:var(--ios-blue);font-size:10px}.ca b{display:block;font-size:20px;margin-bottom:3px}.info-card{background:white;border-radius:13px;text-align:left;padding:12px;margin-top:10px;font-size:13px}.info-card small{display:block;color:#8e8e93;margin-bottom:3px}

/* Photos */
.photos-app{background:#fff}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px}.photo-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;cursor:pointer}.photo-viewer{position:absolute;inset:0;background:#000;z-index:40;color:white;display:flex;flex-direction:column;padding-top:31px}.photo-viewer.hidden{display:none}.pv-top{height:56px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;background:#000b;z-index:2}.pv-date{text-align:center;font-size:13px}.pv-date small{display:block;color:#aaa;font-size:10px;margin-top:2px}.pv-main{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.pv-main img{max-width:100%;max-height:100%;object-fit:contain}.pv-arrow{position:absolute;top:0;bottom:0;width:30%;border:0;background:transparent;z-index:2}.pv-arrow.prev{left:0}.pv-arrow.next{right:0}.pv-bottom{height:56px;display:flex;justify-content:space-around;align-items:center;background:#000b;font-size:21px}.pv-info{position:absolute;left:10px;right:10px;bottom:62px;background:#1c1c1edc;backdrop-filter:blur(18px);padding:12px;border-radius:14px;font-size:12px;transform:translateY(150%);transition:.25s}.pv-info.show{transform:translateY(0)}

/* Maps */
.map-wrap{height:53%;position:relative;background:#dfe5dc;overflow:hidden}.fake-map{position:absolute;inset:0;background:linear-gradient(65deg,transparent 0 38%,#fff 38% 44%,transparent 44% 100%),linear-gradient(-22deg,transparent 0 54%,#fff 54% 59%,transparent 59% 100%),linear-gradient(12deg,#d9e8d4,#edf0e6)}.fake-map:before,.fake-map:after{content:"";position:absolute;background:#f4d489;border:3px solid #fff;border-radius:8px}.fake-map:before{width:62%;height:8%;left:13%;top:35%;transform:rotate(-10deg)}.fake-map:after{width:52%;height:7%;right:8%;top:57%;transform:rotate(8deg)}.building{position:absolute;background:#cbd0c5;border-radius:4px;box-shadow:0 0 0 2px #eef inset}.map-label{position:absolute;font-size:9px;color:#59605b;background:#ffffffaa;padding:2px 4px;border-radius:4px}.pin{position:absolute;width:25px;height:25px;border-radius:50% 50% 50% 0;background:#ff3b30;transform:rotate(-45deg);box-shadow:0 3px 7px #0003}.pin:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;left:8px;top:8px}.route-line{position:absolute;inset:0;pointer-events:none}.maps-panel{height:47%;background:#f7f7f8;border-radius:22px 22px 0 0;margin-top:-15px;position:relative;z-index:2;overflow:auto;padding:12px 0 30px}.grab{width:34px;height:4px;border-radius:3px;background:#c7c7cc;margin:0 auto 10px}.place-row{display:flex;gap:10px;padding:11px 15px;border-bottom:.5px solid #ddd;background:#fff}.place-icon{width:34px;height:34px;border-radius:50%;background:#e5e5ea;display:grid;place-items:center}.place-row b{font-size:14px}.place-row small{display:block;color:#8e8e93;margin-top:3px}

/* Notes */
.note-list .row-main{margin-left:0}.note-preview{color:#8e8e93;font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-paper{background:#fffdf7;min-height:100%;padding:20px 17px 50px;font-size:15px;line-height:1.65;white-space:pre-wrap}.note-paper h2{font-size:25px;margin:0 0 4px}.note-paper .ndate{color:#8e8e93;font-size:11px;margin-bottom:15px}.check-item{display:flex;align-items:center;gap:9px;margin:7px 0}.check-box{width:19px;height:19px;border:1.5px solid #aaa;border-radius:50%;display:grid;place-items:center;color:#f3b400;font-size:13px;cursor:pointer}.check-item.done .check-box{border-color:#f3b400;background:#f3b400;color:white}.check-item.done span{text-decoration:line-through;color:#999}

/* Safari */
.safari-top{padding:10px 12px 7px;background:#f7f7f8;border-bottom:.5px solid #ccc}.address{background:#e4e4e9;border-radius:11px;height:34px;display:flex;align-items:center;justify-content:center;color:#555;font-size:13px;gap:5px}.history-row{padding:10px 14px;border-bottom:.5px solid #ddd;background:white}.history-row b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-row span{font-size:11px;color:#8e8e93}.webpage{background:white;min-height:100%;padding:20px}.webpage h1{font-size:24px;line-height:1.25}.webpage .domain{color:#8e8e93;font-size:12px}.webpage p{font-size:14px;line-height:1.7;color:#444}.safari-bar{height:48px;background:#f7f7f8;border-top:.5px solid #ccc;display:flex;align-items:center;justify-content:space-around;color:var(--ios-blue);font-size:20px}

/* YouTube */
.yt-head{height:54px;background:white;display:flex;align-items:center;padding:0 14px;border-bottom:.5px solid #ddd;gap:8px}.yt-logo{font-size:19px;font-weight:800}.yt-logo span{color:#ff0000}.yt-list{background:white}.yt-card{display:flex;gap:10px;padding:9px 11px;border-bottom:.5px solid #eee;cursor:pointer}.thumb{width:43%;aspect-ratio:16/9;border-radius:8px;position:relative;overflow:hidden;background:#444;flex:none}.thumb:after{content:attr(data-duration);position:absolute;right:4px;bottom:4px;background:#000c;color:white;font-size:9px;padding:2px 4px;border-radius:3px}.thumb .bar{position:absolute;bottom:0;left:0;height:3px;background:#f00}.t-cat{background:url('assets/photo_13.webp') center/cover}.t-drive{background:url('assets/photo_14.webp') center/cover}.t-store{background:url('assets/photo_02.webp') center/cover}.t-bar{background:url('assets/photo_08.webp') center/cover}.t-game{background:linear-gradient(135deg,#161927,#713ed0)}.t-hair{background:linear-gradient(135deg,#4b1f1d,#d88472)}.t-laptop{background:linear-gradient(135deg,#273b4f,#54a7bd)}.yt-info{min-width:0}.yt-info b{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.yt-info small{font-size:10px;color:#777;display:block;margin-top:5px}.video-page{background:#fff;min-height:100%}.video-stage{aspect-ratio:16/9;background:#101014;display:grid;place-items:center;color:white;font-size:40px}.video-copy{padding:14px}.video-copy h2{font-size:18px;line-height:1.35;margin:0 0 8px}.video-copy p{font-size:12px;color:#777}

/* Toast */
.toast{position:absolute;z-index:120;left:50%;bottom:11%;transform:translate(-50%,20px);background:#111d;color:white;padding:8px 13px;border-radius:18px;font-size:11px;opacity:0;pointer-events:none;transition:.25s;backdrop-filter:blur(15px);white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:520px){
  :root{--screen-w:min(100vw,calc(100vh * 9 / 16));--screen-h:min(100vh,calc(100vw * 16 / 9))}
  .phone{border-radius:0;padding:0;box-shadow:none;background:#000}
  .screen{border-radius:0}
  .phone:before,.phone:after{display:none}
}