/* ============================================================
   DATASMITH OS 스타일 (v1.6.0) — 상태바(공통 상단바 기준) · 위젯 · Dock · 패널
   테마는 html[data-theme], 포인트 컬러는 --os-accent. 폰트·컬러는 datasmith.css 토큰을 따릅니다.
   ============================================================ */
html{--os-accent:#E3C98F}
html[data-theme="light"]{
  --bg:#F4F3EF; --coal:#FFFFFF; --white:#0A0A0B; --mid:#6B6A66;
  --hair:rgba(10,10,11,.16); --hair2:rgba(10,10,11,.42);
}
/* ---------- 공통 상단바 (규격: 높이 52px · 좌우 여백 20px · 하단 헤어라인) ---------- */
#os-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;height:calc(52px + env(safe-area-inset-top));padding:0 20px;padding-top:env(safe-area-inset-top);background:var(--bg);border-bottom:1px solid var(--hair)}
#os-bar .os-brand{font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--white);white-space:nowrap}
#os-bar .os-brand b{color:var(--os-accent)}
#os-bar .os-mail{flex:1 1 auto;min-width:0;font-size:11px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;text-align:right}
#os-bar .os-tier{flex:0 0 auto;font-size:10.5px;font-weight:600;letter-spacing:.1em;border:1px solid var(--os-accent);color:var(--os-accent);padding:3px 8px;white-space:nowrap}
#os-bar .os-ic{flex:0 0 auto;position:relative;background:none;border:1px solid var(--hair);color:var(--white);min-height:0;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
#os-bar .os-ic svg{display:block}
#os-bar .os-ic:hover{border-color:var(--white)}
#os-bar .os-ic .dot{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;background:var(--os-accent);color:#0A0A0B;font-size:9px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px;border-radius:9px}
#os-bar .os-ic .dot.on{display:inline-flex}
/* ---------- 본문 · 위젯 ---------- */
#os-main{width:100%;max-width:1080px;margin:0 auto;padding:34px 20px 110px;box-sizing:border-box}
#os-greet{font-weight:600;font-size:clamp(20px,3vw,22px);letter-spacing:-.01em;line-height:1.35;color:var(--white);margin:12px 0 0;word-break:keep-all}
#os-mail{font-size:12px;color:var(--mid);line-height:1.7;margin-top:6px;overflow-wrap:anywhere;word-break:break-all;max-width:100%}
#os-lede{font-size:13px;color:var(--mid);line-height:1.8;margin-top:12px;word-break:keep-all;max-width:64ch}
#os-err[hidden]{display:none}
#os-err{grid-column:1/-1;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--warn);background:rgba(227,201,143,.08);color:var(--white);font-size:12.5px;line-height:1.7;padding:12px 14px;word-break:keep-all}
#os-err button{flex:0 0 auto;min-height:34px;padding:0 14px}
#os-widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.os-w{background:var(--coal);border:1px solid var(--hair);padding:18px 18px 16px;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;gap:8px}
.os-w .wtag{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--mid)}
.os-w .wbig{font-weight:600;font-size:20px;color:var(--white);line-height:1.3;word-break:keep-all}
.os-w .wsub{font-size:12px;color:var(--mid);line-height:1.7;word-break:keep-all}
.os-w .wrow{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--white);font:inherit;font-size:12.5px;min-height:40px;padding:8px 2px;cursor:pointer;text-align:left;box-sizing:border-box}
.os-w .wrow:last-child{border-bottom:0}
.os-w .wrow em{flex:1 1 auto;min-width:0;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.os-w .wrow em svg{flex:0 0 auto;color:var(--mid)}
.os-w .wrow small{flex:0 0 auto;font-size:10.5px;color:var(--mid);white-space:nowrap}
.os-w .empty{font-size:12px;color:var(--mid);line-height:1.7;word-break:keep-all}
.os-w .wrow:hover em{color:var(--os-accent)}
.os-w .clock{font-weight:600;font-size:26px;color:var(--white);letter-spacing:.02em;font-variant-numeric:tabular-nums}
/* 위젯 편집 모드 */
.os-w .wctl{display:none;gap:6px;margin-top:6px}
#os-widgets.editing .wctl{display:flex}
#os-widgets.editing .os-w{outline:1px dashed var(--hair2);outline-offset:-5px}
.os-w .wctl button{font-size:10px;min-height:26px;padding:2px 8px;border:1px solid var(--hair);background:none;color:var(--white);cursor:pointer}
/* ---------- Dock ---------- */
#os-dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:rgba(10,10,11,.92);border-top:1px solid var(--hair);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-theme="light"] #os-dock{background:rgba(244,243,239,.94)}
#os-dock.hide{display:none}
#os-dock .dk{position:relative;flex:0 1 96px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:1px solid transparent;color:var(--white);font:inherit;font-size:10px;letter-spacing:.04em;min-height:52px;padding:6px 4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#os-dock .dk:hover{border-color:var(--hair)}
#os-dock .dk .ic{display:inline-flex;font-size:13px;font-weight:700;line-height:1;color:var(--os-accent)}
#os-dock .dk.lk{opacity:.55}
#os-dock .dk .pin{position:absolute;top:3px;right:5px;color:var(--os-accent)}
#os-dock .dk .run{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:14px;height:2px;background:var(--os-accent);display:none}
#os-dock .dk.running .run{display:block}
#os-dock .dk span.lbl{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* ---------- 패널 (런처 · 알림 · 설정 · 검색 공통) ---------- */
.os-panel{position:fixed;inset:0;z-index:90;display:none;background:rgba(10,10,11,.72)}
html[data-theme="light"] .os-panel{background:rgba(10,10,11,.4)}
.os-panel.show{display:flex;align-items:flex-end;justify-content:center}
.os-sheet{background:var(--coal);border:1px solid var(--hair);width:100%;max-width:720px;max-height:86vh;overflow-y:auto;box-sizing:border-box;padding:18px 20px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}
.os-sheet .sh-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.os-sheet .sh-head h2{font-size:15.5px;font-weight:600;color:var(--white);letter-spacing:-.01em;word-break:keep-all;margin:0}
.os-sheet .sh-head .x{background:none;border:1px solid var(--hair);color:var(--white);min-height:34px;min-width:34px;padding:0;cursor:pointer}
.os-sheet .sh-head .acts{display:flex;gap:8px;flex-wrap:wrap}
.os-sheet .sh-head .acts button{font-size:11px;min-height:34px;padding:0 12px;background:none;border:1px solid var(--hair);color:var(--white);cursor:pointer}
/* 앱 런처 */
#os-launcher .apps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#os-launcher .app{display:flex;flex-direction:column;gap:6px;align-items:flex-start;background:var(--bg);border:1px solid var(--hair);padding:16px 14px;cursor:pointer;min-width:0;box-sizing:border-box;font:inherit;text-align:left;color:var(--white)}
#os-launcher .app .an{font-weight:600;font-size:14.5px;word-break:keep-all;line-height:1.3}
#os-launcher .app .ad{font-size:11.5px;color:var(--mid);line-height:1.6;word-break:keep-all}
#os-launcher .app .st{font-size:10px;letter-spacing:.1em;padding:2px 8px;border:1px solid var(--hair);color:var(--mid)}
#os-launcher .app.ok .st{border-color:var(--os-accent);color:var(--os-accent)}
#os-launcher .app.lk{opacity:.6}
#os-launcher .search{width:100%;box-sizing:border-box}
/* 알림 목록 */
#os-notif .nrow{display:flex;gap:10px;align-items:flex-start;width:100%;background:none;border:0;border-bottom:1px solid var(--hair);padding:12px 2px;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box}
#os-notif .nrow .nb{flex:1 1 auto;min-width:0}
#os-notif .nrow .nt{font-size:13px;font-weight:600;color:var(--white);word-break:keep-all;line-height:1.5}
#os-notif .nrow.unread .nt::before{content:'';display:inline-block;width:6px;height:6px;background:var(--os-accent);margin-right:7px;vertical-align:2px}
#os-notif .nrow .nbody{font-size:11.5px;color:var(--mid);line-height:1.7;word-break:keep-all;margin-top:3px}
#os-notif .nrow .nmeta{font-size:10px;color:var(--mid);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#os-notif .nrow .imp{color:var(--os-accent);border:1px solid var(--os-accent);font-size:9px;padding:1px 6px;letter-spacing:.1em}
#os-notif .nrow .ndel{flex:0 0 auto;background:none;border:1px solid var(--hair);color:var(--mid);font-size:10px;min-height:28px;padding:0 8px;cursor:pointer}
/* 설정 */
#os-settings .grp{display:flex;flex-direction:column;gap:8px}
#os-settings .grp h3{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin:0}
#os-settings .opts{display:flex;gap:8px;flex-wrap:wrap}
#os-settings .opt{font-size:11.5px;min-height:36px;padding:6px 14px;background:none;border:1px solid var(--hair);color:var(--white);cursor:pointer}
#os-settings .opt.on{border-color:var(--os-accent);color:var(--os-accent);font-weight:600}
#os-settings .acc{width:30px;height:30px;min-height:0;padding:0;border:2px solid transparent;cursor:pointer}
#os-settings .acc.on{border-color:var(--white)}
/* 검색 */
#os-search .sr{display:flex;flex-direction:column;gap:0}
#os-search .srow{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-bottom:1px solid var(--hair);color:var(--white);font:inherit;font-size:13px;min-height:44px;padding:8px 2px;cursor:pointer;text-align:left;box-sizing:border-box}
#os-search .srow em{font-style:normal;flex:0 0 auto;color:var(--os-accent);font-size:10px;letter-spacing:.14em;width:64px}
#os-search .srow b{flex:1 1 auto;min-width:0;font-weight:600;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- 모바일 ---------- */
@media (max-width:900px){
  #os-widgets{grid-template-columns:repeat(2,1fr)}
  #os-launcher .apps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  #os-bar{padding-left:12px;padding-right:12px;gap:6px}
  #os-acct{display:none}
  #os-bar .os-ic{width:32px;height:32px}
  #os-bar .os-mail{display:none}
  #os-main{padding:24px 16px 130px}
  #os-widgets{grid-template-columns:1fr;gap:12px}
  #os-launcher .apps{grid-template-columns:1fr 1fr}
  #os-dock .dk{flex:1 1 0}
  .os-panel.show{align-items:stretch}
  .os-sheet{max-height:92vh;border-left:0;border-right:0}
}
@media (prefers-reduced-motion:reduce){#os-widgets *{transition:none!important}}

/* --- v1.9.0: 즐겨찾기 핀 · 알림 필터 · 서비스 배지 · 토스트 --- */
.wrowwrap{position:relative}
.wrowwrap .wrow{padding-right:40px}
.pinbtn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--mid);cursor:pointer;padding:0}
.pinbtn.on{color:var(--os-accent,#E3C98F)}
.pinbtn.card{position:static;transform:none;margin-left:auto}
.app .pinbtn{opacity:.85}
.nfilter{display:flex;gap:8px;padding:10px 2px;flex-wrap:wrap}
/* v2.4.0: 서비스명과 알림 수를 flex item 으로 분리 — 이름·숫자가 붙어 보이지 않게 간격을 CSS 로 확보 */
.nfilter .nf{font:inherit;font-size:11px;letter-spacing:.02em;border:1px solid var(--hair);background:none;color:var(--white);cursor:pointer;min-height:32px;padding:4px 12px;display:inline-flex;align-items:center;gap:9px}
.nfilter .nf .nfl{white-space:nowrap;word-break:keep-all}
.nfilter .nf i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:19px;padding:0 7px;border-radius:10px;background:rgba(127,127,127,.16);color:var(--mid);font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;box-sizing:border-box}
.nfilter .nf.on{border-color:var(--os-accent,#E3C98F);color:var(--os-accent,#E3C98F)}
.nfilter .nf.has i{background:var(--os-accent,#E3C98F);color:#0A0A0B;font-weight:700}
.nsvc{font-size:10px;letter-spacing:.08em;border:1px solid var(--hair2);padding:1px 6px;margin-right:6px}
#os-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:#2A2A2E;color:#F4F3EF;font-size:12px;padding:10px 16px;z-index:120;max-width:80vw;word-break:keep-all}

/* --- v2.7.0: 위젯 편집(편집 완료) 상태 · 모바일에서 버튼 터치 영역 확보 --- */
#os-wedit.on{border-color:var(--os-accent,#E3C98F);color:var(--os-accent,#E3C98F)}
@media (max-width:560px){#os-wadd,#os-wedit{flex:1 1 auto;min-height:40px}}

/* v2.28.2: 상단바 우측 빈칸 제거 — 버튼 그룹을 오른쪽 끝에 붙임 */
#os-bar-right-gap-fix{}#os-bar>*:last-child{margin-right:0!important}#os-bar .os-ic:last-of-type{margin-right:0!important}

/* ===== v2.34.3: 홈 상단바 — ☰ 로고 …… 아이콘 묶음(오른쪽 끝). 이메일은 Drawer 안으로 이동 ===== */
#os-bar{gap:10px}
#os-bar .os-mail{display:none!important}
#os-bar .os-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
#os-bar #os-menu{margin-left:-4px}
#os-bar .os-tier{margin-right:2px}
@media (max-width:560px){#os-bar .os-right{gap:6px}#os-bar .os-tier{padding:2px 7px;font-size:10px}}
@media (max-width:480px){#os-bar #os-acct{display:none}#os-bar .os-tier{display:none}#os-drawer .dr-tier{display:inline-block}}
#os-drawer .dr-tier{display:none;align-self:flex-start;margin-top:6px;font-size:10.5px;font-weight:600;letter-spacing:.1em;border:1px solid var(--os-accent,#E3C98F);color:var(--os-accent,#E3C98F);padding:2px 8px;border-radius:999px}

/* ===== 홈 좌측 Drawer (Asset·Pet·CV 와 동일 규격: 폭 min(82vw,300px) · 오버레이 · 슬라이드) ===== */
#os-drawer-ov{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55)}
#os-drawer-ov[hidden]{display:none}
#os-drawer{position:fixed;left:0;top:0;bottom:0;z-index:80;width:min(82vw,300px);box-sizing:border-box;
  display:flex;flex-direction:column;gap:14px;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(52px + env(safe-area-inset-top) + 14px) 14px calc(18px + env(safe-area-inset-bottom));
  background:var(--bg,#0A0A0B);border-right:1px solid var(--hair);color:var(--white);
  transform:translateX(-105%);visibility:hidden;transition:transform .2s ease,visibility 0s linear .2s}
body.os-drawer-open #os-drawer{transform:none;visibility:visible;box-shadow:0 0 40px rgba(0,0,0,.6);transition:transform .2s ease,visibility 0s}
#os-drawer .dr-acct{display:flex;flex-direction:column;gap:3px;padding:0 6px 12px;border-bottom:1px solid var(--hair)}
#os-drawer .dr-k{font-size:10px;letter-spacing:.14em;color:var(--mid);text-transform:uppercase}
#os-drawer .dr-mail{font-size:12.5px;overflow-wrap:anywhere;word-break:break-all}
#os-drawer .dr-t{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);padding:6px 8px 4px}
#os-drawer a,#os-drawer button.dr-i{display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;min-height:48px;padding:0 10px;border:0;border-left:3px solid transparent;border-radius:0;background:none;color:var(--white);font:inherit;font-size:14px;text-align:left;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
#os-drawer a:hover,#os-drawer button.dr-i:hover{background:rgba(244,243,239,.06)}
#os-drawer .on{background:rgba(244,243,239,.08);font-weight:700;border-left-color:var(--os-accent,#E3C98F)}
#os-drawer i.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
#os-drawer .dr-sub{display:block;font-size:11px;color:var(--mid);font-weight:400;margin-top:1px}
#os-drawer .dr-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--hair);display:flex;gap:14px;flex-wrap:wrap;font-size:11px}
#os-drawer .dr-foot a{min-height:0;width:auto;padding:0;border:0;color:var(--mid);display:inline}
/* v2.34.3: Drawer 가 열려도 상단바(☰)가 위에 남도록 — Asset·Pet·CV 와 동일. 바로가기 버튼은 왼쪽 정렬 */
body.os-drawer-open #os-bar{z-index:90}
#os-drawer button.dr-i{justify-content:flex-start}
#os-drawer a,#os-drawer button.dr-i{padding-left:21px}
#os-drawer .dr-foot a{padding-left:0}
@media (max-width:480px){#os-drawer .dr-tier:not([hidden]){display:inline-block}}