/* =====================================================================
   1월 1일 — 폰 프레임 (삼성 One UI 8.5 순정 느낌) + 공용 컴포넌트
   ===================================================================== */
:root{
  color-scheme:light;
  --desk:#0b0b0e; --desk2:#15151b;
  --font:'Noto Sans KR','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Segoe UI',Roboto,sans-serif;
  --ink:#111; --sub:#6d7278; --line:#ececf0; --press:#f0f1f4;
  --blue:#3b82f6; --one:#1f6ff2; /* One UI 포인트 */
  --kbg:#b2c7da; --kme:#fee500; --kbub:#fff;
  --x-acc:#1d9bf0; --ig-acc:#4f5bff;
  --sl:#4a154b; --sl-bg:#f8f8f8;
  --safe-top:30px; --nav-h:44px; --sbh:30px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overflow:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (height:100dvh){html,body{height:100dvh}}
body{background:var(--desk);font-family:var(--font);color:var(--ink);overflow:hidden;
  background-image:radial-gradient(ellipse at 50% 50%,#1c1c25 0%,var(--desk) 70%)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,textarea{font:inherit}
/* 모바일: 입력칸 글자 16px 미만이면 브라우저가 확대해서 화면이 틀어짐 */
@media (max-width:760px){input,textarea,select{font-size:16px!important}}
img{max-width:100%;display:block}
.stage{height:100%;display:flex;align-items:center;justify-content:center;padding:14px}
@media (max-width:760px){.stage{padding:0}}

/* ---------- 폰 ---------- */
.phone{position:relative;width:min(400px,100vw);height:min(860px,100%);max-height:100%;flex:none;border-radius:40px;background:#0a0a0a;padding:8px;
  box-shadow:0 0 0 2px #2a2a33,0 30px 90px rgba(0,0,0,.6)}
.sw{position:relative;width:100%;height:100%;border-radius:33px;overflow:hidden;overflow:clip;background:#fff;color:var(--ink);contain:paint;isolation:isolate}
@media (max-width:760px),(max-height:600px){.phone{width:100%;height:100%;border-radius:0;padding:0;box-shadow:none}.sw{border-radius:0}}

/* 상태바 (삼성) */
.stbar{position:absolute;top:0;left:0;right:0;height:var(--safe-top);z-index:75;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px 0 18px;font-size:13.5px;font-weight:500;pointer-events:none;color:#111;transition:color .2s}
.stbar.lt{color:#fff}
.stbar .l,.stbar .r{display:flex;align-items:center;gap:7px}
#clock{font-size:14.5px;font-weight:500;letter-spacing:-.2px}
.sticons{display:flex;gap:4px;font-size:11px;opacity:.9}
.sticons i{width:13px;height:13px;border-radius:3px;display:inline-block;background:currentColor;opacity:.75}
.stbar .mute-ic{font-size:11px;filter:grayscale(1)}
.stbar .net{font-size:10px;font-weight:700;border:1.3px solid currentColor;border-radius:3px;padding:0 2px;line-height:11px}
.stbar .sig{width:14px;height:11px;background:
  linear-gradient(currentColor,currentColor) 0 100%/3px 40% no-repeat,
  linear-gradient(currentColor,currentColor) 36% 100%/3px 60% no-repeat,
  linear-gradient(currentColor,currentColor) 72% 100%/3px 80% no-repeat}
.stbar .bat{position:relative;width:34px;height:16px;border-radius:9px;background:rgba(127,127,127,.3);overflow:hidden;display:flex;align-items:center;justify-content:center}
.stbar .bat i{position:absolute;left:0;top:0;bottom:0;background:currentColor;opacity:.25}
.stbar .bat b{position:relative;font-size:10.5px;font-weight:700}

/* 화면 */
.screen{position:absolute;inset:0;background:#fff;transform:translateX(100%);transition:transform .3s cubic-bezier(.25,.8,.25,1),visibility 0s .3s;display:flex;flex-direction:column;overflow:hidden;visibility:hidden}
.screen.on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.25,.8,.25,1),visibility 0s}
.screen.sys{transition:opacity .25s,transform .25s;opacity:0;transform:scale(1.04);pointer-events:none}
.screen.sys.on{opacity:1;transform:none;pointer-events:auto}
.screen.overlay{z-index:70;transform:translateY(100%)}
.screen.overlay.on{transform:none}
/* 앱 화면은 상태바 아래에서 시작 (실제 폰처럼 상태바가 별도 영역). 앱 안의 safe-top 여백은 0으로 */
#app{z-index:10;top:var(--sbh);--safe-top:0px}

.sw:has(#callscr.on) .stbar,.sw:has(#shade.on) .stbar,.sw:has(#ending.on) .stbar,.sw:has(#intro.on) .stbar{background:transparent!important}
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{display:none}
.pad-top{padding-top:var(--safe-top)}
.pad-nav{padding-bottom:calc(var(--nav-h) + 8px)}

/* 안드로이드 내비 바 */
.navbar{position:absolute;left:0;right:0;bottom:0;height:var(--nav-h);z-index:80;display:flex;align-items:center;justify-content:space-around;padding:0 40px;
  background:#fff;pointer-events:none;transition:background .25s}
.navbar.lt{background:transparent}.navbar.lt .nb{color:#fff}
.navbar .nb{pointer-events:auto;width:56px;height:36px;display:grid;place-items:center;color:rgba(0,0,0,.7);transition:color .2s}
.navbar.lt .nb{color:#fff}
.navbar.hide{display:none}

/* ---------- 인트로 ---------- */
#intro{background:#0f0f14;color:#fff;align-items:stretch;justify-content:flex-start}
.intro-in{flex:1;overflow:auto;padding:70px 28px 60px;display:flex;flex-direction:column;gap:18px}
.intro-in h1{font-size:30px;margin:0;letter-spacing:-.5px;line-height:1.2}
.intro-in .notice{font-size:12.5px;color:#9a9aa6;line-height:1.55;background:#17171f;border:1px solid #26262f;border-radius:12px;padding:12px 14px}
.intro-in label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#b8b8c4}
.intro-in input{background:#17171f;border:1px solid #2b2b36;color:#fff;border-radius:10px;padding:12px 13px;font-size:15px;outline:none}
.intro-in input:focus{border-color:#5a7cff}
.intro-in .row{display:flex;gap:10px}
.intro-in .row label{flex:1}
.intro-in .go{margin-top:8px;background:#fff;color:#000;border-radius:14px;padding:15px;font-weight:700;font-size:16px}
.intro-in .small{font-size:12px;color:#777;text-align:center}
.intro-in .acct{display:flex;align-items:center;gap:10px;background:#17171f;border-radius:12px;padding:10px 12px}
.intro-in .acct .av{width:36px;height:36px;border-radius:50%;background:#333;display:grid;place-items:center;font-weight:700;font-size:14px}
.intro-in .acct .tx{font-size:13px;line-height:1.35}
.intro-in .acct .tx small{color:#888;display:block}
.intro-in .acct .tag{margin-left:auto;font-size:11px;color:#9ab;border:1px solid #2b2b36;border-radius:6px;padding:2px 6px}
.intro-in .dogam{display:flex;gap:6px;flex-wrap:wrap}
.intro-in .dogam span{font-size:11.5px;border:1px solid #2b2b36;border-radius:999px;padding:4px 9px;color:#8a8a96}
.intro-in .dogam span.got{border-color:#5a7cff;color:#dfe6ff}

/* ---------- 잠금화면 (One UI 8.5: 블러 알림 카드, 큰 시계) ---------- */
#lock{background:#000 center/cover no-repeat;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
#lock *{touch-action:none}
#lock .lk-top{padding:calc(var(--safe-top) + 8px) 22px 0;display:flex;flex-direction:column;align-items:flex-start;gap:0}
#lock .lk-date{font-size:16px;font-weight:500;opacity:.95}
#lock .lk-clock{font-size:76px;font-weight:600;letter-spacing:-3px;line-height:1.02;text-shadow:0 2px 20px rgba(0,0,0,.35)}
#lock .lk-clock small{font-size:44px;letter-spacing:-1px}
#lock .lk-nowbar{align-self:center;margin-top:14px;background:rgba(255,255,255,.18);backdrop-filter:blur(14px);border-radius:999px;padding:6px 14px;font-size:12.5px;display:flex;gap:8px;align-items:center}
#lock .lk-list{flex:1;overflow:hidden;scrollbar-width:none;padding:18px 14px 130px;display:flex;flex-direction:column;gap:8px}
#lock .lk-list::-webkit-scrollbar{display:none}
.lk-card{background:rgba(255,255,255,.2);border-radius:22px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.lk-card{text-align:left;width:100%}
.lk-card .ic{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:17px;font-weight:800;overflow:hidden}
.lk-card .ic img{width:100%;height:100%;object-fit:cover}
.lk-card .tx{flex:1;min-width:0}
.lk-card .tt{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600;gap:8px}
.lk-card .tt small{font-weight:400;opacity:.85;font-size:12px;flex:none}
.lk-card .bd{font-size:13px;opacity:.95;line-height:1.35;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lk-card .cnt{flex:none;background:rgba(255,255,255,.3);border-radius:999px;font-size:11px;padding:1px 7px;align-self:center}
.lk-card.group .bd{-webkit-line-clamp:3}
#lock .lk-bottom{position:absolute;left:0;right:0;bottom:calc(var(--nav-h) + 10px);display:flex;justify-content:space-between;padding:0 28px;align-items:center}
#lock .lk-bottom .sc{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(10px);display:grid;place-items:center;font-size:18px}
#lock .lk-hint{position:absolute;left:0;right:0;bottom:calc(var(--nav-h) + 64px);text-align:center;font-size:12px;opacity:.8}
#lock .lk-more{text-align:center;font-size:12.5px;opacity:.85;padding:6px}

/* ---------- 홈 ---------- */
#home{background:#dfe4ea center/cover no-repeat}
#home .hm-wrap{flex:1;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 10px) 14px 0}
#home .hm-top{margin:10px 8px 14px;display:flex;flex-direction:column;gap:3px;color:#111}
#home .hm-top b{font-size:22px;font-weight:700;letter-spacing:-.3px}
#home .hm-top span{font-size:13.5px;color:#333}
#home .hm-cal{margin:0 6px 22px;background:rgba(255,255,255,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;padding:12px 16px;display:flex;flex-direction:column;gap:7px;text-align:left;width:calc(100% - 12px)}
#home .hc-h{display:flex;align-items:baseline;gap:6px;margin-bottom:2px}
#home .hc-day{font-size:22px;font-weight:700;color:#e5342a;line-height:1}
#home .hc-dow{font-size:13px;color:#e5342a;font-weight:600}
#home .hc-t{margin-left:auto;font-size:12px;color:#555}
#home .hc-row{display:flex;align-items:center;gap:8px;font-size:13.5px}
#home .hc-row i{width:3px;height:14px;border-radius:2px;background:#1f6ff2;flex:none}
#home .hc-row.sched i{background:#e5342a}
#home .hc-row b{font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#home .hc-row span{font-size:12px;color:#666;flex:none}
#home .hc-row.none b{color:#777;font-weight:400}
#home .hm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 8px;padding:4px 6px}
.hm-app{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.hm-app .ic{width:58px;height:58px;border-radius:19px;display:grid;place-items:center;font-size:24px;font-weight:800;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.08);overflow:hidden;position:relative}
.hm-app .ic svg{width:60%;height:60%}
.hm-app .nm{font-size:12px;color:#111;text-shadow:0 0 6px rgba(255,255,255,.8)}
.hm-app .badge{position:absolute;top:-6px;right:4px;min-width:22px;height:22px;border-radius:11px;background:#e5342a;color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center;padding:0 6px;border:2px solid rgba(255,255,255,.6)}
#home .hm-dots{display:flex;justify-content:center;gap:8px;margin-top:auto;padding:10px 0 8px}
#home .hm-dots i{width:6px;height:6px;border-radius:50%;background:rgba(0,0,0,.25)}
#home .hm-dots i.on{background:#111;transform:rotate(45deg);border-radius:1px}
#home .hm-dock{margin:0 8px calc(var(--nav-h) + 8px);background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:30px;padding:12px 10px;display:flex;justify-content:space-around}
#home .hm-dock .hm-app .nm{display:none}

/* ---------- 알림창 ---------- */
#shade{position:absolute;inset:0;z-index:90;transform:translateY(-100%);transition:transform .32s cubic-bezier(.25,.8,.25,1);background:rgba(228,230,233,.96);backdrop-filter:blur(24px);color:#111}
#shade.on{transform:none}
.shade-in{height:100%;overflow-y:auto;scrollbar-width:none;padding:calc(var(--safe-top) + 2px) 14px 90px}
.sh-carrier{font-size:13px;color:#666;padding:0 6px 4px}
.shade-in::-webkit-scrollbar{display:none}
.sh-head{display:flex;justify-content:space-between;align-items:center;padding:0 6px 12px}
.sh-head .t{font-size:30px;font-weight:500;letter-spacing:-1px;display:flex;align-items:baseline}
.sh-head .t small{font-size:14px;font-weight:400;margin-left:8px;letter-spacing:0;color:#333}
.sh-head .gear{font-size:18px;color:#444}
.sh-qs{display:flex;gap:10px;padding:2px 6px 12px}
.sh-qs i{flex:1;aspect-ratio:1;max-width:52px;border-radius:50%;background:#d3d6da;display:grid;place-items:center;font-style:normal;font-size:16px;color:#8a8f96}
.sh-qs i.on{background:#1b1b1f;color:#fff}
.sh-bright{height:40px;border-radius:999px;background:#d3d6da;margin:0 6px 22px;position:relative;overflow:hidden}
.sh-bright i{position:absolute;left:0;top:0;bottom:0;width:42%;background:#1b1b1f;border-radius:999px;display:flex;align-items:center;padding-left:14px;color:#fff}
.sh-bright .dots{position:absolute;right:10px;top:0;bottom:0;display:flex;align-items:center;color:#555}
.sh-card{background:#f3f4f6;border-radius:26px;padding:14px 14px;display:flex;gap:12px;align-items:center;margin-bottom:8px}
.sh-card .ic{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;overflow:hidden}
.sh-card .ic img{width:100%;height:100%;object-fit:cover}
.sh-card .tx{flex:1;min-width:0}
.sh-card .tt{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.sh-card .tt small{font-weight:400;color:#777;font-size:12px;white-space:nowrap;flex:none}
.sh-card .tt>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-card .tt .cnt{flex:none}
.sh-card .tt .cnt{background:#9a9ea5;color:#fff;border-radius:999px;font-size:10.5px;padding:1px 7px;font-weight:600}
.sh-card .bd{font-size:13.5px;color:#333;line-height:1.4;white-space:pre-line;margin-top:2px}
.sh-card .chev{color:#555;padding:4px;display:grid;place-items:center}
.sh-foot{position:absolute;left:0;right:0;bottom:calc(var(--nav-h) + 10px);display:flex;justify-content:space-between;padding:0 16px}
.sh-foot button{background:#6f7378;color:#fff;border-radius:999px;padding:11px 22px;font-size:14px;font-weight:500}
.sh-empty{text-align:center;color:#888;font-size:13.5px;padding:30px}

/* ---------- 상단 팝업 알림(헤즈업) ---------- */
#headsup{position:absolute;left:8px;right:8px;top:6px;z-index:97;pointer-events:none}
.hu{pointer-events:auto;width:100%;text-align:left;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-radius:24px;padding:12px 14px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 10px 30px rgba(0,0,0,.18);
  transform:translateY(-130%);transition:transform .35s cubic-bezier(.25,.8,.25,1);margin-bottom:6px}
.hu.on{transform:none}
.hu .ic{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font-weight:800;color:#fff;font-size:17px;overflow:hidden}
.hu .ic img{width:100%;height:100%;object-fit:cover}
.hu .tx{flex:1;min-width:0}
.hu .tt{display:flex;justify-content:space-between;font-size:14px;font-weight:600;gap:8px}
.hu .tt small{font-weight:400;color:#777;font-size:12px;white-space:nowrap;flex:none}
.hu .tt>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hu .bd{font-size:13.5px;color:#333;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-line}

/* ---------- 토스트 / 시트 ---------- */
#toast{position:absolute;left:50%;bottom:calc(var(--nav-h) + 30px);transform:translate(-50%,20px);background:rgba(30,30,34,.92);color:#fff;font-size:13.5px;padding:10px 16px;border-radius:999px;opacity:0;transition:.25s;z-index:99;pointer-events:none;max-width:85%;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#dim{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.25s;z-index:85}
#dim.on{opacity:1;pointer-events:auto}
#sheet{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:22px 22px 0 0;transform:translateY(110%);transition:transform .3s cubic-bezier(.25,.8,.25,1);z-index:86;max-height:85%;overflow-y:auto;padding:8px 0 calc(var(--nav-h) + 14px)}
#sheet.on{transform:none}
#sheet .grab{width:40px;height:4px;border-radius:2px;background:#ccc;margin:6px auto 10px}
#sheet .sh-item{display:flex;align-items:center;gap:16px;padding:15px 22px;font-size:16px}
#sheet .sh-item:active{background:var(--press)}
#sheet .sh-item .i{width:22px;text-align:center;color:#444}
#sheet .sh-item.red{color:#e0245e}
#sheet .sh-title{font-size:18px;font-weight:700;padding:6px 22px 12px}
#sheet .sh-desc{font-size:14px;color:#555;padding:0 22px 14px;line-height:1.5}
#sheet .sh-btns{display:flex;justify-content:flex-end;gap:8px;padding:6px 22px 4px}
#sheet .sh-btns button{padding:10px 18px;font-weight:600;border-radius:999px;font-size:15px}
#sheet .sh-btns .pri{background:#111;color:#fff}
#sheet .sh-btns .sec{color:#111}
/* 안드로이드 다이얼로그(가운데) */
.dialog{position:absolute;left:24px;right:24px;top:50%;transform:translateY(-50%);background:#f3f4f6;border-radius:28px;padding:22px 22px 14px;z-index:87;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.dialog h3{margin:0 0 10px;font-size:20px;font-weight:700}
.dialog p{margin:0 0 14px;font-size:15px;line-height:1.5;color:#444}
.dialog .btns{display:flex;justify-content:flex-end;gap:6px}
.dialog .btns button{padding:10px 16px;font-weight:600;font-size:15px;border-radius:999px}
.dialog .btns button:active{background:rgba(0,0,0,.06)}

/* ---------- 공용 앱 헤더 ---------- */
.ahead{display:flex;align-items:center;gap:10px;padding:calc(var(--safe-top) + 6px) 12px 8px;border-bottom:1px solid var(--line);background:#fff;flex:none}
.ahead .back{width:36px;height:36px;display:grid;place-items:center;font-size:20px}
.ahead h1{font-size:19px;font-weight:700;margin:0;flex:1;letter-spacing:-.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ahead .act{display:flex;gap:4px}
.ahead .act button{width:36px;height:36px;display:grid;place-items:center;font-size:19px}
.ahead.noline{border-bottom:0}
.empty{color:#999;font-size:14px;text-align:center;padding:40px 20px;line-height:1.6}
.sep{height:1px;background:var(--line)}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;color:#fff;font-weight:700;flex:none;overflow:hidden;text-align:center;padding-top:.12em;box-sizing:border-box}
.av img{width:100%;height:100%;object-fit:cover}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:13px}
.chip.on{background:#111;color:#fff;border-color:#111}
.pressable:active{background:var(--press)}

/* ---------- 엔딩 ---------- */
#ending{background:#000;color:#fff;align-items:center;justify-content:center;text-align:center;padding:40px 28px}
#ending .ed-in{max-width:320px;display:flex;flex-direction:column;gap:14px;align-items:center}
#ending .ed-k{font-size:12px;letter-spacing:4px;color:#888}
#ending h1{font-size:28px;margin:0;line-height:1.3;letter-spacing:-.5px}
#ending p{font-size:14.5px;line-height:1.7;color:#cfcfd6;margin:0;white-space:pre-line}
#ending .ed-sub{font-size:13px;color:#8a8a96;border:1px solid #2a2a33;border-radius:12px;padding:10px 14px;line-height:1.6;white-space:pre-line}
#ending .ed-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:6px}
#ending .ed-stats div{background:#121218;border-radius:12px;padding:10px;font-size:12.5px;color:#aaa}
#ending .ed-stats b{display:block;color:#fff;font-size:18px;margin-top:2px}
#ending .ed-btns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;justify-content:center}
#ending .ed-btns button{background:#fff;color:#000;border-radius:999px;padding:12px 20px;font-weight:700}
#ending .ed-btns button.sec{background:#1c1c24;color:#fff}
.black{position:absolute;inset:0;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px;font-size:17px;line-height:1.8;z-index:100;opacity:0;pointer-events:none;transition:opacity .6s;white-space:pre-line}
.black.on{opacity:1;pointer-events:auto}

/* =====================================================================
   카카오톡 (Bambi 폰 이식)
   ===================================================================== */
.klist{padding-bottom:calc(var(--nav-h) + 76px)}
.li{display:flex;align-items:center;gap:12px;width:100%;padding:10px 16px;text-align:left}
.li .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.li b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klist .li b small{color:#999;font-weight:400;font-size:12px;margin-left:3px}
.li .tx span{font-size:13px;color:#777;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.li .rt{display:flex;flex-direction:column;align-items:flex-end;gap:5px;font-size:11.5px;color:#999;flex:none}
.li .cnt,.klist .cnt,.call .cnt{background:#e5342a;color:#fff;border-radius:999px;font-size:11px;padding:1px 6px;font-weight:700;min-width:18px;text-align:center}
.kav{width:38px;height:38px;border-radius:15px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;flex:none;overflow:hidden}
.kav.big{width:50px;height:50px;border-radius:19px;font-size:17px}
.kav img{width:100%;height:100%;object-fit:cover}
.ktabs{display:flex;gap:6px;padding:0 16px 8px}
.ktabs button{padding:6px 14px;border-radius:999px;font-size:13px;color:#666;background:#f1f1f1}
.ktabs button.on{background:#111;color:#fff}
.kbot{position:absolute;left:0;right:0;bottom:var(--nav-h);height:56px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center}
.kbot button{font-size:20px;opacity:.45;width:48px;height:48px}.kbot button.on{opacity:1}
.khead{background:var(--kbg);border-bottom:0}
.kroom{flex:1;display:flex;flex-direction:column;background:var(--kbg);min-height:0}
#log{flex:1;overflow-y:auto;padding:6px 10px 12px;scrollbar-width:none}
#log::-webkit-scrollbar{display:none}
.row{display:flex;gap:8px;margin-top:6px;align-items:flex-start}
.row.cont{margin-top:4px}
.row.me{justify-content:flex-end}
.row.cont .kav{visibility:hidden;height:0}
.col{display:flex;flex-direction:column;gap:3px;max-width:74%}
.name{font-size:12px;color:#3d4b58}
.row.cont .name{display:none}
.line{display:flex;align-items:flex-end;gap:5px}
.row.me .line{flex-direction:row-reverse}
.bub{padding:8px 11px;border-radius:15px;font-size:14.5px;line-height:1.45;word-break:keep-all;overflow-wrap:anywhere;background:#fff;white-space:pre-wrap}
.row.me .bub{background:var(--kme)}
.row:not(.cont):not(.me) .bub{border-top-left-radius:4px}
.row.me:not(.cont) .bub{border-top-right-radius:4px}
.meta{font-size:10.5px;color:#55626e;flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.row:not(.me) .meta{align-items:flex-start}
.meta em{font-style:normal;color:#e5b700;font-weight:700}
.date{margin:14px auto 8px;width:max-content;background:rgba(0,0,0,.12);color:#fff;font-size:12px;padding:4px 12px;border-radius:12px}
.pop{animation:pop .22s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bub.ph{padding:0;background:none!important;border-radius:14px!important;overflow:hidden}
.bub.ph div{width:170px;height:200px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,#d9dee4 0 10px,#cfd5dc 10px 20px);color:#6c737b;font-size:12.5px}
.bub.ph img{width:200px;border-radius:14px}
.bub.call{display:flex;align-items:center;gap:12px;padding:12px 16px;min-width:150px}
.bub.call.miss{color:#8a9099}
.row.typing .bub{display:flex;gap:4px;padding:12px}
.row.typing .bub i{width:6px;height:6px;border-radius:50%;background:#9aa6b2;animation:dot 1s infinite}
.row.typing .bub i:nth-child(2){animation-delay:.15s}.row.typing .bub i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{opacity:.3}30%{opacity:1}}
#kSug{display:flex;flex-wrap:nowrap;gap:6px;padding:6px 10px 2px;background:#fff;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:none;border-top:1px solid #f0f0f0}#kSug::-webkit-scrollbar{display:none}
#kSug:empty{display:none}
#kSug button{flex:none;border:1px solid #e3e3e3;background:#fff;border-radius:16px;padding:6px 12px;font-size:13px;color:#333;max-width:78%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kfoot{background:#fff;display:flex;align-items:center;gap:8px;padding:8px 10px calc(var(--nav-h) + 6px)}
.kfoot .plus{color:#777;font-size:20px;padding:0 4px}
.kin{flex:1;position:relative}
#kIn,#smsIn,#igc{width:100%;background:#f3f3f3;border:0;border-radius:18px;padding:9px 14px;font-size:14.5px;outline:none;color:#111}
.kfoot .fd{position:absolute;inset:0;display:none;align-items:center;background:#f3f3f3;border-radius:18px;padding:9px 14px;font-size:14.5px;color:#111;white-space:nowrap;overflow:hidden}
.kfoot .fd.on{display:flex}
.kfoot .fd .caret{display:inline-block;width:1.5px;height:17px;background:#2d7ff9;margin-left:1px;vertical-align:middle;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ksend{width:36px;height:36px;border-radius:50%;background:#fee500;display:grid;place-items:center;flex:none;font-size:15px;color:#3c1e1e}

/* ---------- Slack ---------- */
.slhead{background:#4a154b;color:#fff;border-bottom:0}.slhead h1,.slhead .act button,.slhead .back{color:#fff}
.slbody{background:#fff}
.slsec{font-size:12.5px;color:#777;padding:14px 16px 6px;font-weight:600}
.slrow{display:flex;align-items:center;gap:10px;width:100%;padding:10px 16px;text-align:left;flex-wrap:wrap}
.slrow .slh{color:#777;font-weight:700;width:22px}
.slrow .slav{width:22px;height:22px;border-radius:5px;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.slrow b{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
.slrow small{width:100%;padding-left:32px;color:#777;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sldot{width:8px;height:8px;border-radius:50%;background:#e01e5a;display:inline-block}
.slnav{position:absolute;left:0;right:0;bottom:var(--nav-h);height:56px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center}
.slnav button{display:flex;flex-direction:column;align-items:center;font-size:17px;color:#777;gap:2px}.slnav button small{font-size:10px}.slnav button.on{color:#111}
.sroom{flex:1;display:flex;flex-direction:column;background:#fff;min-height:0}
.srow{display:flex;gap:10px;padding:6px 14px;align-items:flex-start}
.srow.cont{padding-top:0}.srow.cont .sav{visibility:hidden;height:0}.srow.cont .sname{display:none}
.sav{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.scol{flex:1;min-width:0}
.sname{display:flex;align-items:baseline;gap:8px;font-size:14px}.sname small{color:#888;font-size:11.5px;font-weight:400}
.stx{font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:keep-all}
.sroom .kfoot{border-top:1px solid var(--line)}.sroom .ksend{background:#007a5a;color:#fff}

/* ---------- DM (X 채팅 / 인스타 DM) ---------- */
.droom{flex:1;display:flex;flex-direction:column;background:#fff;min-height:0}
.dmhead .dmc{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:14px}
.dmhead .dmname{flex:1;display:flex;flex-direction:column;line-height:1.2}.dmhead .dmname small{color:#777;font-size:12px}
.drow{display:flex;gap:8px;margin:4px 12px;align-items:flex-end}
.drow.me{justify-content:flex-end}
.drow.cont .dav{visibility:hidden}
.dav{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
.dbub{max-width:72%;padding:10px 14px;border-radius:20px;background:#efefef;font-size:14.5px;line-height:1.4;word-break:keep-all}
.drow.me .dbub{background:#1d9bf0;color:#fff}
.app-ig .drow.me .dbub{background:#4f5bff}
.droom .ksend{background:#1d9bf0;color:#fff}.app-ig .ksend{background:#4f5bff;color:#fff}
.droom .row.typing{margin-left:12px}

/* =====================================================================
   X
   ===================================================================== */
.xav{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none;overflow:hidden}
.xhead{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-top) + 6px) 14px 6px;flex:none}
.xhead .xlogo{font-weight:700;font-size:18px}
.xhead .xhr{display:flex;gap:4px}.xhead .xhr button{width:36px;height:36px;display:grid;place-items:center;font-size:18px}
.xav-btn{position:relative}
.xtabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.xtabs button{flex:1;padding:12px 0;font-size:15px;color:#536471;position:relative;font-weight:500}
.xtabs button.on{color:#0f1419;font-weight:700}
.xtabs button.on:after{content:'';position:absolute;left:50%;bottom:0;width:56px;margin-left:-28px;height:4px;border-radius:2px;background:#1d9bf0}
.xtabs.five,.xtabs.four{overflow-x:auto;scrollbar-width:none}.xtabs.five::-webkit-scrollbar{display:none}.xtabs.five button{font-size:14px;padding:10px 14px;flex:none;white-space:nowrap}.xtabs.four button{font-size:14px;padding:12px 10px;flex:1;white-space:nowrap}
.xbody{padding-bottom:calc(var(--nav-h) + 60px)}
.xbanner{background:#fff8e1;color:#7a5a00;font-size:12.5px;padding:8px 16px;border-bottom:1px solid #ffe9a8}
.tw{display:flex;gap:10px;padding:12px 16px 6px;border-bottom:1px solid var(--line);align-items:flex-start}
.tw .bd2{flex:1;min-width:0}
.tw .hh{display:flex;align-items:center;gap:5px;font-size:15px;flex-wrap:nowrap;min-width:0}
.tw .hh b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.tw .hh span{color:#536471;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.tw .hh .more{margin-left:auto;color:#536471;font-style:normal;padding:0 4px}
.tw .tx{font-size:15px;line-height:1.45;margin-top:2px;word-break:keep-all;overflow-wrap:anywhere}
.tw .ht{color:#1d9bf0}
.ims{margin-top:10px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.ims img{width:100%;display:block}
.qt{margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14px;line-height:1.4}
.qt b{font-weight:700}.qt span{color:#536471;font-size:13px}.qt div{margin-top:3px;white-space:pre-wrap}
.ac{display:flex;justify-content:space-between;margin-top:6px;padding-right:4px}
.ac button{display:flex;align-items:center;gap:4px;color:#536471;font-size:13px;padding:6px 0}
.ac button.on-lk{color:#f91880}.ac button.on-rt{color:#00ba7c}
.ac.small button{font-size:12px}
.xmuted{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:#536471;background:#f7f9f9;display:flex;gap:8px;align-items:center}
.xmuted button{margin-left:auto;color:#1d9bf0;font-size:13px;font-weight:600}
.xnav{position:absolute;left:0;right:0;bottom:var(--nav-h);height:52px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center}
.xnav button{color:#0f1419;opacity:.7;position:relative;width:56px;height:48px;display:grid;place-items:center}.xnav button.on{opacity:1}
.xnav .dot{position:absolute;top:8px;right:14px;width:8px;height:8px;border-radius:50%;background:#1d9bf0}
.xfab{position:absolute;right:16px;bottom:calc(var(--nav-h) + 66px);width:56px;height:56px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:30px;box-shadow:0 4px 14px rgba(29,155,240,.4);display:grid;place-items:center}
.xacct{gap:12px}.xacct .tx{flex:1;display:flex;flex-direction:column;line-height:1.3}.xacct .tx small{color:#536471;font-size:13px}.xacct .chk{color:#00ba7c;font-weight:700;font-size:18px}
.xbtn-o{border:1px solid #cfd9de;border-radius:999px;padding:12px;font-weight:700;font-size:15px}
/* 글쓰기 */
.xcomp{flex:1;display:flex;flex-direction:column;background:#fff}
.xch{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--safe-top) + 6px) 14px 8px}
.xch .xx{font-size:22px;width:36px;height:36px}
.xpost{background:#1d9bf0;color:#fff;border-radius:999px;padding:8px 18px;font-weight:700;font-size:15px}.xpost:disabled{opacity:.5}
.xcbody{flex:1;overflow-y:auto}
.xcrow{display:flex;gap:12px;padding:10px 16px}
#xText{flex:1;border:0;outline:none;font-size:18px;resize:none;font-family:var(--font);line-height:1.45;padding-top:8px}
.xcacct{margin:6px 16px 0 68px;font-size:12px;color:#536471;display:flex;align-items:center;gap:4px}
.xrpto{display:flex;gap:12px;padding:10px 16px 0;font-size:14px}.xrpto b{font-weight:700}.xrpto span{color:#536471}.xrptx{color:#536471;margin-top:2px;white-space:pre-wrap}.xrpl{font-size:13px;color:#536471;margin-top:4px}.xrpl span{color:#1d9bf0}
.xcfoot{border-top:1px solid var(--line);padding:10px 16px calc(var(--nav-h) + 10px)}
.xreply{color:#1d9bf0;font-size:14px;font-weight:600;display:block;margin-bottom:10px}
.xtools{color:#1d9bf0;font-size:15px;display:flex;gap:16px;align-items:center}.xcount{margin-left:auto;font-size:12px;color:#536471}
/* 상세 */
.xdet{display:flex;gap:10px;padding:12px 16px 4px;align-items:center}
.xdh{flex:1;display:flex;flex-direction:column;line-height:1.25}.xdh b{font-size:15px}.xdh span{color:#536471;font-size:14px}
.xfollow{border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;border:1px solid #cfd9de}.xfollow.dark{background:#0f1419;color:#fff;border-color:#0f1419}
.xdtx{font-size:19px;line-height:1.4;padding:6px 16px;word-break:keep-all;overflow-wrap:anywhere}
.xdmeta{padding:10px 16px;color:#536471;font-size:14px;border-bottom:1px solid var(--line)}.xdmeta b{color:#0f1419}
.xdac{display:flex;justify-content:space-around;padding:8px 10px;border-bottom:1px solid var(--line)}
.xdac button{display:flex;align-items:center;gap:5px;color:#536471;font-size:14px}.xdac button.on-lk{color:#f91880}.xdac button.on-rt{color:#00ba7c}
.xrelev{display:flex;justify-content:space-between;padding:12px 16px;font-size:14px;color:#536471;font-weight:600}
.xreply-row{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.xqlabel{font-size:12.5px;color:#536471;margin-top:2px}
.xrfoot{position:absolute;left:0;right:0;bottom:var(--nav-h);background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:8px 14px}
.xrin{flex:1;text-align:left;background:#eff3f4;border-radius:999px;padding:10px 14px;color:#536471;font-size:14px}
/* 검색 */
.xsrch{flex:1 1 auto;height:40px;max-height:40px;background:#eff3f4;border-radius:999px;padding:0 14px;display:flex;align-items:center;gap:8px;margin:0 8px;color:#536471;font-size:15px}
.xsrch input{flex:1;border:0;background:none;outline:none;font-size:15px;padding:10px 0;color:#0f1419}
.xtrhead{font-size:20px;font-weight:800;padding:14px 16px 6px}
.xtr{padding:10px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.xtr span{font-size:13px;color:#536471}.xtr b{font-size:15px}
.xglobal{margin:12px 16px;background:linear-gradient(135deg,#0b1b3a,#1b3a6b);border-radius:14px;padding:22px 16px;color:#fff;display:flex;flex-direction:column;gap:4px}
.xglobal b{font-size:20px}.xglobal span{font-size:13px;opacity:.85}
.xperson{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:center}
.xperson .tx{flex:1;display:flex;flex-direction:column;line-height:1.3}.xperson .tx span{color:#536471;font-size:13px}.xperson .tx div{font-size:14px;margin-top:2px}
/* 알림 */
.xn{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);align-items:flex-start}
.xn .xni{width:30px;display:grid;place-items:center;color:#f91880;font-weight:800;font-size:18px;flex:none}
.xn .xnb{flex:1;min-width:0;font-size:15px;line-height:1.4}
.xnavs{display:flex;gap:4px;margin-bottom:6px}.xnavs i{width:30px;height:30px;border-radius:50%;display:inline-block}
.xnq{color:#536471;font-size:14px;margin-top:4px}
/* 채팅 목록 */
.xdmrow{display:flex;gap:12px;align-items:center;padding:12px 16px;width:100%;text-align:left}
.xdmrow .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}.xdmrow .tx span{color:#536471;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.xdmrow small{color:#536471}
.xall{border:1px solid #cfd9de;border-radius:999px;padding:6px 12px;font-size:14px;white-space:nowrap}
/* 뮤트 */
.xseg{display:flex;margin:8px 16px;background:#eff3f4;border-radius:10px;padding:3px}
.xseg button{flex:1;padding:8px;font-size:13.5px;font-weight:600;color:#536471;border-radius:8px}.xseg button.on{background:#fff;color:#0f1419;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.xmcat{font-size:13px;color:#536471;padding:10px 16px 4px}
.xmrow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.xmrow .tx{flex:1;display:flex;flex-direction:column;line-height:1.3}.xmrow .tx b{font-size:16px}.xmrow .tx span{color:#536471;font-size:13px}
.xmub{border:1px solid #cfd9de;border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600}
.xmdesc{padding:20px 16px;color:#536471;font-size:14px;line-height:1.55}
.xmadd{position:absolute;left:16px;right:16px;bottom:calc(var(--nav-h) + 16px);background:#0f1419;color:#fff;border-radius:999px;padding:16px;font-weight:700;font-size:16px}
.xmin{width:100%;border:0;border-bottom:2px solid #1d9bf0;padding:10px 4px;font-size:17px;outline:none}
/* 예약 */
.xsch{flex-direction:column}.xschtime{font-size:13px;color:#536471;margin-bottom:6px}
.xschbtn{display:flex;gap:8px;margin-top:12px}.xschbtn button{flex:1;border:1px solid #cfd9de;border-radius:999px;padding:10px;font-weight:600;font-size:14px}.xschbtn button:first-child{background:#f4212e;color:#fff;border-color:#f4212e}

/* =====================================================================
   Instagram
   ===================================================================== */
.igav{border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none;overflow:hidden;font-size:13px}
.ighead{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-top) + 6px) 14px 6px;flex:none}
.ighead button{font-size:24px;width:40px;height:40px;display:grid;place-items:center}
.ighead .r{display:flex;gap:2px}
.iglogo{font-family:"Brush Script MT","Snell Roundhand",cursive;font-size:30px;font-weight:600;letter-spacing:-.5px}
.igheartb{position:relative}.igbadge{position:absolute;top:30px;right:-6px;background:#ff3040;color:#fff;font-size:12px;font-style:normal;border-radius:14px;padding:3px 8px;white-space:nowrap}
.igbody{padding-bottom:calc(var(--nav-h) + 60px)}
.igstories{display:flex;gap:14px;padding:6px 12px 10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.igstories::-webkit-scrollbar{display:none}
.igst{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;width:74px}
.igst .ring{padding:3px;border-radius:50%;background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);position:relative}
.igst .ring.none{background:#ddd}
.igst .ring .igav{border:2.5px solid #fff}
.igst .ring i{position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:#1b1b1b;color:#fff;font-style:normal;font-size:16px;display:grid;place-items:center;border:2px solid #fff}
.igst span{font-size:11.5px;color:#333;max-width:74px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.igpost{border-bottom:1px solid var(--line);padding-bottom:10px}
.igph{display:flex;align-items:center;gap:10px;padding:10px 12px}
.igph b{font-size:14px}.igph span{font-size:12px;color:#555;margin-left:-6px}.igph .more{margin-left:auto;font-style:normal}
.igimg{width:100%;aspect-ratio:4/5;display:grid;place-items:center;color:rgba(255,255,255,.6);font-size:14px;overflow:hidden}
.igimg img{width:100%;height:100%;object-fit:cover}
.igac{display:flex;gap:14px;padding:8px 12px 4px}.igac button{display:grid;place-items:center}.igac .r{margin-left:auto}
.iglk{padding:0 12px;font-size:14px}.iglk b{font-weight:700}
.igcap{padding:4px 12px;font-size:14px;line-height:1.45;word-break:keep-all}.igcap b{font-weight:700;margin-right:4px}
.igcmts{padding:2px 12px;color:#777;font-size:14px;text-align:left}
.igtime{padding:2px 12px;color:#999;font-size:12px}
.ignav{position:absolute;left:0;right:0;bottom:var(--nav-h);height:52px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center}
.ignav button{position:relative;width:52px;height:48px;display:grid;place-items:center;color:#111;opacity:.75}.ignav button.on{opacity:1}
.ignav .dot{position:absolute;top:6px;right:8px;background:#ff3040;color:#fff;font-size:10px;font-style:normal;border-radius:10px;padding:1px 5px}
.igcmhead{text-align:center;padding:calc(var(--safe-top) + 6px) 0 10px;border-bottom:1px solid var(--line)}
.igcmhead .grab{width:40px;height:4px;border-radius:2px;background:#ccc;margin:0 auto 10px}
.igcmlist{padding:4px 12px}
.igcm{display:flex;gap:10px;padding:10px 0;align-items:flex-start}
.igcm .tx{flex:1;font-size:14px;line-height:1.4}.igcm .tx b{font-size:13px}.igcm .tx small{color:#777;font-weight:400;margin-left:4px}.igcm .rp{color:#777;font-size:12px;display:block;margin-top:3px}
.igcm .h{color:#999;font-size:14px;padding-top:6px}
.igemoji{display:flex;justify-content:space-around;padding:8px 10px 0;background:#fff;border-top:1px solid var(--line)}.igemoji button{font-size:24px}
.igstory{position:absolute;inset:0;color:#fff;display:flex;flex-direction:column}
.igsbar{display:flex;gap:4px;padding:calc(var(--safe-top) + 6px) 10px 0}.igsbar i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.4)}.igsbar i:first-child{background:#fff}
.igsh{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:14px}.igsh span{opacity:.8;font-size:13px}.igsh .x{margin-left:auto;font-size:22px;color:#fff}
.igstx{flex:1;display:grid;place-items:center;text-align:center;font-size:26px;font-weight:700;line-height:1.4;padding:30px;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.igsfoot{display:flex;align-items:center;gap:14px;padding:12px 14px calc(var(--nav-h) + 14px)}.igsin{flex:1;border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:12px 16px;font-size:14px}.igsfoot span{font-size:24px}
.igcam{position:absolute;inset:0;background:#000;color:#fff;display:flex;flex-direction:column}
.igch{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--safe-top) + 6px) 14px 8px;font-size:16px}.igch .x{font-size:24px;color:#fff}
.igcamview{flex:1;position:relative;background:#111;overflow:hidden}
.igcamview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.igcamhint,.camhint{position:absolute;left:0;right:0;top:45%;text-align:center;color:#aaa;font-size:14px}
.igcambar{display:flex;justify-content:center;padding:14px}
.igshutter,.igshutter:active{width:72px;height:72px;border-radius:50%;border:5px solid #fff;background:transparent}
.igcamtabs{display:flex;justify-content:center;gap:22px;padding:4px 0 calc(var(--nav-h) + 10px);font-size:14px;color:#aaa}.igcamtabs b{color:#fff}
.igedtools{position:absolute;right:12px;top:calc(var(--safe-top) + 10px);display:flex;flex-direction:column;gap:10px}.igedtools span{width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.45);display:grid;place-items:center;font-size:16px}
.igstcap{position:absolute;left:14px;right:14px;bottom:14px;background:none;border:0;color:#fff;font-size:16px;outline:none}
.igstbtns{display:flex;gap:8px;padding:12px 14px calc(var(--nav-h) + 14px);align-items:center}
.igstbtns button{flex:1;background:#262626;color:#fff;border-radius:999px;padding:12px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px}
.igstbtns button.on{outline:2px solid #fff}.igstbtns .go{flex:none;width:48px;height:48px;background:#4f5bff;font-size:22px}
.igcapin{width:calc(100% - 32px);margin:0 16px;border:0;font-size:15px;outline:none;resize:none;font-family:var(--font);padding:8px 0}
.igopt{display:flex;justify-content:space-between;padding:14px 16px;border-top:1px solid var(--line);font-size:15px}
.igshare{position:absolute;left:16px;right:16px;bottom:calc(var(--nav-h) + 14px);background:#4f5bff;color:#fff;border-radius:14px;padding:16px;font-weight:700;font-size:16px}
.igsec{font-size:15px;font-weight:700;padding:14px 16px 6px}
.igact{display:flex;gap:12px;align-items:center;padding:8px 16px}.igact .tx{flex:1;font-size:14px;line-height:1.4}.igact .tx small{color:#777}
.igfollow{background:#4f5bff;color:#fff;border-radius:8px;padding:8px 14px;font-weight:600;font-size:13px}
.igthumb{width:44px;height:44px;border-radius:6px}
.igsrch{margin:0 14px 10px;background:#efefef;border-radius:12px;padding:10px 14px;color:#777;font-size:14px}
.ignotes{display:flex;gap:14px;padding:16px 16px 6px;overflow-x:auto;scrollbar-width:none}
.ignote{display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;flex:none;padding-top:28px}
.ignote i{position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.15);border-radius:14px;padding:6px 10px;font-size:11px;font-style:normal;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.ignote span{font-size:12px;color:#555}
.igdmrow{display:flex;gap:12px;align-items:center;padding:10px 16px;width:100%;text-align:left}
.igdmrow .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}.igdmrow .tx span{color:#777;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.igdmrow .tx span.un{color:#111;font-weight:600}
.igdot{width:9px;height:9px;border-radius:50%;background:#4f5bff}
.iggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.iggrid div{aspect-ratio:1}
.igprof{display:flex;align-items:center;gap:18px;padding:14px 16px}
.igstat{text-align:center;flex:1;display:flex;flex-direction:column}.igstat b{font-size:18px}.igstat span{font-size:12.5px;color:#555}
.igbio{padding:0 16px 10px;font-size:14px;line-height:1.5}
.igbtns{display:flex;gap:8px;padding:0 16px 14px}.igbtns button{flex:1;background:#efefef;border-radius:8px;padding:9px;font-weight:600;font-size:14px}
.igtabs{display:flex;border-bottom:1px solid var(--line)}.igtabs span{flex:1;text-align:center;padding:10px;font-size:18px;color:#999}.igtabs span.on{color:#111;border-bottom:1.5px solid #111}

/* =====================================================================
   뉴스 · 더쿠 · bubble · 메모 · 캘린더 · 갤러리 · 설정 · 전화 · 메일 · 문자 · Weverse
   ===================================================================== */
.ntabs,.ctabs2{display:flex;gap:16px;padding:0 16px 10px;border-bottom:1px solid var(--line);font-size:15px;color:#777}.ntabs span.on,.ctabs2 span.on{color:#111;font-weight:700;border-bottom:2px solid #111;padding-bottom:6px}
.nrow{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left;align-items:center}
.nrow .tx{flex:1;display:flex;flex-direction:column;gap:5px}.nrow b{font-size:15px;line-height:1.4;font-weight:600}.nrow small{color:#888;font-size:12px}
.nrow img,.nthumb{width:84px;height:62px;object-fit:cover;border-radius:6px;background:#eee;flex:none}
.nart{padding:0 18px 40px}.nart h2{font-size:21px;line-height:1.35;margin:14px 0 8px;letter-spacing:-.3px}
.nmeta{color:#888;font-size:12.5px;margin-bottom:14px}.nimg{border-radius:8px}.ncap{font-size:11.5px;color:#999;margin:6px 0 14px}
.nart p{font-size:15.5px;line-height:1.75;margin:0 0 16px;word-break:keep-all}
.ncm{border-top:8px solid #f3f3f3;margin:10px -18px 0;padding:16px 18px}.ncm>b{font-size:15px}
.ncmtabs{display:flex;gap:12px;font-size:13px;color:#888;margin:10px 0}.ncmtabs .on{color:#03c75a;font-weight:700}
.ncmrow{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}.ncmrow b{font-size:13px;color:#555}.ncmrow small{color:#999;display:block;margin-top:4px}
.chead{background:#1b1b1b;color:#fff;border-bottom:0}.chead h1,.chead .back,.chead .act button{color:#fff}
.crow{display:flex;padding:12px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.crow .tx{display:flex;flex-direction:column;gap:4px}.crow b{font-size:15px;font-weight:500;line-height:1.4}.crow i{font-style:normal;color:#e5342a;font-size:13px}.crow small{color:#888;font-size:12px}
.cpost{padding:0 16px 40px}.cpost h2{font-size:18px;line-height:1.4;margin:14px 0 6px}.cmeta{color:#888;font-size:12.5px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cbody{font-size:15px;line-height:1.75;padding:16px 0;word-break:keep-all}
.cvote{display:flex;gap:8px;justify-content:center;padding:10px 0 16px}.cvote button{border:1px solid var(--line);border-radius:8px;padding:8px 18px;font-size:14px}
.ccm{border-top:8px solid #f3f3f3;margin:0 -16px;padding:14px 16px}.ccm>b{font-size:14px}
.ccmrow{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.45}.ccmrow b{font-size:12.5px;color:#888}
.mmlist{padding:0 0 80px}.mmrow{display:flex;flex-direction:column;gap:4px;padding:14px 20px;border-bottom:1px solid var(--line);width:100%;text-align:left}.mmrow b{font-size:16px;font-weight:600}.mmrow small{color:#888;font-size:13px}
.mmedit{padding:10px 20px 40px;display:flex;flex-direction:column;gap:8px}.mmedit input{border:0;font-size:22px;font-weight:700;outline:none}.mmedit small{color:#888;font-size:12px}.mmedit textarea{border:0;outline:none;font-size:16px;line-height:1.7;min-height:400px;resize:none;font-family:var(--font)}
.mfab{position:absolute;right:18px;bottom:calc(var(--nav-h) + 18px);width:56px;height:56px;border-radius:18px;background:#2b78e4;color:#fff;font-size:22px;box-shadow:0 4px 12px rgba(0,0,0,.2);display:grid;place-items:center}
.calbody{padding:0 16px 30px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px 0;text-align:center;font-size:13px;padding:6px 0 14px;border-bottom:1px solid var(--line)}
.calgrid span{color:#888;font-size:12px}.calgrid span:first-child{color:#e74c3c}.calgrid b{font-weight:400;padding:6px 0}.calgrid b.today{background:#1f6ff2;color:#fff;border-radius:50%;width:30px;height:30px;display:inline-grid;place-items:center;font-weight:700;padding:0}
.calsec{font-size:14px;font-weight:700;padding:16px 0 8px}
.calrow{display:flex;gap:14px;padding:10px 6px;border-left:3px solid #1f6ff2;margin:0 0 8px;font-size:14px;align-items:center}.calrow span{color:#777;font-size:12.5px;width:70px;flex:none}.calrow.sched{border-color:#e74c3c}
.phsec{font-size:13px;color:#777;padding:12px 16px 6px}
.phgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.phgrid div{aspect-ratio:1;background:#ddd;overflow:hidden;position:relative}.phgrid img{width:100%;height:100%;object-fit:cover}.phgrid .cap span{position:absolute;left:6px;bottom:4px;font-size:10px;color:#fff;background:rgba(0,0,0,.5);border-radius:4px;padding:1px 5px}
.phtabs{position:absolute;left:0;right:0;bottom:var(--nav-h);height:50px;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;align-items:center;font-size:14px;color:#777}.phtabs .on{color:#111;font-weight:700}
.camfull{position:absolute;inset:0;background:#000}.camfull video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cambar{position:absolute;left:0;right:0;bottom:calc(var(--nav-h) + 20px);display:flex;justify-content:space-around;align-items:center}.camx,.camflip{color:#fff;font-size:22px;width:48px;height:48px}
.stlist{padding-bottom:30px}.stsec{font-size:13px;color:#1f6ff2;font-weight:600;padding:18px 20px 6px}
.strow{display:flex;align-items:center;gap:14px;padding:12px 20px;width:100%;text-align:left}.strow>span{width:28px;text-align:center;font-size:18px}.strow .tx{flex:1;display:flex;flex-direction:column;line-height:1.3}.strow .tx b{font-size:16px;font-weight:500}.strow .tx small{color:#777;font-size:13px}
.tg{width:44px;height:24px;border-radius:12px;background:#ccc;position:relative}.tg:after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff}.tg.on{background:#1f6ff2}.tg.on:after{left:22px}
.call .li .tx b{font-size:15px;font-weight:500}.call .li .tx b.miss{color:#e5484d}.call .li .tx span{font-size:12.5px;color:#888}.call .li .rt{font-size:12px}
.ctabs{position:absolute;left:0;right:0;bottom:var(--nav-h);display:flex;border-top:1px solid var(--line);padding:6px 0;background:#fff}
.ctabs button{flex:1;font-size:12.5px;color:#8a9099;padding:6px 0}.ctabs button.on{color:#2ecc71;font-weight:700}
.cseg{display:flex;margin:6px 16px 4px;background:#eef0f2;border-radius:9px;padding:2px}
.cseg button{flex:1;border-radius:7px;padding:6px;font-size:13px;font-weight:600;color:#555}.cseg button.on{background:#fff;color:#111;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.dpad{display:grid;grid-template-columns:repeat(3,72px);gap:16px 26px;justify-content:center;padding:10px 0}
.dpad button{width:72px;height:72px;border-radius:50%;background:#eef0f2;font-size:28px;color:#111}
.dnum{text-align:center;font-size:32px;min-height:46px;padding-top:24px;letter-spacing:.04em}
.dcall{display:block;margin:6px auto 0;width:72px;height:72px;border-radius:50%;background:#2ecc71;display:grid;place-items:center}
#callscr{background:linear-gradient(180deg,#2c3340,#121418);color:#fff;align-items:center;padding-top:var(--safe-top)}
#callscr.in{background:linear-gradient(180deg,#3a2f45,#121418)}
.cl-who{margin-top:70px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.cl-av{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:34px;font-weight:700;color:#fff}
.cl-who b{font-size:26px}.cl-who span{font-size:15px;color:#b8c0cc;font-variant-numeric:tabular-nums}
.cl-cap{margin:18px 0 0;padding:0 26px;width:100%;flex:1;min-height:0;text-align:center;font-size:17px;line-height:1.5;color:#eef1f6;overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 22%);mask-image:linear-gradient(transparent,#000 22%)}
.cl-cap::-webkit-scrollbar{display:none}
.cl-cap .cl-pad{height:100%}
.cl-cap p{margin:0 0 7px;font-size:14.5px;opacity:.45}
.cl-cap p.me{color:#ffe27a;opacity:.6}
.cl-cap p.bg{color:#b9c3d6;font-style:italic}.cl-cap p.bg small{display:block;font-size:11px;font-style:normal;opacity:.7;margin-bottom:1px}
.cl-cap p.cur{opacity:1;font-size:17px;font-weight:500;animation:popm .3s ease-out}
.cl-cap i{font-style:normal;display:block;opacity:.5;font-size:14px}
.cl-av{transition:box-shadow .2s}.cl-av.talk{animation:cltalk 1.4s ease-in-out infinite}
@keyframes cltalk{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.28)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.cl-deck{position:relative;flex:none;margin-top:18px;width:100%;display:flex;justify-content:center}
.cl-btns{display:grid;grid-template-columns:repeat(3,72px);gap:18px 30px;transition:opacity .2s,transform .2s}
.cl-btns button{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:22px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cl-btns button.on{background:#fff;color:#111}.cl-btns small{font-size:10px;margin-top:2px}
.cl-opts{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 22px;overflow-y:auto;opacity:0;pointer-events:none;transform:translateY(14px);transition:opacity .2s,transform .2s}
.cl-opts button{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:14px;padding:12px 14px;font-size:14.5px;text-align:left;line-height:1.4;flex:none}
#callscr.ask .cl-opts{opacity:1;pointer-events:auto;transform:none}
#callscr.ask .cl-btns{opacity:0;pointer-events:none;transform:translateY(14px)}
.cl-end{width:72px;height:72px;flex:none;border-radius:50%;background:#ff3b30;display:grid;place-items:center;margin:22px 0 calc(var(--nav-h) + 18px)}
.in-btns{margin-top:auto;margin-bottom:calc(var(--nav-h) + 40px);display:flex;gap:110px}
.in-btns button{color:#fff;font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px}
.in-btns i{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:28px}
#inYes i{animation:ring 1.1s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(14deg)}60%{transform:rotate(-8deg)}}
.mlist .mrow{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.mrow .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.mrow .mt{display:flex;justify-content:space-between;font-size:14px}.mrow .mt small{color:#888;font-size:12px}.mrow .ms{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mrow .mp{font-size:13px;color:#888;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow.unread .ms,.mrow.unread .mt b{font-weight:700}.mrow:not(.unread) .mt b{font-weight:500}
.mread{padding:0 18px 40px}.mread h2{font-size:19px;line-height:1.4;margin:14px 0 12px}
.mfrom{display:flex;gap:12px;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}.mfrom div{display:flex;flex-direction:column}.mfrom small{color:#888;font-size:12px}
.mbody{font-size:14.5px;line-height:1.75;word-break:keep-all}
.mact{display:block;width:100%;margin-top:20px;background:#111;color:#fff;border-radius:12px;padding:14px;font-weight:700}
.mnote{margin-top:20px;font-size:13px;color:#888;background:#f7f7f7;border-radius:10px;padding:10px 12px}
.smsbody{padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.srow2{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.srow2.me{align-items:flex-end}
.sbub{max-width:80%;background:#efefef;border-radius:18px;border-bottom-left-radius:4px;padding:10px 14px;font-size:14.5px;line-height:1.45}.srow2.me .sbub{background:#3f8cff;color:#fff;border-radius:18px;border-bottom-right-radius:4px}
.srow2 small{font-size:11px;color:#999;padding:0 4px}
.wvhead{background:#00d9b8;border-bottom:0}.wvhead h1 small{font-size:12px;font-weight:400;opacity:.7}
.wvbody{padding-bottom:100px}
.wvcard{margin:14px 16px;background:linear-gradient(135deg,#0ff0d0,#00b894);border-radius:16px;padding:18px;color:#003b33;display:flex;flex-direction:column;gap:4px}.wvcard b{font-size:18px}.wvcard span{font-size:12.5px}
.wvsec{font-size:14px;font-weight:700;padding:14px 16px 6px}
.wvrow{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}.wvrow b{font-size:14.5px;font-weight:500}.wvrow small{color:#888;font-size:12px}
.wvbtn{position:absolute;left:16px;right:16px;bottom:calc(var(--nav-h) + 16px);background:#111;color:#fff;border-radius:999px;padding:16px;font-weight:700;font-size:16px}
.wvtpl{display:block;width:calc(100% - 32px);margin:0 16px 10px;border:1px solid var(--line);border-radius:14px;padding:14px;text-align:left}
.wvtpl b{display:block;font-size:14px;margin-bottom:6px;color:#00846f}.wvtpl div{font-size:13.5px;line-height:1.6;color:#333}
.wvnote{font-size:12.5px;color:#888;padding:6px 16px 20px}
/* 어두운 전체화면 앱 위에서는 내비바도 어둡게 */
#app.on:has(.igcam,.camfull,.igstory,.xdark) ~ .navbar,#callscr.on ~ .navbar{background:#000}
#app.on:has(.igcam,.camfull,.igstory,.xdark) ~ .navbar .nb,#callscr.on ~ .navbar .nb{color:#fff}

/* X 프로필 */
.xprof{flex:1;padding-bottom:calc(var(--nav-h) + 60px)}
.xpban{height:110px;position:relative}
.xpback{position:absolute;top:calc(var(--safe-top) + 4px);left:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;display:grid;place-items:center}
.xptop{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;padding:0 16px;margin-top:-38px}
.xpav .xav{border:4px solid #fff}
.xpname{padding:8px 16px 0;display:flex;flex-direction:column;line-height:1.3}.xpname b{font-size:20px;font-weight:800}.xpname span{color:#536471;font-size:15px}
.xpbio{padding:8px 16px 0;font-size:15px;line-height:1.45}
.xpmeta{padding:10px 16px 0;color:#536471;font-size:14px;display:flex;align-items:center;gap:4px}
.xpcnt{padding:10px 16px 6px;display:flex;gap:18px;font-size:14px;color:#536471}.xpcnt b{color:#0f1419;font-weight:700}
.xpfol{display:flex;align-items:center;gap:8px;padding:4px 16px 10px;flex-wrap:wrap}.xpfol button{display:flex;align-items:center;gap:6px;font-size:13px;background:#eff3f4;border-radius:999px;padding:4px 10px 4px 4px}.xpfol small{color:#536471;font-size:12px;width:100%}
.sh-sep{height:1px;background:var(--line);margin:4px 0}
/* 브라우저 바 */
.brbar{display:flex;align-items:center;gap:8px;margin:calc(var(--safe-top) + 6px) 12px 4px;background:#f1f3f5;border-radius:999px;padding:9px 14px;font-size:13.5px;color:#333}
.brbar .brurl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brbar .brtabs{border:1.5px solid #555;border-radius:5px;font-size:11px;padding:0 5px;font-weight:700}.brbar .brlock{font-size:11px}

.ksec{font-size:12.5px;color:#888;padding:12px 16px 4px}
.kbot{justify-content:space-around}

/* 캘린더 (원빈 폰 이식) */
.cal{padding:0 12px;flex:none}
.cal .wk,.cal .days{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.cal .wk span{font-size:11.5px;color:#888;padding:6px 0}
.cal .wk span:first-child,.cal .days .sun{color:#e5484d}
.cal .days span{aspect-ratio:1}
.cal .days button{aspect-ratio:1;font-size:14px;border-radius:50%;position:relative;font-variant-numeric:tabular-nums;margin:1px}
.cal .days button.today{background:#111;color:#fff}
.cal .days button.sel{box-shadow:inset 0 0 0 2px #1f6ff2}
.cal .days button i{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;gap:2px}
.cal .days button i b{width:5px;height:5px;border-radius:50%;display:block}
.evs{padding:14px 16px 30px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);margin-top:8px}
.evs h5{margin:0 0 2px;font-size:13px;color:#666;font-weight:600}
.ev{display:flex;gap:10px;align-items:stretch;font-size:14px}
.ev i{width:4px;border-radius:2px;flex:none}
.ev div{flex:1}
.ev time{font-size:12px;color:#888;flex:none}
.ev.sched div{font-weight:600}
.evs .none{color:#999;font-size:14px;padding:10px 0}
.intro-in input{width:100%;min-width:0;box-sizing:border-box}
.intro-in .row label{min-width:0}
.qt.cap{background:#f7f9f9;border-style:dashed}.qt .caplabel{display:block;font-size:11px;color:#536471;margin-bottom:4px}

/* 작은 화면 대응 */
#intro{overflow-y:auto;scrollbar-width:none}#intro::-webkit-scrollbar{display:none}
#home .hm-wrap{min-height:0}
#home .hm-grid{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;align-content:start}
@media (max-height:720px){.hm-app .ic{width:50px;height:50px;border-radius:16px}#home .hm-grid{gap:14px 8px}#home .hm-cal{margin-bottom:12px}#home .hm-top{margin-bottom:8px}.lk-clock{font-size:60px!important}}
#app>.xsrch,.xchatsrch{flex:none!important;margin:4px 14px 8px}
.xhead .xhr .xall{margin-right:0}
.hm-dock .hm-app .badge{top:-6px;right:-8px}

/* Teams */
.tmhead{background:#fff;border-bottom:1px solid var(--line)}.tmhead h1{font-size:18px}
.tmav{width:30px;height:30px;border-radius:50%;background:#5b5fc7;color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;margin-right:4px}
.slrow .slav{width:36px;height:36px;border-radius:50%;font-size:13px}
.slrow small.slmeta{display:inline;width:auto;padding:0;color:#999;font-size:12px;font-weight:400;margin-left:4px}
.slnav button.on{color:#5b5fc7}
.sroom .ksend{background:#5b5fc7}
.sldot{background:#c4314b}

/* 홈 폴더 */
.hm-app .ic.fold{background:rgba(255,255,255,.55);display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px}
.hm-app .ic.fold i{border-radius:7px;display:grid;place-items:center;overflow:hidden}
.hm-app .ic.fold i svg{width:70%;height:70%}.hm-app .ic.fold i b{font-size:9px}
.hm-fold{position:absolute;inset:0;z-index:30;display:none;flex-direction:column;align-items:center;background:rgba(200,202,205,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:calc(var(--safe-top) + 90px)}
.hm-fold.on{display:flex}
.hf-in{width:82%;height:60%;background:rgba(235,236,238,.9);border-radius:34px;padding:34px 14px 20px;animation:pop .2s ease-out}
.hf-title{position:absolute;top:calc(var(--safe-top) + 20px);left:0;right:0;text-align:center;font-size:34px;font-weight:400;color:#fff;letter-spacing:-.5px}
.hf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 6px}
.ims.ph{height:220px;background:linear-gradient(135deg,#d9dee4,#c3c9d1);display:grid;place-items:center;color:#6c737b;font-size:13px}

.slsearch{margin:2px 14px 8px;height:38px;border-radius:8px;background:#f0f0f4;display:flex;align-items:center;gap:8px;padding:0 12px;color:#777;font-size:14px;flex:none}.slsearch svg{width:16px;height:16px}
.slnav{height:60px}.slnav button{font-size:20px;flex:1}.slnav button.on small{font-weight:700}

.slrow{display:grid;grid-template-columns:44px 1fr;column-gap:12px;row-gap:1px;align-items:center;padding:9px 16px}
.slrow .slav{grid-row:1/3;width:44px;height:44px}
.slrow b{grid-column:2;min-width:0}
.slrow small{grid-column:2;width:auto;padding-left:0;font-size:13px}
.slrow small.slmeta{display:inline}

.hm-app .ic.fold{width:58px;height:58px;box-sizing:border-box;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;padding:8px;background:rgba(255,255,255,.6)}.hm-app .ic.fold i{border-radius:5px;display:block;width:auto;height:auto}
@media (max-height:720px){.hm-app .ic.fold{width:50px;height:50px;padding:7px;gap:3px}}
.hm-app .ic.fold{place-items:stretch}.hm-app .ic.fold i{min-width:0;min-height:0}
.hm-app .ic.fold{align-content:stretch;grid-auto-rows:1fr}.hm-app .ic.fold i{width:100%!important;height:100%!important;border-radius:5px!important;aspect-ratio:1}
.hm-app .ic.fold{padding:7px;gap:3px}.hm-app .ic.fold i{border-radius:3px!important}
.hm-app .ic.fold{padding:6px;gap:3px;align-content:center}.hm-app .ic.fold i{border-radius:4px!important;width:100%!important;height:auto!important;aspect-ratio:1/1}

.wvchk{margin:0 16px 12px;background:#fff;border-radius:14px;padding:6px 14px}.wvck{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;color:#888}.wvck i{width:20px;height:20px;border-radius:50%;border:2px solid #ccc;display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;flex:none}.wvck.ok{color:#111}.wvck.ok i{background:#2eb872;border-color:#2eb872}.wvtpl.dim{opacity:.4}

.sticons{gap:5px;margin-left:5px;align-items:center}.sticons .sg{width:13px;height:13px;background:none;opacity:1;border-radius:0;display:grid;place-items:center}.sticons .sg svg{width:13px;height:13px;fill:currentColor}.sticons .dot{width:4px;height:4px;border-radius:50%}


/* 메시지 앱 (삼성 메시지 스타일) */
.smshead{padding-bottom:4px}
.smslist{padding:0 14px 90px}
.smssum{margin:6px 6px 14px;padding:22px 16px;border-radius:26px;background:#f3f3f3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}
.smssum b{font-size:17px}.smssum small{color:#667;font-size:13px}
.smssum button{margin-top:10px;background:#d9d9dc;border-radius:999px;padding:9px 26px;font-weight:600;font-size:14px}
.smstabs{display:flex;gap:8px;padding:2px 4px 10px}
.smstabs button{padding:8px 16px;border-radius:999px;font-size:14px;color:#556}.smstabs button.on{background:#e8e8ec;color:#111;font-weight:700}
.smsrow{display:flex;align-items:center;gap:14px;width:100%;padding:12px 6px;text-align:left;border-bottom:1px solid #f0f0f2}
.smsav{width:50px;height:50px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:18px}
.smsav svg{width:26px;height:26px}
.smsrow .tx{flex:1;min-width:0}.smsrow .tx b{display:block;font-size:16px}.smsrow .tx span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#667;font-size:14px;line-height:1.35}
.smsrow .rt{display:flex;flex-direction:column;align-items:flex-end;gap:6px;color:#889;font-size:12.5px;align-self:flex-start;padding-top:2px;flex:none}
.smsbd{background:#444;color:#fff;border-radius:50%;width:20px;height:20px;display:grid;place-items:center;font-size:12px;font-style:normal;font-weight:700}

/* Teams 모바일 채팅 */
.sroom{background:#fff}
.sroom .date{align-self:stretch;width:auto;margin:14px 16px 6px;padding:0;background:none;border-radius:0;display:flex;align-items:center;gap:12px;font-size:12px;color:#616161}
.sroom .date::before,.sroom .date::after{content:'';flex:1;height:1px;background:#e1e1e1}
.tmroomhead{display:flex;align-items:center;gap:10px;padding-left:10px;padding-right:10px;padding-bottom:8px;border-bottom:1px solid #e6e6e6}
.tmroomhead .back{flex:none}
.tmhav{width:34px;height:34px;border-radius:50%;background:#3b3b3b;color:#fff;display:grid;place-items:center;font-weight:700;flex:none}
.tmhtx{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}.tmhtx b{font-size:16px}.tmhtx small{color:#707070;font-size:12px}
.tmroomhead .act{display:flex;gap:14px;color:#444}
.tmrow{display:flex;gap:10px;padding:5px 12px;align-items:flex-end}
.tmrow.me{justify-content:flex-end;align-items:center;gap:6px}
.tmrow.cont{padding-top:1px}.tmrow.cont .tmav{visibility:hidden}.tmrow.cont .tmname{display:none}
.tmav{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.tmcol{display:flex;flex-direction:column;gap:3px;max-width:76%}
.tmname{font-size:12px;color:#616161;padding-left:2px}
.tmbub{background:#f0f0f0;border-radius:8px;padding:9px 12px;font-size:15px;line-height:1.4;color:#242424;word-break:break-word}
.tmrow.me .tmbub{background:#5b5fc7;color:#fff;max-width:76%}
.tmeye{flex:none;opacity:.8}
.tmfoot{display:flex;align-items:center;gap:8px;padding:8px 10px calc(var(--nav-h) + 6px);border-top:1px solid #e6e6e6;background:#fff}
.tmfoot .kin{flex:1;display:flex;align-items:center;background:#f5f5f5;border-radius:999px;padding:0 6px 0 14px}
.tmfoot input{flex:1;border:0;background:transparent;padding:10px 0;font-size:15px;outline:none}
.tmplus{width:30px;height:30px;border-radius:50%;background:#5b5fc7;color:#fff;font-size:20px;line-height:1;flex:none}
.tmic{color:#616161;display:grid;place-items:center;width:34px;height:34px;flex:none}
.tmfoot .ksend{display:none;background:transparent;color:#5b5fc7}
.tmfoot.typing .ksend{display:block}.tmfoot.typing [data-tmt=mic]{display:none}
/* 앱 내 설정 */
.apset{background:#fff;padding-bottom:calc(var(--nav-h) + 20px)}
.apsec{padding:16px 18px 6px;font-size:12.5px;color:#888;font-weight:600}
.aprow{width:100%;display:flex;align-items:center;gap:10px;padding:13px 18px;text-align:left;border-bottom:1px solid #f1f1f1}
.aprow .apt{flex:1;display:flex;flex-direction:column;gap:2px}.aprow b{font-weight:500;font-size:15px}.aprow span{font-size:12px;color:#999}
.aprow em{font-style:normal;color:#aaa;font-size:13px}
.aptog{width:42px;height:24px;border-radius:12px;background:#ccc;position:relative;flex:none;transition:.2s}.aptog u{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.aptog.on{background:#2d7ff9}.aptog.on u{left:20px}
/* 하단 네비바에 목록 끝이 가려지지 않게 (뒤에 바가 없는 스크롤 영역) */
#app > .scroll:last-child::after{content:'';display:block;height:calc(var(--nav-h) + 12px);flex:none}
.mlist,.call,.stlist{padding-bottom:calc(var(--nav-h) + 12px)}
.intro-in > *{flex:none}
.intro-in{min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
#pullzone{position:absolute;top:0;left:0;right:0;height:44px;z-index:95;touch-action:none}
.xfbm{display:inline-block;font-style:normal;font-size:11.5px;color:#536471;background:#eff3f4;border-radius:4px;padding:1px 6px;margin-left:6px}
.xpinl{padding:8px 16px 0;font-size:12.5px;color:#536471;font-weight:600}
.xsugg{border-top:1px solid var(--line);border-bottom:8px solid #f1f3f4;padding:12px 0 4px;background:#fff}.xsugg>b{display:block;padding:0 16px 6px;font-size:19px}
.igpf{display:flex;align-items:center;gap:8px;background:none;text-align:left}
.igsbar i{position:relative;overflow:hidden}.igsbar i.done{background:#fff}.igsbar i u{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;transition:width 5s linear}
.igsbar i:first-child{background:rgba(255,255,255,.4)}.igsbar i.done:first-child{background:#fff}
.igstap{position:absolute;left:0;right:0;top:calc(var(--safe-top) + 64px);bottom:70px;display:flex}.igstap div{flex:1}.igstap div:first-child{flex:.4}
.igsfoot{position:relative;z-index:2}.igsfoot input.igsin{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:999px;padding:10px 14px;flex:1}.igsfoot input.igsin::placeholder{color:rgba(255,255,255,.8)}
.igsfoot button{background:none;color:#fff;font-size:22px;padding:0 6px}
.igbtns .blue{background:#4f5bff;color:#fff}
/* 사진 첨부 */
.igcar{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;position:relative}.igcar::-webkit-scrollbar{display:none}
.igcar img{flex:none;width:100%;aspect-ratio:1/1;object-fit:cover;scroll-snap-align:start;display:block}
.igcnt{position:sticky;right:10px;margin-left:auto;align-self:flex-start;top:10px;position:absolute;right:10px;top:10px;background:rgba(0,0,0,.6);color:#fff;font-style:normal;font-size:12px;padding:3px 9px;border-radius:999px}
.igpick{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;scrollbar-width:none}.igpick::-webkit-scrollbar{display:none}
.igpt{position:relative;flex:none;width:110px;height:110px;border-radius:10px;overflow:hidden}.igpt img{width:100%;height:100%;object-fit:cover}
.igpt b{position:absolute;left:6px;top:6px;background:#4f5bff;color:#fff;min-width:20px;height:20px;border-radius:50%;font-size:12px;display:grid;place-items:center}
.igpt button{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1}
.igpadd{flex:none;width:110px;height:110px;border-radius:10px;border:1.5px dashed #bbb;color:#777;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:13px;background:#fafafa}.igpadd span{font-size:26px;line-height:1}
.xg{display:grid;gap:2px}.xg img{width:100%;height:100%;object-fit:cover;display:block}
.xg1 img{max-height:380px}.xg2{grid-template-columns:1fr 1fr;height:220px}.xg3{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:260px}.xg3 img:first-child{grid-row:1/3}.xg4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:260px}
.xcimgs{padding:8px 0 6px;width:100%}.xccol{flex:1;min-width:0}.xcgrid{display:grid;gap:2px;border-radius:14px;overflow:hidden}.xcgrid>div{position:relative}.xcgrid img{width:100%;height:100%;object-fit:cover;display:block}
.xcgrid.xg1 img{max-height:260px}.xcgrid.xg2{grid-template-columns:1fr 1fr;height:180px}.xcgrid.xg3,.xcgrid.xg4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:210px}.xcgrid.xg3>div:first-child{grid-row:1/3}
.xcgrid button{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:16px;line-height:1}
.xtb{background:none;color:inherit;padding:0;display:inline-grid;place-items:center}

/* bubble */
.bbfr{display:flex;flex-direction:column;flex:1;min-height:0;background:#fff}
.bbfrh{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-top) + 14px) 18px 14px;background:linear-gradient(180deg,#efe6ff,#fff);flex:none}
.bbfrh h1{margin:0;font-size:21px;font-weight:800;letter-spacing:.5px;color:#2a2340}.bbfrh h1 span{color:#8a5cf0}
.bbfrh button{color:#6b55c8;display:grid;place-items:center;width:40px;height:40px}
.bbfrb{flex:1;padding-bottom:calc(var(--nav-h) + 76px)}
.bbsec2{padding:14px 18px 8px;font-size:13px;color:#8a82a8;font-weight:600}.bbsec2 i{font-style:normal;color:#8a5cf0;font-weight:800}
.bbhr{height:1px;background:#eee;margin:6px 18px}
.bbmeb,.bbfrow,.bbmore{display:flex;align-items:center;gap:12px;width:100%;padding:9px 18px;text-align:left}
.bbmeb b,.bbfrow b{font-size:16px;color:#222}.bbmeb span,.bbfrow>span{font-size:13px;color:#9a93b4;margin-left:2px;flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bbme2{width:52px;height:52px;border-radius:50%;background:#d9cdfa;color:#6b55c8;display:grid;place-items:center;font-weight:800;font-size:20px;flex:none}
.bbav{border-radius:50%;flex:none;background-color:#e8e0fb;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #c9a8f5}
.bbfrow .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.bbfrow .bbl{font-size:13px;color:#8a8a99;margin:0;text-align:left;flex:none}
.bbfrow em{font-style:normal;font-size:11px;color:#aaa;display:flex;align-items:center;gap:5px}.bbdot{width:8px;height:8px;border-radius:50%;background:#8a5cf0;display:inline-block}
.bbmore{padding:16px 20px;gap:14px;border-bottom:1px solid #f1eef8;color:#5b4aa8}.bbmore b{flex:1;color:#222;font-size:16px}.bbmore em{font-style:normal;color:#bbb;font-size:20px}
.bbtabs{position:absolute;left:0;right:0;bottom:var(--nav-h);display:flex;background:#fff;border-top:1px solid #eee;height:56px;z-index:3}
.bbtabs button{flex:1;display:grid;place-items:center;color:#c3bcd8}.bbtabs button.on{color:#8a5cf0}
.bbroomhead{display:flex;align-items:center;justify-content:center;position:relative;padding:calc(var(--safe-top) + 8px) 12px 8px;background:#fff;flex:none}
.bbroomhead .back{position:absolute;left:8px;bottom:6px;width:36px;height:36px;display:grid;place-items:center}.bbroomhead h1{margin:0;font-size:17px;font-weight:700}
.bbdays{display:flex;align-items:center;justify-content:center;gap:6px;padding:7px;background:#fff;border-bottom:1px solid #f0ecfa;font-weight:700;color:#8a5cf0;font-size:14px;flex:none}.bbdays i{font-style:normal;font-weight:800;letter-spacing:.3px}.bbheart{display:grid}
.bblog{flex:1;background-color:#f6f1ff;background-image:radial-gradient(#e6dafb 1.4px,transparent 1.6px);background-size:26px 26px;padding:6px 14px 14px}
.bbdate{text-align:center;font-size:12px;color:#8a82a8;background:#ebe3fb;border-radius:12px;padding:4px 12px;width:max-content;margin:14px auto 8px}
.bbm{display:flex;gap:10px;margin:10px 0;align-items:flex-start}.bbmc{min-width:0;max-width:78%}
.bbnm{display:flex;align-items:center;gap:6px;margin-bottom:4px}.bbnm i{font-style:normal;font-size:9px;font-weight:800;color:#fff;background:#8a5cf0;border-radius:4px;padding:2px 5px;letter-spacing:.3px}.bbnm b{font-size:14px;color:#2a2340}
.bbline{display:flex;align-items:flex-end;gap:6px}.bbline small{font-size:10px;color:#9a93b4;flex:none;white-space:nowrap}
.bbb{background:#fff;border-radius:4px 16px 16px 16px;padding:10px 13px;font-size:14.5px;line-height:1.45;color:#222;word-break:break-word;box-shadow:0 1px 2px rgba(120,90,200,.08)}
.bbfan{display:flex;justify-content:flex-end;align-items:flex-end;gap:6px;margin:8px 0}.bbfan small{font-size:10px;color:#9a93b4}.bbfb{background:#d9c8fb;border-radius:16px 4px 16px 16px;padding:9px 13px;font-size:14.5px;max-width:74%;word-break:break-word}
.bbquiet{text-align:center;font-size:11.5px;color:#a79fc2;margin:18px 0 6px}
.bbfoot{display:flex;align-items:center;gap:8px;background:#fff;padding:8px 12px calc(var(--nav-h) + 8px);flex:none;border-top:1px solid #f0ecfa}
.bbin{flex:1;display:flex;align-items:center;background:#f3effc;border-radius:22px;padding:0 12px 0 16px;height:42px;color:#8a5cf0}.bbin input{flex:1;border:0;background:transparent;font-size:15px;outline:0;min-width:0}
.bbsend{width:42px;height:42px;border-radius:50%;background:#8a5cf0;color:#fff;display:grid;place-items:center;flex:none}
.bbmy{padding:14px 16px calc(var(--nav-h) + 20px);background:#f6f4fb}
.bbtk{display:flex;background:#fff;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 1px 4px rgba(100,70,180,.1)}
.bbtkl{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:3px}.bbtkl small{color:#8a5cf0;font-weight:700;font-size:12px}.bbtkl b{font-size:16px}.bbtkl span{font-size:12px;color:#999}
.bbtkw{display:flex;align-items:center;gap:8px;margin-top:8px}.bbtkw em{font-style:normal;font-weight:700;color:#5b4aa8}
.bbtkr{width:78px;border-left:2px dashed #e4dcf8;display:grid;place-items:center;background:#faf7ff;color:#8a5cf0;font-weight:800;font-size:13px}
.bbedit{padding:20px 20px calc(var(--nav-h) + 20px)}.bbepf{display:grid;place-items:center;margin-bottom:18px}.bbepf .bbme2{width:84px;height:84px;font-size:32px}
.bbedit label{display:block;font-size:12px;color:#8a82a8;font-weight:600;margin-bottom:14px}.bbedit input{display:block;width:100%;border:0;border-bottom:1.5px solid #ddd;padding:8px 0;font-size:16px;margin-top:4px;outline:0;background:transparent}.bbedit input:focus{border-color:#8a5cf0}.bbedit>small{color:#aaa;font-size:12px}

.xhead .xhr button.xall{width:auto;height:auto;padding:6px 12px;font-size:14px}
.xn.big .xni{color:#f91880}
/* 인트로: 안쪽 flex 스크롤 대신 #intro 자체가 스크롤 (재방문 시 스크롤 먹통 방지) */
#intro{display:block;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
#intro .intro-in{display:flex;flex-direction:column;overflow:visible;flex:none;min-height:100%;touch-action:pan-y}
.intro-go{position:sticky;bottom:0;margin:auto -28px -60px;padding:18px 28px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(15,15,20,0),#0f0f14 28%);display:flex;flex-direction:column;gap:10px;z-index:2}
#intro .intro-in{padding-bottom:0}

#navbar.kbhide{display:none}
body.kb .xcfoot,body.kb .kfoot,body.kb .tmfoot,body.kb .bbfoot,body.kb .xrfoot{padding-bottom:10px!important}


.xccol{flex:1;min-width:0;display:flex;flex-direction:column}
.xaud{align-self:flex-start;border:1px solid #1d9bf0;color:#1d9bf0;border-radius:999px;padding:3px 12px;font-weight:700;font-size:14px;margin-bottom:6px;display:inline-flex;align-items:center;gap:4px}
#xText{padding-top:4px;min-height:32px;overflow:hidden;width:100%}
.xcqt{margin:8px 0 0!important;border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.xcacct{margin:10px 0 0!important;font-size:12px}
.xcrow{align-items:flex-start}
.xreply{background:none;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex!important;align-items:center;gap:8px;width:calc(100% + 32px);margin:-10px -16px 10px!important;padding:10px 16px;text-align:left}
.xfbm{display:block!important;width:fit-content;margin:3px 0 0!important;padding:0!important;background:none!important;color:#536471;font-size:12.5px}
.xperson .tx .xfbm{margin-left:0!important}

.xdrw{position:absolute;inset:0;z-index:80;pointer-events:auto}
.xdbk{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .22s}.xdrw.on .xdbk{background:rgba(0,0,0,.4)}
.xdp{position:absolute;top:0;bottom:0;left:0;width:78%;background:#fff;padding:calc(var(--safe-top) + 18px) 20px 20px;transform:translateX(-100%);transition:transform .22s cubic-bezier(.25,.8,.25,1);display:flex;flex-direction:column;overflow-y:auto}
.xdrw.on .xdp{transform:none}
.xdtop{width:fit-content;margin-bottom:10px}.xdn{font-size:19px;font-weight:800}.xdh2{color:#536471;font-size:15px;margin-bottom:12px}
.xdc{display:flex;gap:16px;font-size:14px;color:#536471;margin-bottom:14px}.xdc b{color:#0f1419}
.xdrow{display:flex;align-items:center;gap:18px;padding:14px 0;font-size:20px;font-weight:700;text-align:left}
.xpban.pe{display:block;width:100%;border:0;padding:0;position:relative}.pecam{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.28)}.pecam svg{width:26px;height:26px}
.xpav.pe{position:relative;border:0;padding:0;border-radius:50%;overflow:hidden}.pecam.sm{border-radius:50%}
.peform{padding:12px 16px;display:flex;flex-direction:column;gap:14px}.peform label{display:flex;flex-direction:column;font-size:12.5px;color:#536471;gap:4px}
.peform input,.peform textarea{border:1px solid var(--line);border-radius:6px;padding:10px;font-size:16px;font-family:var(--font);outline:none;resize:none}.peform input:focus,.peform textarea:focus{border-color:#1d9bf0}.peform small{color:#8a8f96;font-size:12px}

/* 커뮤니티(더쿠) */
.chdr{background:#1b1b1b;color:#fff;flex:none;padding-top:calc(var(--safe-top) + 8px)}
.chtop{display:flex;align-items:center;gap:6px;padding:4px 16px 10px;min-height:40px}.chtop .back{width:32px;height:32px;display:grid;place-items:center;color:#fff;margin-left:-8px}.chtop h1{font-size:19px;font-weight:700;margin:0;color:#fff}
.chdr .ctabs2{display:flex;gap:0;padding:0;border-bottom:1px solid #333;background:#1b1b1b}.chdr .ctabs2 button{flex:1;text-align:center;padding:11px 0;font-size:15px;color:#9a9a9a;border-bottom:2px solid transparent}.chdr .ctabs2 button.on{color:#fff;font-weight:700;border-bottom-color:#ff5a3c}
.crow .tx{width:100%}.cnew{font-style:normal;color:#fff;background:#e5342a;border-radius:3px;font-size:10px;padding:1px 4px;margin-left:5px;vertical-align:2px}
.cvote button.on{background:#1b1b1b;color:#fff;border-color:#1b1b1b}
.ccm .ccmrow{padding:10px 0 8px}.ccmrow.re{margin-left:16px;padding-left:10px;border-left:2px solid #e6e6e6;background:#fafafa}
.cch{display:flex;align-items:baseline;gap:6px}.cch b{font-size:12.5px;color:#555}.cch em{font-style:normal;font-size:11px;color:#bbb}.cch small{margin-left:auto;color:#aaa;font-size:11px}
.cct{font-size:14px;line-height:1.5;margin:3px 0 2px;color:#111;word-break:keep-all}.ccu{color:#aaa;font-size:11px}
.cmore{width:100%;padding:13px;margin-top:10px;border:1px solid var(--line);border-radius:8px;font-size:14px;color:#555}
.ctt{display:block}.ncbest{font-style:normal;font-size:10px;font-weight:700;color:#e5342a;border:1px solid #e5342a;border-radius:3px;padding:0 4px;margin-right:6px}.ncmrow b{display:inline}
/* ---------- Spinbox ---------- */
.spin{position:absolute;inset:0;display:flex;flex-direction:column;background:#f6f6f7;color:#111}
.spin .scroll{flex:1;overflow-y:auto;padding-bottom:calc(var(--nav-h) + 66px)}
.spbanner{height:120px;background:linear-gradient(#a9a9ab,#e3e3e5)}
.spprof{margin:-44px 12px 0;background:#fff;border-radius:16px;padding:14px 16px 16px;box-shadow:0 1px 6px rgba(0,0,0,.06);position:relative}
.spav{border-radius:50%;background:#ececee;display:grid;place-items:center;overflow:hidden;flex:none}.spav img{width:100%;height:100%;object-fit:cover}
.sptop{display:flex;gap:14px;align-items:flex-end;margin-bottom:14px}.sptop .spav{margin-top:-40px;border:4px solid #fff}
.spname{display:flex;flex-direction:column;gap:3px;min-width:0;padding-bottom:2px}.spname>b,.spname span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spname>b{font-size:19px}.spname span{font-size:13px;color:#8a8d93}.spname small{font-size:13px;color:#555}
.spbio{margin:10px 0 12px;font-size:14px;color:#333}
.sprow{display:flex;gap:8px}
.spbtn{flex:1;background:#e8384f;color:#fff;font-weight:700;font-size:15px;border-radius:10px;padding:13px 14px}
.spbtn2{background:#f3f3f4;border:1px solid #e3e3e5;border-radius:10px;padding:0 14px;min-width:48px;height:46px;display:grid;place-items:center;color:#222;font-size:14px}.spbtn2.wide{padding:0 18px}
.sptabs{display:flex;background:#fff;margin-top:12px;border-bottom:1px solid #e6e6e8}.sptabs button{flex:1;padding:13px 0;font-size:15px;color:#9a9da3;border-bottom:2px solid transparent}.sptabs button.on{color:#111;font-weight:700;border-color:#222}
.spbody{padding:12px}
.sphd{font-weight:700;font-size:15px;margin:4px 4px 10px}
.spchip{display:inline-block;background:#e3f0fb;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;margin-bottom:10px}
.spmk{width:26px;height:26px;border-radius:50%;background:#111;display:grid;place-items:center;flex:none}.spmk.lg{width:42px;height:42px;background:#e8384f}.spmk.lg svg{width:22px;height:22px}
.spans,.spmini{display:block;width:100%;text-align:left;background:#fff;border-radius:14px;padding:14px;margin-bottom:10px}
.spq{display:flex;gap:10px;align-items:flex-start;color:#777;font-size:14px;line-height:1.45}.spq p{margin:2px 0 0}
.spa{display:flex;gap:10px;align-items:center;margin:12px 0 0}.spa b{display:block;font-size:14px}.spa small{font-size:12.5px;color:#9a9da3}.spa .one{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.spt{margin-top:12px;font-size:15px;line-height:1.55}
.spreq,.spnt{display:flex;gap:12px;width:100%;text-align:left;background:#fff;border-radius:14px;padding:14px;margin-bottom:8px;align-items:flex-start}
.spreq p,.spnt p{margin:0 0 4px;font-size:14.500px;line-height:1.45;color:#222}.spreq small,.spnt small{color:#9a9da3;font-size:12.5px}
.spnt{border-radius:0;margin:0;background:#fff;border-bottom:1px solid #f0f0f1}.spnt b{font-size:15px;display:block;margin-bottom:3px;font-weight:500}.spnt p{color:#8a8d93}
.sptitle{background:#fff;font-size:22px;font-weight:800;padding:calc(var(--safe-top) + 18px) 16px 14px;border-bottom:1px solid #eee}
.spempty{text-align:center;padding:40px 0;color:#555;font-size:15px}.spempty .spbtn{display:inline-block;flex:none;margin-top:12px;padding:11px 20px}
.spnav{position:absolute;left:0;right:0;bottom:var(--nav-h);height:56px;background:#fff;border-top:1px solid #e6e6e8;display:flex;justify-content:space-around;align-items:center}
.spnav button{width:64px;height:50px;display:grid;place-items:center;color:#b3b5ba;position:relative}.spnav button.on{color:#111}.spnav i{position:absolute;top:9px;right:16px;width:8px;height:8px;border-radius:50%;background:#e8384f}
.spw{padding:14px 14px 80px !important}
.spw textarea{width:100%;min-height:130px;margin:12px 0;border:1px solid #e0e0e3;border-radius:12px;padding:12px;font-size:16px;font-family:inherit;resize:none;outline:none;background:#fff;color:#111}
.sptog{display:flex;align-items:center;gap:10px;font-size:14px;color:#444;margin-bottom:14px}.sptog span{width:38px;height:22px;border-radius:999px;background:#cfd1d6;position:relative;transition:.15s}.sptog span:after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}.sptog.on span{background:#e8384f}.sptog.on span:after{left:18px}
.spcard{margin-top:10px;border:1.5px solid #e8384f;border-radius:12px;padding:30px 14px 34px;text-align:center;position:relative;background:#fff}
.spcard i{position:absolute;top:-9px;right:16px;background:#fff;padding:0 6px;color:#e8384f;font-weight:800;font-size:12px;font-style:italic}
.spcard p{margin:0;font-size:14px;line-height:1.5;color:#111}
.spcard small{position:absolute;left:0;bottom:0;background:rgba(0,0,0,.62);color:#fff;font-size:11.5px;padding:2px 8px;border-radius:0 8px 0 10px;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spcard.big{padding:38px 16px}.spcard.big p{font-size:15.500px}
.spfrom{font-size:12.5px;color:#8a8d93;margin:4px 2px 0}
.spt a{color:#1d6fd6;word-break:break-all}
.tw .ac button.nort{opacity:.35}

.clink,.xart{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin:6px 0 10px;background:#f7f8fa}
.clink small,.xart small{color:#888;font-size:11.5px}.clink b,.xart b{font-size:14px;line-height:1.4;font-weight:600;color:#1a56c4}
.cxq{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin:6px 0 10px;background:#fff}
.cxq span{font-size:12.5px;color:#666}.cxq span b{color:#111;font-size:13.5px;margin-right:4px}.cxq p{font-size:13.5px;line-height:1.55;margin:6px 0 0}
.cimg{display:block;max-width:100%;border-radius:6px;margin:6px 0 10px}

.ac button.on-bm,.xdac button.on-bm{color:#1d9bf0}.ac button.on-bm svg,.xdac button.on-bm svg{fill:#1d9bf0;stroke:#1d9bf0}

/* Teams 채널 (읽기 전용) */
.tmch{background:#f5f5f5;padding:10px 0 20px}
.tmch .srow{background:#fff;margin:0 10px 8px;padding:12px 12px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.tmch .sav{border-radius:50%;font-size:14px}
.tmro{flex:none;text-align:center;font-size:12.5px;color:#707070;background:#fafafa;border-top:1px solid #e6e6e6;padding:12px 14px calc(var(--nav-h) + 12px)}

/* 위버스 공지 상세 */
.wvrow{width:100%;text-align:left;background:none}
.wvpost{padding:16px 16px 14px;border-bottom:8px solid #f3f4f6}
.wvauth{display:flex;align-items:center;gap:10px;margin-bottom:12px}.wvauth b{display:block;font-size:14px}.wvauth small{color:#888;font-size:12px}
.wvav{width:36px;height:36px;border-radius:50%;background:#00b894;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}
.wvpost h2{font-size:16.5px;font-weight:700;margin:0 0 10px;line-height:1.4}.wvpost p{font-size:14.5px;line-height:1.65;margin:0;color:#222}
.wvstat{margin-top:14px;font-size:12.5px;color:#888}
.wvcm{padding:11px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}.wvcm b{font-size:13px}.wvcm span{font-size:14px;line-height:1.5}.wvcm small{font-size:11.5px;color:#999}
/* ---------- 팀즈 영상회의 ---------- */
#callscr.mtg{background:#1b1b1f;align-items:stretch}
#callscr.mtg.in{background:linear-gradient(180deg,#2a2b45,#121418);align-items:center}
.mt-inv .cl-av{color:#fff}.mt-inv .cl-av svg{width:44px;height:44px}
.mt-app{font-size:13px;color:#a9adf0;letter-spacing:.3px}
.mt-inv span:last-child{font-size:13.5px;color:#b8c0cc;padding:0 30px}
.mt-pre{flex:1;display:flex;flex-direction:column;align-items:center;padding:40px 22px calc(var(--nav-h) + 20px);gap:8px;text-align:center}
.mt-pre b{font-size:22px}.mt-pre small{font-size:13px;color:#9aa1ad}
.mt-self{margin-top:18px;width:100%;aspect-ratio:3/4;max-height:330px;border-radius:16px;background:#2a2b30;display:grid;place-items:center;color:#8d939e;font-size:14px;position:relative;overflow:hidden}
.mt-self.cam{background:linear-gradient(160deg,#59607a,#2e3242)}
.mt-self em{position:absolute;left:10px;bottom:8px;font-style:normal;font-size:12px;color:#e8ebf2}
.mt-me svg{width:110px;height:110px;opacity:.85}
.mt-tg{display:flex;gap:26px;margin-top:14px}
.mt-tg button,.mt-bar button{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mt-tg button.on,.mt-bar button.on{background:#5b5fc7}
.mt-tg small,.mt-bar small{font-size:10px}
.mt-tg svg,.mt-bar svg{width:22px;height:22px}
.mt-join{margin-top:auto;width:100%;background:#5b5fc7;color:#fff;border-radius:12px;padding:14px;font-size:16px;font-weight:600}
.mt-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;font-size:14px}
.mt-top span{color:#a8adb8;font-size:12.5px;font-variant-numeric:tabular-nums}
.mt-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 8px;flex:none}
.mt-tile{position:relative;height:118px;border-radius:12px;background:#2a2b30;display:grid;place-items:center;overflow:hidden;border:2px solid transparent;transition:border-color .2s}
.mt-tile.cam{background:linear-gradient(160deg,color-mix(in srgb,var(--c,#555) 70%,#fff 10%),#24262e)}
.mt-tile.me{grid-column:1/-1;height:96px}
.mt-tile.me.cam{background:linear-gradient(160deg,#59607a,#2e3242)}
.mt-tile.me .mt-me svg{width:70px;height:70px}
.mt-tile.talk{border-color:#8b8ff0}
.mt-av{width:46px;height:46px;border-radius:50%;background:var(--c,#555);display:grid;place-items:center;font-weight:700;color:#fff}
.mt-tile.cam .mt-av{width:58px;height:58px;font-size:20px;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.mt-tile.me .mt-av{background:#5b5fc7}
.mt-tile span{position:absolute;left:8px;bottom:6px;font-size:11px;color:#eef0f5;background:rgba(0,0,0,.35);padding:1px 6px;border-radius:6px}
.mt-mute{position:absolute;right:7px;bottom:6px;color:#fff;opacity:.8}.mt-mute svg{width:14px;height:14px}
#callscr.mtg .cl-cap{margin-top:8px;text-align:left;padding:0 16px}
#callscr.mtg .cl-cap p small{display:block;font-size:11px;color:#a9adf0;margin-bottom:1px}
#callscr.mtg .cl-cap p.me small{color:#ffe27a}
#callscr.mtg .cl-deck{margin:8px 0 calc(var(--nav-h) + 14px);min-height:150px;align-items:flex-end}
.mt-bar{display:flex!important;gap:26px;justify-content:center}
.mt-bar button.lv{background:#d13438}
.mt-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cl-cap:has(> i){-webkit-mask-image:none;mask-image:none}.cl-cap > i{opacity:.75!important;padding-top:6px}
/* 선택지가 길어도 잘리지 않게: 고르는 동안은 버튼 줄 대신 선택지가 자리를 차지한다 */
#callscr.ask .cl-opts{position:static;max-height:46vh}
#callscr.ask .cl-btns{display:none!important}
#callscr .cl-deck{flex-direction:column;align-items:stretch}
#callscr:not(.ask) .cl-opts{position:absolute}
#callscr .cl-btns{align-self:center}
#callscr.mtg .cl-deck{min-height:0}
#callscr.mtg .cl-cap p.me{color:#b7b9ff}
#callscr.mtg .cl-cap p.me small{color:#8f93f5}
#callscr.ask .cl-opts{align-items:stretch}
#callscr.mtg.tight .mt-tile{height:64px}
#callscr.mtg.tight .mt-tile.me{height:52px}
#callscr.mtg.tight .mt-av{width:32px;height:32px;font-size:13px}
#callscr.mtg .mt-tile,#callscr.mtg .mt-av{transition:height .25s,width .25s}
#callscr.ask .cl-opts{width:100%;box-sizing:border-box}
#callscr.ask .cl-opts button{width:100%}
#callscr.mtg.tight .mt-tile span{bottom:3px;font-size:10px}
#xText{flex:none!important}
/* 갤러리 */
.phimp{font-size:13.5px;color:#1a73e8;font-weight:600;padding:6px 4px}
.phnote{font-size:12px;color:#999;text-align:center;padding:18px 20px 30px}
.phgrid div[data-v]{cursor:pointer}
.phview{position:absolute;inset:0;background:#000;z-index:20;display:grid;place-items:center}.phview img{max-width:100%;max-height:100%;object-fit:contain}
#sheet.gpk{max-height:80%;display:flex;flex-direction:column}
.gpk-head{display:flex;align-items:center;gap:8px;padding:4px 16px 10px}.gpk-head b{flex:1;font-size:17px}
.gpk-imp{font-size:13px;color:#1a73e8;padding:6px 8px}
.gpk-ok{background:#111;color:#fff;border-radius:16px;padding:6px 14px;font-size:13.5px;font-weight:600}.gpk-ok:disabled{opacity:.3}
.gpk-body{overflow-y:auto;flex:1;min-height:0;padding-bottom:20px}
.gpk-it{position:relative}.gpk-it.on img{opacity:.6}.gpk-it.on::after{content:'';position:absolute;inset:0;border:3px solid #1d9bf0}
.gpk-it b{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:12px;display:grid;place-items:center}
.ahead .act button.phimp{width:auto;font-size:13.5px}.ahead h1{flex:1}
/* 오늘 할 일 위젯 */
.td-wid{margin:10px 14px 4px;background:rgba(255,255,255,.88);border-radius:18px;padding:10px 12px 6px;color:#111;box-shadow:0 2px 10px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
.td-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.td-h b{font-size:13.5px}.td-h span{font-size:11px;color:#777}
.td-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:5px 0;font-size:13px;border-top:1px solid rgba(0,0,0,.06)}
.td-row i{flex:none;width:16px;height:16px;border-radius:50%;border:1.6px solid #9aa0a6;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:#fff}
.td-row span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-row small{flex:none;font-size:11px;color:#777;font-variant-numeric:tabular-nums}
.td-row.done span{text-decoration:line-through;color:#999}.td-row.done i{background:#34c759;border-color:#34c759}
.td-row.done i::after{content:'';width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.td-row.warn i,.td-row.ppl i{background:#ff3b30;border-color:#ff3b30}.td-row.warn small{color:#ff3b30;font-weight:600}
.td-row.ppl span{color:#444}
/* 엔딩 평가서 */
.ed-rep{margin:18px 0 6px;text-align:left;background:rgba(255,255,255,.06);border-radius:14px;padding:12px 14px}
.ed-rep-h{font-size:12px;opacity:.6;margin:8px 0 4px}.ed-rep-h:first-child{margin-top:0}
.ed-rep-r{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.ed-rep-r b{flex:none;font-weight:600}.ed-rep-r.miss b{color:#ff8a80}.ed-rep-r.miss span{opacity:.75}
.ed-rep-f{font-size:11.5px;opacity:.55;margin-top:8px}
#ending{overflow-y:auto}#ending .ed-rep{width:100%;box-sizing:border-box}
#home .td-wid{margin:-10px 6px 16px;background:rgba(255,255,255,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;padding:10px 16px 6px;box-shadow:none}
/* 홈 왼쪽 '오늘' 페이지 */

#home .hm-wrap{transition:transform .32s cubic-bezier(.25,.8,.25,1)}
#home.pg0 .hm-wrap{transform:translateX(100%)}
.hm-today{position:absolute;inset:0;transform:translateX(-100%);transition:transform .32s cubic-bezier(.25,.8,.25,1);overflow-y:auto;padding:calc(var(--safe-top) + 34px) 14px calc(var(--nav-h) + 60px);color:#111}
#home.pg0 .hm-today{transform:none}
.tdy-in h2{font-size:28px;margin:0 6px 2px}.tdy-sub{font-size:12.5px;color:#555;margin:0 6px 14px}
.tdy-card{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:22px;padding:14px 16px;margin-bottom:12px}
.tdy-card h3{font-size:13px;margin:0 0 8px;color:#555;font-weight:600;display:flex;justify-content:space-between}
.tdy-steps{display:flex;gap:4px}.tdy-steps div{flex:1;text-align:center;font-size:10.5px;color:#888}.tdy-steps i{display:block;height:4px;border-radius:2px;background:rgba(0,0,0,.1);margin-bottom:4px}
.tdy-steps .on{color:#111;font-weight:700}.tdy-steps .on i{background:#5b5fc7}.tdy-steps .done i{background:#a9ace9}
.tdy-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 0;border-top:1px solid rgba(0,0,0,.06);font-size:14px;color:#111}.tdy-card h3+.tdy-row{border-top:0}
.tdy-row i{width:18px;height:18px;border-radius:50%;border:1.8px solid #a0a4ad;flex:none;display:grid;place-items:center}
.tdy-row.done i{background:#5b5fc7;border-color:#5b5fc7}.tdy-row.done i::after{content:'';width:7px;height:3.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.tdy-row.done span{color:#999;text-decoration:line-through}
.tdy-row span{flex:1;min-width:0}.tdy-row small{font-size:11.5px;color:#666;font-variant-numeric:tabular-nums}.tdy-row.warn small{color:#ff3b30;font-weight:700}.tdy-row.warn i{border-color:#ff3b30}
.tdy-row em,.tdy-p em{font-style:normal;font-size:10.5px;color:#5b5fc7;background:rgba(91,95,199,.12);border-radius:6px;padding:1px 6px;margin-right:5px}
.tdy-p em{margin:0 0 0 6px;color:#ff3b30;background:rgba(255,59,48,.1)}
.tdy-none{font-size:13px;color:#888;padding:4px 0 6px}
.tdy-p{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 0;color:#111}.tdy-p .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.tdy-p span{flex:none;font-size:14px;font-weight:600}.tdy-p small{flex:1;min-width:0;font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.tdy-p b{background:#ff3b30;color:#fff;border-radius:10px;padding:1px 7px;font-size:11px;flex:none}
.hm-dots{position:absolute;left:0;right:0;bottom:calc(var(--nav-h) + 102px);display:flex;justify-content:center;gap:8px;z-index:2}
.hm-dots button{width:7px;height:7px;border-radius:50%;background:rgba(0,0,0,.22);padding:0}.hm-dots button.on{background:#222}
.hm-coach{position:absolute;left:16px;right:16px;bottom:calc(var(--nav-h) + 118px);background:rgba(20,20,24,.86);color:#fff;border-radius:14px;padding:11px 14px;font-size:13px;line-height:1.45;text-align:left;z-index:3;animation:popm .4s ease-out}
.hm-coach b{color:#b7b9ff}
#home.pg0 .hm-coach{display:none}
#ending{justify-content:safe center}#ending .ed-in{margin:auto 0;padding:20px 0}
#callscr.mtg .cl-cap p.me{color:#eef1f6}
#callscr.mtg .cl-cap p.me small{color:#a9adf0}
/* 카톡 선택지: 옆으로 잘리지 않게 줄 바꿈해서 세로로 쌓기 */
#kSug{flex-direction:column;flex-wrap:nowrap;overflow-x:hidden;overflow-y:auto;max-height:42vh;padding:8px 10px 4px;gap:6px}
#kSug button{max-width:none;width:100%;white-space:normal;text-align:left;border-radius:14px;padding:8px 12px;line-height:1.4;overflow:visible}
#callscr.mtg .cl-cap p.me{color:#ffe27a}#callscr.mtg .cl-cap p.me small{color:#a9adf0}
.wvcm{position:relative}.wvrp{position:absolute;right:12px;top:10px;font-size:11.5px;color:#999;border:1px solid #e3e3e3;border-radius:10px;padding:2px 8px;background:#fff}
.wvcm.rp span{color:#aaa;font-size:12.5px}
.wvcm{padding-right:64px}
.tdy-skip{display:block;width:100%;margin-top:2px;padding:12px;border-radius:16px;background:rgba(91,95,199,.12);color:#4b4fb8;font-size:14px;font-weight:600}
/* 팀즈·DM 시간 */
.tmname small{margin-left:8px;font-size:11px;color:#8a8a8a}
.tmtm{font-size:11px;color:#8a8a8a;align-self:flex-end;margin-bottom:2px}
.dtime{text-align:center;font-size:11.5px;color:#8e8e8e;margin:12px 0 6px}
.xreply-row .hh{display:flex;align-items:center;gap:5px;min-width:0}

#home{touch-action:pan-y}

/* 인스타 여러 장 게시물 */
.igcarw{position:relative;overflow:hidden;width:100%;aspect-ratio:4/5;background:#000;touch-action:pan-y}
.igtrk{display:flex;height:100%;will-change:transform}
.igtrk img{flex:none;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.igcarw .igcnt{position:absolute;top:12px;right:12px;background:rgba(30,30,30,.72);color:#fff;font-style:normal;font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;pointer-events:none}
.igdots{display:flex;justify-content:center;gap:4px;padding:9px 0 0}
.igdots i{width:6px;height:6px;border-radius:50%;background:#c8c8c8;cursor:pointer}
.igdots i.on{background:#4c6ef5}

/* 인스타 사진은 원본 비율 그대로 (잘림 없이) */
.igimg.ph{aspect-ratio:auto;display:block}
.igimg.ph img{width:100%;height:auto;max-height:none;object-fit:contain;display:block}
.igcarw{background:#fff}
.igtrk img{object-fit:contain}

/* 사진 프사 */
.dav,.tmav,.kav{overflow:hidden}
.dav img,.tmav img,.kav img{width:100%;height:100%;object-fit:cover;display:block}
.dav{border-radius:50%}

/* 회의: 선택지 열고 닫을 때 자막 칸 크기가 안 바뀌게 (덱 높이는 커지기만 함) */
#callscr.mtg .cl-deck{transition:min-height .2s}
.igstory.ph .igstx{place-items:end center;font-size:17px;font-weight:600;padding:30px 24px 40px}.igstory.ph .igstx{text-shadow:0 1px 8px rgba(0,0,0,.7)}
.igstory.ph::before{content:'';position:absolute;left:0;right:0;top:0;height:110px;background:linear-gradient(rgba(0,0,0,.45),transparent);pointer-events:none}.igstory.ph .igsbar,.igstory.ph .igsh{position:relative}
.igst .ring.close{background:#2ecc71}
.igcambar{align-items:center;justify-content:space-between;padding:14px 26px}.igcamgal{width:56px;color:#fff;font-size:13px;background:rgba(255,255,255,.15);border-radius:10px;padding:8px 0}
/* 스토리 답장: 키보드에 가리지 않게 입력칸을 화면 위쪽으로 올림 */
.igstory.typing .igsfoot{position:absolute;left:0;right:0;top:30%;padding:12px 14px;background:rgba(0,0,0,.45);z-index:5}.igstory.typing .igstx{opacity:.35}
/* 잠금화면: 알림 목록이 '위로 밀어서 잠금 해제'·바로가기 버튼 밑으로 들어가지 않게 (화면이 짧은 폰·브라우저) */
#lock .lk-list{min-height:0;padding-bottom:10px;margin-bottom:calc(var(--nav-h) + 86px);-webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent);mask-image:linear-gradient(#000 calc(100% - 26px),transparent)}
#sw:has(#intro.on) #pullzone{pointer-events:none}   /* 처음 화면 맨 위를 잡아도 스크롤되게 */
#intro{scroll-behavior:auto;contain:layout paint}   /* 처음 화면 스크롤: 다른 화면과 따로 그리게 */
.kav svg{width:26px;height:26px}
.brbar .brlock svg{width:12px;height:12px;display:block}
/* 뱃지는 버튼(칸) 오른쪽이 아니라 아이콘 오른쪽 위 모서리에 붙인다 — 칸이 넓은 폴더·독에서도 아이콘에 딱 붙게 */
.hm-app{--icw:58px}
.hm-app .badge,.hm-dock .hm-app .badge{top:-7px;right:auto;left:calc(50% + var(--icw) / 2 - 15px);transform:none}
@media (max-height:720px){.hm-app{--icw:50px}}
#home .hm-grid{padding-top:10px}  /* 맨 윗줄 아이콘 뱃지가 스크롤 영역 위로 잘리지 않게 */
/* 상세 화면 답글 머리줄: 닉·아이디가 줄바꿈되지 않고 한 줄에서 말줄임 */
.xreply-row .bd2{flex:1;min-width:0}
.xreply-row .hh{flex-wrap:nowrap;font-size:15px}
.xreply-row .hh b{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;flex:none}
.xreply-row .hh span{color:#536471;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.xreply-row .ac.small span.b{display:inline-flex;align-items:center;gap:4px;color:#536471;font-size:12px;padding:6px 0}
.tmcol{align-items:flex-start}  /* 짧은 말풍선(ㅇㅋ)이 이름 줄 폭만큼 늘어나지 않게 */
/* 예약된 게시물: 하단 버튼 두 개를 같은 폭·같은 높이로, X 스타일 테두리 버튼 */
.xsch .xschbtn{align-self:stretch;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.xsch .xschbtn button{height:40px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;background:#fff;color:#0f1419;border:1px solid #cfd9de;flex:none}
.xsch .xschbtn button:first-child{background:#fff;color:#f4212e;border-color:#fdc9ce}
.scroll.call{padding-bottom:calc(var(--nav-h) + 64px)}  /* 하단 탭(즐겨찾기·최근 기록…)에 마지막 줄이 가리지 않게 */
/* 인스타 음악·태그·위치 고르기 시트 */
#sheet.igpk{max-height:78%;display:flex;flex-direction:column}
.igpk-q{padding:0 18px 10px}.igpk-q input{width:100%;box-sizing:border-box;border:0;background:#efefef;border-radius:10px;padding:10px 12px;font-size:15px;outline:none}
.igpk-list{overflow-y:auto;flex:1;min-height:0;padding-bottom:calc(var(--nav-h) + 8px)}
.igpk-own{color:#0095f6;font-weight:600}.igpk-none{color:#ed4956}
/* 인스타 게시물 머리줄: 음악·위치 (아이디 옆, 길면 말줄임) */
.igph .igsub{flex:1;min-width:0;display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden;margin-left:-4px}
.igph .igsub em{font-style:normal;font-size:12px;color:#555;overflow:hidden;text-overflow:ellipsis}
.igph .igsub em+em::before{content:'· ';color:#999}
.igph .igmu{display:inline-flex;align-items:center;gap:3px}.igph .igmu svg{width:12px;height:12px;flex:none}
.igph .more svg{width:20px;height:20px}
/* 노래 검색 결과 (아이튠즈) */
.igpk-web{display:flex;align-items:center;gap:8px;padding:0 14px 0 18px}
.igpk-pick{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:8px 0;text-align:left}
.igpk-pick img,.igpk-pick i{width:44px;height:44px;border-radius:6px;flex:none;object-fit:cover;background:#eee}
.igpk-pick span{min-width:0;display:flex;flex-direction:column}.igpk-pick b{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.igpk-pick small{font-size:12.5px;color:#737373;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.igpk-play{width:34px;height:34px;border-radius:50%;border:1px solid #dbdbdb;display:grid;place-items:center;flex:none;color:#111}
.igpk-st{padding:8px 18px;font-size:13px;color:#8e8e8e}.igpk-sec{padding:10px 18px 4px;font-size:12px;color:#8e8e8e;font-weight:600}
.lk-card .tt span{flex:0 1 auto}
.lk-card .tt .cnt{margin-left:2px;font-style:normal!important}
.lk-card.group{overflow:visible}
/* 잠금화면 알림 카드: 1개·묶음 모두 같은 구조(아이콘 | 제목·개수·시간 / 본문 2줄). 묶음은 뒤에 겹친 카드 */
.lk-card{position:relative;align-items:center}
.lk-card .tt{align-items:center;justify-content:flex-start}
.lk-card .tt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-card .tt .cnt{flex:none;font-size:11px;font-weight:600;line-height:16px;min-width:16px;text-align:center;padding:0 5px;border-radius:8px;background:rgba(255,255,255,.28)}
.lk-card .tt small{margin-left:auto}
.lk-card .bd,.lk-card.group .bd{-webkit-line-clamp:2}
.lk-card.group{margin-bottom:6px}
.lk-card.group::after{content:'';position:absolute;left:14px;right:14px;bottom:-6px;height:12px;border-radius:0 0 16px 16px;background:rgba(255,255,255,.12);z-index:-1}
#lock .lk-list{isolation:isolate}
.lk-card.group::after{bottom:-7px;height:7px;border-radius:0 0 12px 12px;left:16px;right:16px}
/* 알림창 카드도 잠금화면과 같은 구조: 제목·개수·시간 한 줄, 본문은 최신 1개 2줄까지 */
.sh-card .tt small{margin-left:auto}
.sh-card .bd{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 새 게시물 옵션 줄: 아이콘 + 글자 왼쪽 정렬, 기울임 없음, 화살표 오른쪽 */
.igopt{justify-content:flex-start;align-items:center;gap:12px;cursor:pointer}
.igopt .ov{font-style:normal;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.igopt>span{flex:none;color:#999}
.igopt svg{flex:none}