:root{--bg:#e6e8ee;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0e0f13}}
:root[data-theme="dark"]{--bg:#0e0f13}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}
html,body{height:100%;margin:0}
body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Noto Sans KR",sans-serif;display:flex;align-items:center;justify-content:center;overflow:hidden}
.phone{position:relative;flex:none;width:414px;height:868px;padding:12px;border-radius:66px;background:#0b0b0d;box-shadow:0 0 0 3px #8e8e93,0 0 0 5px #2b2b2e,0 40px 80px rgba(0,0,0,.4)}
.b{position:absolute;width:4px;background:#2b2b2e;border-radius:2px 0 0 2px;left:-7px}
.b1{top:120px;height:28px}.b2{top:180px;height:56px}.b3{top:250px;height:56px}
.b4{left:auto;right:-7px;top:210px;height:92px;border-radius:0 2px 2px 0;cursor:pointer}
.screen{--wp-home:url('../images/yjm.jpg');--wp-lock:url('../images/back.jpg');--vbg:#f2f2f7;--vfg:#000;--card:#fff;--sep:#d1d1d6;position:relative;width:100%;height:100%;border-radius:54px;overflow:hidden;color:#fff;background:#000}
.screen.night{--vbg:#000;--vfg:#fff;--card:#1c1c1e;--sep:#38383a}
.wall{position:absolute;inset:0;background:var(--wp-home) center/cover no-repeat}
.island{position:absolute;top:11px;left:50%;width:122px;height:36px;margin-left:-61px;background:#000;border-radius:20px;z-index:60}
.status{position:absolute;top:0;left:0;right:0;height:54px;padding:19px 34px 0 40px;display:flex;justify-content:space-between;font-size:16px;font-weight:600;z-index:50;pointer-events:none;transition:color .3s}
.status span{display:flex;gap:6px;align-items:center}
.screen.lt .status{color:#000}
.screen.lt .status svg{fill:#000}.status svg{fill:#fff}
.home{position:absolute;inset:0;transition:transform .35s cubic-bezier(.3,.8,.3,1),filter .35s}
.home.away{transform:scale(.9);filter:blur(6px) brightness(.8)}
.pages{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pages::-webkit-scrollbar{display:none}
.page{flex:0 0 100%;scroll-snap-align:start;padding:66px 22px 0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:100px;align-content:start}
.w{grid-column:span 2;grid-row:span 2;margin:4px 6px 0;border-radius:24px;padding:14px;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.w.wx{background:linear-gradient(160deg,#4a90e2,#2a5fc0)}
.w.wc{background:rgba(255,255,255,.92);color:#111}
.w small{font-size:12px;font-weight:600;opacity:.85}.w .big{font-size:44px;font-weight:300;margin-top:2px}
.w.wc small{color:#ff3b30;text-transform:uppercase}.w.wc .big{font-size:52px;font-weight:300;line-height:1}
.app{display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:none;color:#fff;font:inherit;font-size:11.5px;cursor:pointer;height:96px;padding-top:6px;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.ic{width:62px;height:62px;border-radius:14.5px;display:flex;align-items:center;justify-content:center;font-size:33px;box-shadow:0 1px 5px rgba(0,0,0,.25),inset 0 0 0 .5px rgba(255,255,255,.25);overflow:hidden;position:relative;transition:transform .15s,filter .15s}
.app:active .ic{transform:scale(.9);filter:brightness(.75)}
.ic.cal{background:#fff;flex-direction:column;color:#111;font-family:inherit;text-shadow:none}
.ic.cal small{font-size:10px;font-weight:600;color:#ff3b30;margin-top:6px}.ic.cal b{font-size:34px;font-weight:300;line-height:1;margin-top:-1px}
.dots{position:absolute;bottom:170px;left:0;right:0;display:flex;justify-content:center;gap:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4)}.dots i.on{background:#fff}
.search{position:absolute;bottom:122px;left:50%;transform:translateX(-50%);padding:8px 26px;border-radius:20px;background:rgba(255,255,255,.28);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px;display:none}
.dock{position:absolute;left:14px;right:14px;bottom:26px;height:96px;padding:0 10px;border-radius:36px;background:rgba(255,255,255,.28);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;justify-content:space-around;align-items:center}
.dock .app{height:auto;padding:0}.dock .app span{display:none}
.lock{position:absolute;inset:0;z-index:40;text-align:center;transition:transform .5s cubic-bezier(.3,.8,.3,1);background:var(--wp-lock) center/cover no-repeat}
.lock.off{transform:translateY(-102%)}
.lock .d{margin-top:84px;font-size:21px;font-weight:600;opacity:.9}.lock .t{font-size:100px;font-weight:600;line-height:1;letter-spacing:-2px}
.lk{position:absolute;bottom:64px;width:52px;height:52px;border-radius:50%;background:rgba(40,40,40,.38);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s}
.lk svg{width:22px;height:22px;fill:#fff}
.lk:active{transform:scale(.92)}
.lk.on{background:#fff}.lk.on svg{fill:#000}
.lock .h{position:absolute;bottom:30px;width:100%;font-size:12px;opacity:.7}
.view{position:absolute;inset:0;z-index:30;background:var(--vbg);color:var(--vfg);display:flex;flex-direction:column;padding-top:56px;transform:scale(.16);opacity:0;pointer-events:none;border-radius:60px;transition:transform .38s cubic-bezier(.3,.85,.3,1),opacity .2s,border-radius .38s}
.view.on{transform:none;opacity:1;pointer-events:auto;border-radius:0}
.view.dk{background:#000;color:#fff}
.head{padding:6px 20px 8px;font-size:34px;font-weight:700}
.body{flex:1;overflow:auto;padding:0 18px 40px}
.grp{background:var(--card);border-radius:12px;margin-bottom:22px;overflow:hidden}
.row{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:.5px solid var(--sep);font-size:17px}.row:last-child{border:0}
.tg{width:51px;height:31px;border-radius:16px;background:#8e8e93;position:relative;transition:background .2s;cursor:pointer}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.tg.on{background:#34c759}.tg.on::after{transform:translateX(20px)}
textarea{width:100%;height:100%;min-height:480px;border:0;outline:0;background:none;color:inherit;font:18px/1.55 inherit;resize:none;user-select:text}
.ck{font-size:84px;font-weight:200;text-align:center;margin-top:120px}.ds{text-align:center;color:#8e8e93}
.disp{text-align:right;font-size:76px;font-weight:300;padding:10px 6px 14px;margin-top:auto;white-space:nowrap;overflow:hidden}
.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-bottom:34px}
.calc button{aspect-ratio:1;border-radius:50%;border:0;font-size:32px;background:#333;color:#fff;cursor:pointer}.calc button:active{filter:brightness(1.5)}
.calc .o{background:#ff9f0a}.calc .f{background:#a5a5a5;color:#000}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center;font-size:18px}.cal b{font-size:12px;color:#8e8e93;font-weight:600}
.cal i{font-style:normal;padding:10px 0;border-radius:50%}.cal .t{background:#ff3b30;color:#fff}
.ph{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.ph div{aspect-ratio:1}
.web{padding:0;display:flex;flex-direction:column;overflow:hidden}
.web iframe{flex:1;border:0;background:#fff}
.sb{display:flex;gap:10px;align-items:center;padding:10px 14px 30px;background:var(--card);border-top:.5px solid var(--sep)}
.sb div{flex:1;text-align:center;background:var(--vbg);border-radius:12px;padding:10px;font-size:14px}
.sb a{color:#0a84ff;text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
.bar{position:absolute;bottom:8px;left:50%;width:146px;height:6px;margin-left:-73px;background:#fff;border-radius:3px;z-index:70;cursor:pointer;box-shadow:0 0 4px rgba(0,0,0,.3)}
.screen.lt .bar{background:#000}
.bar::after{content:"";position:absolute;inset:-20px -40px}
.phone.full{width:100%;height:100%;padding:0;border-radius:0;box-shadow:none}
.full .screen{border-radius:0}.full .b,.full .island{display:none}.full .status{padding:14px 26px 0}
.ic img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== 추가: 폰 화면 안 스크롤바 숨김 (카톡 채팅방, X 홈 등 모두 적용) ===== */
.screen *{scrollbar-width:none}
.screen *::-webkit-scrollbar{display:none}

/* ===== 추가: 입력창은 글자 입력이 되도록 (Safari 검색창) ===== */
input{user-select:text;-webkit-user-select:text}

/* ===== 추가: 알림 배너 ===== */
.notif{position:absolute;top:54px;left:10px;right:10px;z-index:65;display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:24px;background:rgba(242,242,247,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:#000;box-shadow:0 10px 30px rgba(0,0,0,.3);transform:translateY(-170%);opacity:0;pointer-events:none;cursor:pointer;transition:transform .45s cubic-bezier(.3,.9,.3,1),opacity .3s}
.notif.show{transform:none;opacity:1;pointer-events:auto}
.notif img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none}
.notif .nt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.notif b{font-size:15px;font-weight:600}
.notif .nb{font-size:14px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif i{align-self:flex-start;font-style:normal;font-size:12px;color:#8e8e93;flex:none}
.screen.night .notif{background:rgba(44,44,46,.94);color:#fff}