/* ────────────────────────────────────────────────────────────
   사례 쪽 공용 틀 (2026-10-11) — /demo/67 · /demo/aes · /demo/dd · /demo/cutoff
   들어오면 실제 프로그램 창(Outlook · PDF · Excel · Chrome dashboard · 폰 텔레그램)이
   차례로 뜨며 일이 처리된다. 창은 1170×720 실제 비율로 그리고 화면 폭에 맞춰 줄인다.
   폰에서는 단계마다 정한 곳으로 다가간다 (case.js 의 focus).
   창 안 글자는 영어만 (미국 데스크 화면) · 데이터는 전부 가상.
   창 모양은 shots\*.html (사이트 카드 그림) 과 같다.
   ──────────────────────────────────────────────────────────── */

/* ── 쪽 ── */
.shell{max-width:1220px;margin:0 auto;padding:0 22px 90px}
[data-l]{display:none}
html[lang="ko"] [data-l="ko"]{display:revert}
html[lang="en"] [data-l="en"]{display:revert}
html[lang="ko"] [data-l="en"],html[lang="en"] [data-l="ko"]{display:none!important}
.win [hidden]{display:none!important}
html[lang="ko"] [data-bk="en"]{display:none}
html[lang="en"] [data-bk="ko"]{display:none}
h1.head{font-size:clamp(23px,3vw,32px);font-weight:660;letter-spacing:-.02em;margin:6px 0 8px;max-width:24em;text-wrap:balance}
p.sub{color:var(--dim);font-size:15.5px;margin:0;max-width:52em;line-height:1.7}

/* 왼쪽 위 「사이트로 돌아가기」 · 오른쪽 아래 「문의하기」 (예전 사례 쪽과 같다) */
.backhome{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px;margin:14px 0 16px}
@media (min-width:1580px){
  .backhome{position:fixed;top:22px;left:max(4px, calc(50% - 610px - 232px));margin:0;z-index:50}
  .backhome .bhtext{margin-left:28px}
}
.backhome .bhlogo{display:block;text-decoration:none}
.backhome .bhlogo img{height:56px;width:auto;display:block}
.backhome .bhtext{text-decoration:none;white-space:nowrap;font-size:13.5px;color:var(--dim)}
.backhome:hover .bhtext{color:var(--accent)}
@media (max-width:640px){
  .backhome{margin:10px 0 12px}
  .backhome .bhlogo img{height:42px}
  .backhome .bhtext{font-size:12.5px}
}
.backhome .bhmail{position:fixed;right:16px;bottom:16px;z-index:60;display:inline-flex;align-items:center;
  text-decoration:none;white-space:nowrap;font-size:13px;font-weight:600;line-height:1.35;color:#fff;
  background:#14655E;border-radius:999px;padding:10px 18px;box-shadow:0 10px 26px -8px rgba(20,101,94,.55)}
.backhome .bhmail:hover{filter:brightness(1.08)}
@media (min-width:1760px){ .backhome .bhmail{position:static;margin-left:28px;white-space:normal;max-width:200px;
  box-shadow:0 6px 16px -8px rgba(20,101,94,.6)} }
@media (max-width:640px){ .backhome .bhmail{font-size:12.5px;padding:9px 15px;right:12px;bottom:12px} }
.bar{padding:10px 0 14px}

/* ── 재생 판 ── */
.pl{margin-top:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);overflow:hidden}
.pl-cap{display:flex;align-items:flex-start;gap:16px;padding:14px 18px 13px;min-height:74px;border-bottom:1px solid var(--line)}
.pl-meta{display:flex;flex-direction:column;gap:3px;flex:none;width:74px;padding-top:2px}
.pl-no{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--faint)}
.pl-clk{font-family:"IBM Plex Mono",monospace;font-size:13.5px;font-weight:600;color:var(--accent);white-space:nowrap}
.pl-say{margin:0;font-size:17px;line-height:1.55;font-weight:500;letter-spacing:-.01em;animation:plsay .45s ease both}
.pl-say b{color:var(--accent);font-weight:650}
.pl-say .hot{color:var(--crit)}
@keyframes plsay{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.pl-screen{position:relative;overflow:hidden;background:#2b2f33;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pl-cam{position:absolute;left:0;top:0;width:1170px;height:720px;transform-origin:0 0;will-change:transform}
.pl-win{position:absolute;inset:0;overflow:hidden;background:#fff}
.pl-win > .win{animation:plwin .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes plwin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* 마우스 — 자동화가 아니라 사람이 누를 때만 나온다 */
.pl-cursor{position:absolute;left:0;top:0;width:22px;height:30px;z-index:40;pointer-events:none;opacity:0;
  transition:opacity .25s;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.pl-cursor[data-on="1"]{opacity:1}
.pl-cursor svg{width:22px;height:30px;display:block;transition:transform .12s}
.pl-cursor.down svg{transform:scale(.86)}
.pl-ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2.5px solid rgba(15,108,189,.75);
  z-index:39;pointer-events:none;animation:plring .55s ease-out forwards}
@keyframes plring{from{transform:scale(.3);opacity:1}to{transform:scale(1.25);opacity:0}}

/* Windows 알림 — 자동화가 하는 일을 한 줄씩 알린다 (줌과 상관없이 실제 크기로) */
.pl-toast{position:absolute;right:14px;bottom:14px;width:330px;z-index:50;background:rgba(249,249,249,.97);
  border:1px solid rgba(0,0,0,.08);border-radius:9px;box-shadow:0 10px 30px rgba(0,0,0,.28);
  padding:11px 14px 12px;font-family:"Segoe UI",system-ui,-apple-system,sans-serif;color:#1f1f1f;line-height:1.35;
  transform:translateX(24px);opacity:0;transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .3s;pointer-events:none}
.pl-toast[data-on="1"]{transform:none;opacity:1}
.pl-toast .th{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#5c5c5c}
.pl-toast .th img{width:16px;height:16px;border-radius:3px}
.pl-toast .th span{margin-left:auto}
.pl-toast .tt{font-size:13.5px;font-weight:600;margin-top:7px}
.pl-toast .tb{font-size:12.5px;color:#3a3a3a;margin-top:2px}
.pl-toast .tp{height:4px;border-radius:2px;background:#e3e3e3;margin-top:9px;overflow:hidden}
.pl-toast .tp i{display:block;height:100%;width:0;background:#14655e;border-radius:2px}

.pl-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:62px;height:62px;border-radius:50%;
  background:rgba(20,24,26,.62);display:grid;place-items:center;opacity:0;transition:opacity .2s;pointer-events:none}
.pl-hint svg{width:22px;height:22px}
.pl-screen[data-paused="1"] .pl-hint{opacity:1}

.pl-ctl{display:flex;align-items:center;gap:8px;padding:11px 14px 12px;border-top:1px solid var(--line)}
.pl-ctl button{width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;flex:none}
.pl-ctl button svg{width:14px;height:14px;display:block}
.pl-ctl .rep{width:auto;padding:0 14px;border-radius:999px;font-size:13px;gap:6px;display:none}
.pl[data-ended="1"] .pl-ctl .rep{display:inline-flex;align-items:center}
.pl[data-ended="1"] .pl-ctl .pp{display:none}
.pl-segs{flex:1;display:flex;gap:4px;margin-left:8px;min-width:0}
.pl-segs button{flex:1;width:auto;height:22px;border-radius:0;border:none;background:none;padding:0;display:block;position:relative}
.pl-segs button::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:var(--line)}
.pl-segs button i{position:absolute;left:0;top:9px;height:4px;border-radius:2px;background:var(--accent);width:0}
.pl-segs button:hover::before{background:var(--faint)}
.pl-time{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--faint);margin-left:8px;white-space:nowrap}

@media (max-width:640px){
  .shell{padding:0 14px 90px}
  .pl{margin-top:16px;border-radius:12px}
  .pl-cap{padding:11px 13px 10px;gap:10px;min-height:96px;flex-direction:column}
  .pl-meta{flex-direction:row;width:auto;gap:10px;align-items:baseline}
  .pl-say{font-size:15px;line-height:1.5}
  .pl-toast{left:6px;right:6px;bottom:6px;width:auto;padding:6px 10px 7px;border-radius:7px}
  .pl-toast .th{display:none}
  .pl-toast .tt{font-size:12px;margin-top:0}
  .pl-toast .tb{font-size:11px}
  .pl-toast .tp{margin-top:5px;height:3px}
  .pl-time{display:none}
}

/* ── 끝나면 나오는 결과 ── */
.endbox{display:none;margin-top:18px}
.endbox[data-on="1"]{display:block;animation:plsay .5s ease both}
.res{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.res{grid-template-columns:1fr}}
.res > div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.res > div.sys{border-color:color-mix(in srgb, var(--accent) 35%, var(--line));background:color-mix(in srgb, var(--accent-soft) 55%, var(--surface))}
.res h3{margin:0 0 12px;font-size:12.5px;letter-spacing:.04em;color:var(--dim);font-weight:600}
.res .sys h3{color:var(--accent)}
.res .nums{display:flex;gap:26px;flex-wrap:wrap}
.res .nums b{display:block;font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.res .hum .nums b{color:var(--crit)}
.res .sys .nums b{color:var(--accent)}
.res .nums span{font-size:12.5px;color:var(--dim)}
.res p{margin:12px 0 0;font-size:14px;color:var(--dim);line-height:1.65}
.endnav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.endnav a{font-size:14px;text-decoration:none}
.endnav .nx{margin-left:auto;font-weight:600}
.foot{margin-top:26px;font-size:12px;color:var(--faint);line-height:1.7;max-width:60em}

/* ────────────────────────────────────────────────────────────
   창 — 항상 밝은 판 (실제 프로그램 화면)
   ──────────────────────────────────────────────────────────── */
.win{position:absolute;inset:0;overflow:hidden;font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  color:#1f1f1f;line-height:normal;word-break:normal;font-size:12.5px;-webkit-font-smoothing:antialiased;background:#fff;text-align:left}
.win *{box-sizing:border-box}
.win svg{display:block}
.win b{font-weight:600}
.win .mono{font-family:Consolas,"Cascadia Mono","SF Mono",Menlo,monospace}
.wc3{position:absolute;right:0;top:0;display:flex}
.wc3 span{width:46px;display:grid;place-items:center}
.wc3 svg{width:10px;height:10px}
.win .fade{transition:opacity .4s,background-color .5s,color .4s,box-shadow .4s}
.win [data-hide="1"]{opacity:0}

/* ── Outlook (classic) — 받은편지함 ── */
.win.ol{background:#f6f6f6}
.ol-title{position:absolute;left:0;top:0;right:0;height:34px;background:#0078d3;display:flex;align-items:center;color:#fff}
.ol-title .qa{display:flex;gap:13px;padding-left:12px}
.ol-title .qa svg{width:15px;height:15px}
.ol-search{position:absolute;left:300px;top:5px;width:420px;height:24px;background:#fafafa;border-radius:4px;display:flex;align-items:center;
  gap:8px;padding-left:12px;font-size:12px;color:#616161}
.ol-search svg{width:14px;height:14px}
.ol-search.q{background:#fff;color:#1f1f1f;box-shadow:0 0 0 2px #fff,0 0 0 3px #0f6cbd}
.ol-title .av{position:absolute;right:160px;top:7px;width:20px;height:20px;border-radius:50%;background:#8a6fc4;font-size:8.5px;font-weight:600;display:grid;place-items:center}
.ol-title .wc3 span{height:34px;color:#fff}
.ol-rail{position:absolute;left:0;top:34px;bottom:22px;width:45px;background:#e4e4e4}
.ol-rail span{display:grid;place-items:center;width:45px;height:44px;color:#505050;position:relative}
.ol-rail span.on{color:#0f6cbd}
.ol-rail span.on::before{content:"";position:absolute;left:4px;top:11px;bottom:11px;width:3px;border-radius:2px;background:#0f6cbd}
.ol-rail svg{width:21px;height:21px}
.ol-tabs{position:absolute;left:45px;right:0;top:34px;height:24px;background:#e4e4e4;display:flex;align-items:center;font-size:12px}
.ol-tabs span{padding:0 9px;height:24px;line-height:22px;position:relative}
.ol-tabs span.on{font-weight:600}
.ol-tabs span.on::after{content:"";position:absolute;left:9px;right:9px;bottom:1px;height:2px;background:#0f6cbd;border-radius:1px}
.rib{position:absolute;left:48px;right:5px;top:58px;height:80px;background:#fff;border:1px solid #dcdcdc;border-radius:6px;display:flex;align-items:stretch;padding:0 2px;overflow:hidden}
.rib .grp{display:flex;flex-direction:column;border-right:1px solid #e1e1e1;padding:4px 5px 0;flex:none}
.rib .grp:last-child{border-right:none}
.rib .gb{flex:1;display:flex;align-items:flex-start;gap:2px}
.rib .gl{font-size:11px;color:#424242;text-align:center;height:16px;line-height:14px;white-space:nowrap}
.rib .big{display:flex;flex-direction:column;align-items:center;min-width:36px;padding:0 3px;font-size:11.5px;line-height:13px;text-align:center;color:#262626}
.rib .big svg{width:28px;height:28px;margin-bottom:3px}
.rib .stk{display:flex;flex-direction:column;gap:1px;padding:0 3px}
.rib .sm{display:flex;align-items:center;gap:5px;font-size:11.5px;height:19px;white-space:nowrap;color:#262626}
.rib .sm svg{width:15px;height:15px}
.rib .box{border:1px solid #c8c8c8;border-radius:2px;height:21px;white-space:nowrap;font-size:11.5px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;gap:6px;margin-bottom:3px}
.rib .box svg{width:7px;height:7px;flex:none}
.rib .fmt{display:flex;gap:2px;align-items:center}
.rib .fmt span{width:21px;height:21px;display:grid;place-items:center;font-size:13px}
.ol-fold{position:absolute;left:52px;top:142px;width:186px;bottom:22px;font-size:12.5px;overflow:hidden}
.ol-fold .fh{display:flex;align-items:center;gap:6px;height:25px;font-size:13.5px;padding-left:4px;white-space:nowrap}
.ol-fold .fh svg{width:9px;height:9px;color:#424242}
.ol-fold .fi{height:23px;display:flex;align-items:center;padding-left:16px;padding-right:12px;position:relative;white-space:nowrap}
.ol-fold .fi.l2{padding-left:30px}
.ol-fold .fi b{margin-left:auto;font-weight:600;color:#1a64ad;font-size:12px}
.ol-fold .fi.sel{background:#e1e1e1;font-weight:600}
.ol-fold .fsep{height:1px;background:#e1e1e1;margin:6px 10px 8px 4px}
.ol-list{position:absolute;left:244px;top:142px;width:386px;bottom:22px;background:#fff;overflow:hidden}
.ol-lh{height:40px;display:flex;align-items:center;padding:0 18px 0 22px;font-size:13.5px;gap:16px}
.ol-lh .all{color:#0f6cbd;position:relative}
.ol-lh .all::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-6px;height:2px;background:#0f6cbd}
.ol-lh .by{margin-left:auto;font-size:12px}
.ol-lh.srch{font-size:12.5px;color:#424242;gap:8px}
.ol-lh.srch b{color:#1f1f1f}
.ol-gh{height:21px;background:#f0f0f0;display:flex;align-items:center;gap:7px;padding-left:12px;font-size:11.5px;color:#424242;border-bottom:1px solid #e6e6e6}
.ol-gh svg{width:9px;height:9px}
.ol-it{position:relative;height:62px;border-bottom:1px solid #ebebeb;padding:7px 18px 0 22px;transition:background-color .35s}
.ol-it .who{font-size:13.5px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:260px}
.ol-it .sub{font-size:11.5px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:280px}
.ol-it .pre{font-size:11px;line-height:15px;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:330px}
.ol-it time{position:absolute;right:18px;top:25px;font-size:11px}
.ol-it .clip{position:absolute;right:20px;top:9px;color:#616161}
.ol-it .clip svg{width:12px;height:14px}
.ol-it.un::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#0078d4}
.ol-it.un .who{font-weight:600}
.ol-it.un .sub,.ol-it.un time{color:#0f6cbd;font-weight:600}
.ol-it.sel{background:#cee6f7;outline:1px solid #9cc6e8;outline-offset:-1px}
.ol-it.hit{background:#fff4ce;outline:1.5px solid #e0b100;outline-offset:-1.5px}
.ol-it.new{animation:olnew .6s ease both}
@keyframes olnew{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.ol-it .flag{position:absolute;right:46px;top:8px;font-size:10.5px;font-weight:600;color:#14655e;background:#e7f0ee;border-radius:3px;padding:0 5px;line-height:16px}
.ol-read{position:absolute;left:638px;top:142px;right:8px;bottom:22px;background:#fff;border-top-left-radius:8px;overflow:hidden}
.ol-rsub{position:absolute;left:20px;top:13px;right:20px;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-rav{position:absolute;left:20px;top:50px;width:42px;height:42px;border-radius:50%;background:#69797d;color:#fff;font-size:14px;display:grid;place-items:center}
.ol-rfrom{position:absolute;left:74px;top:53px;font-size:12.5px;line-height:18px;right:150px}
.ol-rfrom .lbl{color:#616161;display:inline-block;width:22px;font-size:11.5px}
.ol-rfrom .to{font-size:11.5px}
.ol-rbtn{position:absolute;right:20px;top:46px;display:flex;border:1px solid #c8c8c8;border-radius:4px;height:30px;overflow:hidden}
.ol-rbtn span{display:flex;align-items:center;padding:0 8px;border-right:1px solid #c8c8c8}
.ol-rbtn span:last-child{border-right:none}
.ol-rbtn svg{width:15px;height:15px}
.ol-rdate{position:absolute;right:20px;top:82px;font-size:11.5px;color:#424242}
.ol-atts{position:absolute;left:20px;right:20px;top:106px;display:flex;flex-wrap:wrap;gap:6px}
.ol-rbody{position:absolute;left:20px;right:24px;top:118px;font-family:Aptos,Calibri,"Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.36;color:#000}
.ol-atts + .ol-rbody{top:160px}
.ol-atts.r2 + .ol-rbody{top:204px}
.ol-rbody p{margin:0 0 12px}
.ol-rbody .sig{color:#404040;font-size:12.5px;line-height:1.35}
.ol-status{position:absolute;left:0;right:0;bottom:0;height:22px;background:#f7f7f7;border-top:1px solid #e1e1e1;display:flex;align-items:center;padding-left:12px;gap:18px;font-size:11px;color:#424242}
.ol-status .rt{margin-left:auto;padding-right:18px}

/* 붙인 파일 칩 (Outlook 공용) */
.att{width:226px;height:38px;border:1px solid #d6d6d6;border-radius:4px;display:flex;align-items:center;gap:8px;padding:0 8px;background:#fff;position:relative;transition:background-color .4s,box-shadow .4s}
.att .ic{width:22px;height:26px;flex:none}
.att .nm{font-size:12px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.att .nm small{display:block;font-size:11px;color:#616161}
.att .dd{margin-left:auto;color:#616161;flex:none}
.att .dd svg{width:8px;height:8px}
.att.hit{background:#fff8dc;box-shadow:0 0 0 1.5px #e0b100}
.att.new{animation:olnew .45s ease both}

/* ── Outlook 메시지 창 (새 메일 · 회신) ── */
.win.om{background:#f6f6f6}
.om-title{position:absolute;left:0;top:0;right:0;height:34px;background:#f3f3f3;display:flex;align-items:center;border-bottom:1px solid #e3e3e3}
.om-title .qa{display:flex;gap:13px;padding-left:12px;color:#424242}
.om-title .qa svg{width:15px;height:15px}
.om-title .ttl{position:absolute;left:180px;right:180px;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.om-title .wc3 span{height:34px}
.om-tabs{position:absolute;left:0;right:0;top:34px;height:28px;background:#f3f3f3;display:flex;align-items:center;font-size:12.5px;padding-left:6px}
.om-tabs span{padding:0 10px;height:28px;line-height:26px;position:relative}
.om-tabs span.on{font-weight:600;color:#0f6cbd}
.om-tabs span.on::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:#0f6cbd;border-radius:1px}
.om-tabs .tell{margin-left:18px;display:flex;align-items:center;gap:6px;color:#616161}
.om-tabs .tell svg{width:14px;height:14px}
.win.om .rib{left:5px;top:62px;height:84px}
.om-info{position:absolute;left:5px;right:5px;top:152px;height:26px;background:#f0f0f0;border:1px solid #e1e1e1;border-radius:4px;display:flex;align-items:center;gap:8px;padding-left:10px;font-size:12px;color:#424242}
.om-info svg{width:14px;height:14px}
.om-info.sent{background:#e7f0ee;border-color:#cfe3de;color:#14655e}
.om-msg{position:absolute;left:5px;right:5px;top:184px;bottom:6px;background:#fff;border:1px solid #e1e1e1;border-radius:6px;overflow:hidden}
.om-send{position:absolute;left:14px;top:12px;width:60px;height:70px;border:1px solid #c8c8c8;border-radius:4px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;font-size:12px;background:#fff;transition:background-color .15s}
.om-send svg{width:24px;height:24px}
.om-send.press{background:#cfe4f7}
.om-fld{position:absolute;left:86px;right:16px;height:29px;border-bottom:1px solid #e6e6e6;display:flex;align-items:center;gap:10px;font-size:12.5px}
.om-fld .fb{width:58px;height:24px;border:1px solid #c8c8c8;border-radius:3px;font-size:12px;display:grid;place-items:center;background:#fff;flex:none}
.om-fld .fl{width:58px;font-size:12px;color:#424242;flex:none;padding-left:4px}
.om-fld .rc{font-size:12.5px;background:#e9eef5;border-radius:3px;padding:2px 8px}
.om-atts{position:absolute;left:86px;right:16px;top:134px;display:flex;flex-wrap:wrap;gap:7px}
.om-body{position:absolute;left:86px;right:30px;top:180px;font-family:Aptos,Calibri,"Segoe UI",system-ui,sans-serif;font-size:14.2px;line-height:1.34;color:#000}
.om-atts.two + .om-body{top:226px}
.om-body p{margin:0 0 10px}
.om-body table{border-collapse:collapse;margin:2px 0 11px;font-size:13px}
.om-body td{border:1px solid #bfbfbf;padding:3px 9px;vertical-align:top;white-space:nowrap}
.om-body tr:first-child td{background:#f2f2f2;font-weight:600;font-size:12.5px}
.om-body .q{color:#555;border-left:2px solid #ccc;padding-left:10px;margin-top:8px;font-size:12.5px}
.om-body .sig{color:#404040;font-size:12.5px;line-height:1.35}
.om-body i.red{font-style:normal;color:#c42b1c;font-weight:700}

/* ── PDF 보기 ── */
.win.pdf{background:#fff}
.pdf-top{position:absolute;left:0;right:0;top:0;height:42px;background:#f3f3f3;display:flex;align-items:flex-end;padding-left:10px;border-bottom:1px solid #e1e1e1}
.pdf-top .app{width:30px;height:42px;display:grid;place-items:center}
.pdf-top .app svg{width:18px;height:18px}
.pdf-top .menu{height:42px;display:flex;align-items:center;gap:6px;padding:0 12px 0 6px;font-size:12.5px}
.pdf-top .menu svg{width:14px;height:14px}
.pdf-top .dtab{height:34px;display:flex;align-items:center;gap:9px;padding:0 12px 0 14px;font-size:12.5px;border-radius:8px 8px 0 0;margin-right:2px;white-space:nowrap}
.pdf-top .dtab.on{background:#fff;border:1px solid #e1e1e1;border-bottom:none;position:relative;top:1px;height:35px}
.pdf-top .dtab svg{width:15px;height:15px;flex:none}
.pdf-top .dtab .x svg{width:9px;height:9px}
.pdf-top .dtab .x{margin-left:6px;color:#555}
.pdf-top .wc3 span{height:42px}
.pdf-tools{position:absolute;left:0;right:0;top:42px;height:44px;background:#fff;border-bottom:1px solid #e1e1e1;display:flex;align-items:center;padding:0 12px;gap:2px}
.pdf-tools .tb{height:30px;min-width:30px;padding:0 7px;display:flex;align-items:center;gap:6px;border-radius:5px;font-size:12.5px}
.pdf-tools .tb svg{width:16px;height:16px;color:#3b3b3b}
.pdf-tools .tb.on{background:#e8eef9;color:#1a4fa8}
.pdf-tools .sep{width:1px;height:22px;background:#dcdcdc;margin:0 8px}
.pdf-tools .bx{height:24px;border:1px solid #c9c9c9;border-radius:4px;display:grid;place-items:center;padding:0 7px;min-width:30px;font-size:12.5px}
.pdf-tools .rt{margin-left:auto;display:flex;gap:2px}
.pdf-thumbs{position:absolute;left:0;top:86px;bottom:0;width:132px;background:#f7f7f7;border-right:1px solid #e1e1e1;padding:14px 0 0}
.pdf-thumbs .th{width:76px;margin:0 auto 6px;background:#fff;border:1px solid #d6d6d6;height:98px;padding:9px 8px;position:relative}
.pdf-thumbs .th i{display:block;height:2px;background:#d9d9d9;margin-bottom:4px}
.pdf-thumbs .th.on{outline:2px solid #2b62c8;outline-offset:2px}
.pdf-thumbs .th .mk{position:absolute;left:6px;right:6px;height:5px;border:1px solid #d13438}
.pdf-thumbs .tn{text-align:center;font-size:11px;color:#555;margin-bottom:14px}
.pdf-thumbs .tn.on{color:#1a4fa8;font-weight:600}
.pdf-canvas{position:absolute;left:132px;top:86px;bottom:0;right:0;background:#e9e9e9;overflow:hidden}
.win.pdf.side .pdf-canvas{right:338px}
.pdf-page{position:absolute;left:34px;right:34px;top:18px;height:900px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);
  font-family:Arial,Helvetica,sans-serif;color:#111;padding:22px 26px;transition:transform .9s cubic-bezier(.3,.7,.2,1)}
.pdf-page .wm{position:absolute;left:120px;top:260px;font:700 120px/1 Arial,sans-serif;color:rgba(0,0,0,.045);transform:rotate(-28deg);letter-spacing:.06em;pointer-events:none}
.pdf-page .pdh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1.5px solid #111;padding-bottom:7px}
.pdf-page .pdh b{font-size:12.5px;letter-spacing:.04em;font-weight:700}
.pdf-page .pdh small{display:block;font-size:9.5px;color:#333;margin-top:3px;letter-spacing:.02em}
.pdf-page .pdh .r{text-align:right;font-size:10px;line-height:1.45}
.pdf-page .pdh .r b{font-size:11px}
.pdf-page table{width:100%;border-collapse:collapse;margin-top:10px;font-size:10.5px}
.pdf-page th{font-size:8.5px;letter-spacing:.06em;text-align:left;font-weight:700;padding:5px 6px;border-bottom:1px solid #111;white-space:nowrap}
.pdf-page td{padding:0 6px;height:19.5px;border-bottom:1px solid #e3e3e3;white-space:nowrap;font-family:"Courier New",Courier,monospace;font-size:11px;position:relative}
.pdf-page td.n{color:#555;width:36px}
.pdf-page tr.ok td:last-child::after{content:"";position:absolute;right:-22px;top:5px;width:9px;height:5px;border-left:2px solid #2c8a6e;border-bottom:2px solid #2c8a6e;transform:rotate(-45deg)}
.pdf-page .hit{position:relative;display:inline-block}
.pdf-page .hit::before{content:"";position:absolute;left:-4px;right:-4px;top:-3px;bottom:-3px;border:1.6px solid #d13438;background:rgba(255,214,0,.28)}
.pdf-page .kv{display:grid;grid-template-columns:150px 1fr;row-gap:0;font-size:11px;margin-top:10px}
.pdf-page .kv > *{padding:5px 6px;border-bottom:1px solid #e6e6e6}
.pdf-page .kv dt{font-size:9.5px;letter-spacing:.05em;color:#444;font-weight:700}
.pdf-page .kv dd{margin:0;font-family:"Courier New",Courier,monospace}
.pdf-scan{position:absolute;left:0;right:0;height:22px;background:linear-gradient(180deg,rgba(20,101,94,0),rgba(20,101,94,.14) 60%,rgba(20,101,94,.3));
  border-bottom:2px solid rgba(20,101,94,.75);pointer-events:none;opacity:0;transition:opacity .3s}
.pdf-scan[data-on="1"]{opacity:1}
.pdf-side{position:absolute;right:0;top:86px;bottom:0;width:338px;background:#fff;border-left:1px solid #e1e1e1;overflow:hidden}
.pdf-side .sh{height:46px;display:flex;align-items:center;padding:0 16px;font-size:14px;font-weight:600;gap:8px;border-bottom:1px solid #ededed}
.pdf-side .sh .cnt{font-size:11px;color:#555;background:#ececec;border-radius:9px;padding:1px 7px}
.pdf-side .cm{margin:9px 12px 0;border:1px solid #e3e3e3;border-radius:8px;padding:10px 12px 11px;position:relative}
.pdf-side .cm.on{border-color:#c8d6f2;box-shadow:0 0 0 1px #c8d6f2;background:#fbfcff}
.pdf-side .cm .hd{display:flex;align-items:center;gap:8px}
.pdf-side .av{width:26px;height:26px;border-radius:50%;background:#14655e;color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}
.pdf-side .cm .nm{font-size:12.5px;font-weight:600;line-height:1.2}
.pdf-side .cm .tm{font-size:11px;color:#6b6b6b}
.pdf-side .cm .pp{margin-left:auto;font-size:10.5px;color:#555;border:1px solid #dadada;border-radius:4px;padding:1px 6px;white-space:nowrap}
.pdf-side .cm .tx{font-size:12.5px;line-height:1.45;margin-top:7px}
.pdf-side .vs{margin-top:6px;display:grid;grid-template-columns:52px 1fr;row-gap:4px;font-size:12px;align-items:center}
.pdf-side .vs span{color:#6b6b6b}
.pdf-side .vs code{font-family:Consolas,Menlo,monospace;font-size:12.5px}
.pdf-side .vs code i{font-style:normal;color:#c42b1c;font-weight:700;background:#fde7e9;border-radius:2px;padding:0 1px}
.pdf-side .sw{position:absolute;left:-1px;top:12px;bottom:12px;width:3px;border-radius:2px;background:#d13438}
.pdf-side .ok{display:inline-flex;align-items:center;gap:5px;margin-top:8px;font-size:11.5px;font-weight:600;color:#14655e;background:#e7f0ee;border-radius:999px;padding:3px 10px}

/* ── Excel ── */
.win.xl{background:#fff}
.xl-title{position:absolute;left:0;right:0;top:0;height:36px;background:#107c41;color:#fff;display:flex;align-items:center}
.xl-title .qa{display:flex;align-items:center;gap:12px;padding-left:12px;font-size:12px}
.xl-title .qa svg{width:15px;height:15px}
.xl-title .tog{width:34px;height:18px;border:1px solid rgba(255,255,255,.85);border-radius:9px;position:relative}
.xl-title .tog::before{content:"";position:absolute;right:3px;top:3px;width:10px;height:10px;border-radius:50%;background:#fff}
.xl-title .ttl{position:absolute;left:330px;right:430px;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xl-title .ttl small{opacity:.8;font-size:11.5px}
.xl-title .srch{position:absolute;right:250px;top:6px;width:200px;height:24px;border-radius:4px;background:rgba(255,255,255,.18);display:flex;align-items:center;gap:7px;padding-left:10px;font-size:11.5px}
.xl-title .srch svg{width:13px;height:13px}
.xl-title .av{position:absolute;right:160px;top:8px;width:20px;height:20px;border-radius:50%;background:#8a6fc4;font-size:8.5px;font-weight:600;display:grid;place-items:center}
.xl-title .wc3 span{height:36px;color:#fff}
.xl-tabs{position:absolute;left:0;right:0;top:36px;height:28px;background:#f3f3f3;display:flex;align-items:center;font-size:12.5px;padding-left:6px}
.xl-tabs span{padding:0 10px;height:28px;line-height:26px;position:relative;white-space:nowrap}
.xl-tabs span.on{font-weight:600;color:#107c41}
.xl-tabs span.on::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:#107c41;border-radius:1px}
.win.xl .rib{left:5px;top:64px;height:84px}
.xl-fx{position:absolute;left:5px;right:5px;top:154px;height:26px;display:flex;align-items:center;gap:0;font-size:12px}
.xl-fx .nb{width:86px;height:24px;border:1px solid #d0d0d0;display:flex;align-items:center;padding:0 6px;background:#fff}
.xl-fx .ic{display:flex;gap:10px;padding:0 10px;color:#777;font-size:12px}
.xl-fx .ic i{font-style:italic;font-family:Georgia,serif;color:#444}
.xl-fx .fv{flex:1;height:24px;border:1px solid #d0d0d0;display:flex;align-items:center;padding:0 8px;background:#fff;white-space:nowrap;overflow:hidden}
.xl-sheet{position:absolute;left:0;right:0;top:184px;bottom:48px;overflow:hidden;background:#fff;border-top:1px solid #d6d6d6}
.xl-grid{position:absolute;left:0;top:0;transition:transform .7s cubic-bezier(.3,.7,.2,1)}
.xl-grid table{border-collapse:collapse;table-layout:fixed;font-family:Aptos,Calibri,"Segoe UI",system-ui,sans-serif;font-size:12.5px}
.xl-grid td,.xl-grid th{height:21px;border:1px solid #e1e1e1;padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:clip;transition:background-color .35s,color .35s}
.xl-grid th{background:#f3f3f3;color:#444;font-weight:400;font-size:11.5px;text-align:center;border-color:#d6d6d6}
.xl-grid th.rn{width:36px}
.xl-grid th.on{background:#d3e8dc;color:#0e5c31;border-bottom:2px solid #107c41}
.xl-grid td.r{text-align:right;font-variant-numeric:tabular-nums}
.xl-grid td.c{text-align:center}
.xl-grid td.h{font-weight:700;background:#e8f1ec;border-color:#c9d9cf}
.xl-grid td.t{font-weight:700;font-size:14px}
.xl-grid td.bad{background:#ffc7ce;color:#9c0006;font-weight:600}
.xl-grid td.good{background:#c6efce;color:#006100}
.xl-grid td.warn{background:#ffeb9c;color:#9c5700}
.xl-grid td.b{font-weight:700}
.xl-grid td.mut{color:#777}
.xl-grid td.sel{outline:2px solid #107c41;outline-offset:-2px}
.xl-grid tr.fh,.xl-grid tr.sc{display:none}
.xl-grid tr[data-r="0"] td{border-bottom:1.5px solid #9a9a9a}
.xl-grid th.rn.flt{color:#1a64ad}
.xl-grid .fbtn{float:right;width:15px;height:15px;border:1px solid #b8b8b8;background:#fff;border-radius:2px;margin:2px -2px 0 4px;display:grid;place-items:center;color:#555}
.xl-grid .fbtn svg{width:9px;height:9px}
.xl-grid td.tot{font-weight:700;border-top:1.5px solid #555}
.xl-tabsb{position:absolute;left:0;right:0;bottom:22px;height:26px;background:#f3f3f3;border-top:1px solid #d6d6d6;display:flex;align-items:stretch;font-size:12px;padding-left:70px}
.xl-tabsb span{padding:0 16px;display:flex;align-items:center;color:#444;position:relative}
.xl-tabsb span.on{background:#fff;color:#107c41;font-weight:600;box-shadow:inset 0 -2px 0 #107c41}
.xl-tabsb .add{color:#666;font-size:15px;padding:0 10px}
.xl-status{position:absolute;left:0;right:0;bottom:0;height:22px;background:#f3f3f3;display:flex;align-items:center;padding:0 12px;gap:18px;font-size:11px;color:#444}
.xl-status .rt{margin-left:auto;display:flex;gap:16px}

/* ── Chrome + The Export Desk dashboard (카드 그림 case2 · case4 와 같은 모양) ── */
.win.cr{background:#fff}
.cr-strip{position:absolute;left:0;right:0;top:0;height:41px;background:#dfe3eb;display:flex;align-items:flex-end;padding-left:8px;padding-right:150px}
.cr-strip .ts{width:28px;height:28px;display:grid;place-items:center;margin:0 6px 6px 0;color:#444}
.cr-strip .ts svg{width:14px;height:14px}
.cr-tab{position:relative;height:34px;width:228px;display:flex;align-items:center;gap:8px;padding:0 10px 0 12px;font-size:12px;flex:0 1 auto;min-width:0}
.cr-tab .fav{width:16px;height:16px;flex:none;border-radius:3px;display:grid;place-items:center}
.cr-tab .tt{flex:1;white-space:nowrap;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.cr-tab .x{width:16px;height:16px;display:grid;place-items:center;color:#474747;flex:none}
.cr-tab .x svg{width:8px;height:8px}
.cr-tab:not(.on)::after{content:"";position:absolute;right:0;top:9px;bottom:9px;width:1px;background:#a8aeb6}
.cr-tab.on{background:#fff;border-radius:8px 8px 0 0}
.cr-tab.on::before,.cr-tab.on .ft{content:"";position:absolute;bottom:0;width:8px;height:8px}
.cr-tab.on::before{left:-8px;background:radial-gradient(circle at 0 0,transparent 7.5px,#fff 8px)}
.cr-tab.on .ft{right:-8px;background:radial-gradient(circle at 100% 0,transparent 7.5px,#fff 8px)}
.cr-strip .nt{width:28px;height:28px;display:grid;place-items:center;margin:0 0 3px 6px;color:#444}
.cr-strip .nt svg{width:13px;height:13px}
.cr-strip .wc3 span{height:32px}
.cr-bar{position:absolute;left:0;right:0;top:41px;height:46px;background:#fff;display:flex;align-items:center;gap:4px;padding:0 8px;border-bottom:1px solid #e3e3e3}
.cr-bar .nb{width:32px;height:32px;display:grid;place-items:center;color:#474747}
.cr-bar .nb svg{width:16px;height:16px}
.cr-omni{flex:1;height:36px;border-radius:18px;background:#e9eef6;display:flex;align-items:center;gap:10px;padding:0 14px;font-size:14px;margin:0 6px}
.cr-omni .tune{width:24px;height:24px;display:grid;place-items:center;color:#474747}
.cr-omni .tune svg{width:15px;height:15px}
.cr-omni .path{color:#5e5e5e}
.cr-omni .star{margin-left:auto;color:#474747}
.cr-omni .star svg{width:16px;height:16px}
.cr-bar .prof{width:28px;height:28px;border-radius:50%;background:#8a6fc4;color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;margin:0 6px}
.db{position:absolute;left:0;right:0;top:87px;bottom:0;display:flex;background:#f6f7f7}
.db-side{width:208px;flex:none;background:#1f2b2f;color:#d9e3e4;padding:20px 14px}
.db-side .brand b{display:block;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em}
.db-side .brand small{display:block;font-size:9.5px;letter-spacing:.16em;color:#7fa6a3;margin-top:3px}
.db-side .sec{font-size:9.5px;letter-spacing:.16em;color:#6f8487;margin:22px 0 7px 8px}
.db-side .nv{display:flex;align-items:center;gap:11px;height:33px;padding:0 10px;border-radius:7px;font-size:13.5px;color:#c9d5d6;position:relative}
.db-side .nv svg{width:15px;height:15px;color:#8fa3a6}
.db-side .nv.on{background:#2c3b40;color:#fff}
.db-side .nv.on::before{content:"";position:absolute;left:-14px;top:7px;bottom:7px;width:3px;border-radius:2px;background:#38b0b8}
.db-side .nv.on svg{color:#38b0b8}
.db-side .nv em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;min-width:20px;height:18px;border-radius:9px;display:grid;place-items:center;background:#38b0b8;color:#0d2a2d;padding:0 6px}
.db-side .nv em.g{background:#3a4a4f;color:#c9d5d6}
.db-main{flex:1;padding:18px 24px;min-width:0;overflow:hidden;position:relative}
.db-crumb{font-size:10.5px;letter-spacing:.14em;color:#8a9496}
.db-crumb b{color:#1f2b2f;font-weight:600;letter-spacing:.04em}
.db-hrow{display:flex;align-items:flex-end;gap:16px;margin-top:12px}
.db-eyb{font-size:10.5px;letter-spacing:.16em;color:#8a9496;margin-bottom:4px}
.db-h1{font-size:25px;font-weight:700;letter-spacing:-.015em;color:#1a1f21;margin:0;line-height:1.2}
.db-sub{font-size:13px;color:#5b6466;margin-top:4px}
.db-live{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12.5px;color:#14655e;background:#e7f0ee;border-radius:999px;padding:5px 12px;white-space:nowrap;transition:background-color .4s,color .4s}
.db-live i{width:7px;height:7px;border-radius:50%;background:#2c8a6e;box-shadow:0 0 0 3px rgba(44,138,110,.18)}
.db-live.wait{background:#fdf1dc;color:#8a5a00}
.db-live.wait i{background:#c98a14;box-shadow:0 0 0 3px rgba(201,138,20,.2)}
.db-grid{display:grid;grid-template-columns:minmax(0,1fr) 312px;gap:16px;margin-top:16px}
.db-card{background:#fff;border:1px solid #e3e6e6;border-radius:10px;overflow:hidden}
.db-ch{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid #eceeee;font-size:13px;font-weight:600;color:#1f2b2f}
.db-ch span{font-weight:400;font-size:12px;color:#7a8486}
.db-t{width:100%;border-collapse:collapse;font-size:12.5px}
.db-t th{font-size:10px;letter-spacing:.12em;color:#8a9496;font-weight:600;text-align:left;padding:9px 9px;border-bottom:1px solid #eceeee;text-transform:uppercase;white-space:nowrap}
.db-t td{padding:0 9px;height:40px;border-bottom:1px solid #f0f2f2;color:#1f2b2f;white-space:nowrap;transition:background-color .4s}
.db-t td.m{font-family:Consolas,"Cascadia Mono",Menlo,monospace;font-weight:600}
.db-t td.r{text-align:right;font-variant-numeric:tabular-nums}
.db-t td small{display:block;font-size:11px;color:#7a8486;line-height:1.2}
.db-t td s{color:#9aa3a5;font-size:11.5px;margin-right:4px}
.db-t tr.sel td{background:#fffaf0}
.db-t tr.sel td:first-child{box-shadow:inset 3px 0 0 #c98a14}
.db-t tr.done td{background:#f3faf7}
.db-t tr.done td:first-child{box-shadow:inset 3px 0 0 #2c8a6e}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 9px;white-space:nowrap;transition:background-color .4s,color .4s}
.chip.ok{background:#e7f0ee;color:#14655e}
.chip.wait{background:#fdf1dc;color:#8a5a00}
.chip.run{background:#eef1f2;color:#5b6466}
.chip.done{background:#14655e;color:#fff}
.db-foot{padding:9px 14px;font-size:11.5px;color:#7a8486}
.db-btns{display:flex;gap:8px;margin-top:10px}
.db-btn{height:32px;border-radius:6px;display:flex;align-items:center;padding:0 14px;font-size:12.5px;font-weight:600;transition:filter .15s}
.db-btn.p{background:#14655e;color:#fff}
.db-btn.p.press{filter:brightness(.85)}
.db-btn.s{border:1px solid #cfd5d5;color:#1f2b2f;background:#fff}

/* ── 폰 (텔레그램) — 창 위에 올라온다 ── */
.ph-dim{position:absolute;inset:0;background:rgba(10,14,16,.42);opacity:0;transition:opacity .5s;z-index:20}
.ph-dim[data-on="1"]{opacity:1}
.ph{position:absolute;right:120px;top:40px;width:318px;height:648px;border-radius:50px;background:#101214;padding:11px;z-index:21;
  box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 0 0 2px #3a3d40;transform:translateY(760px);transition:transform .8s cubic-bezier(.2,.8,.25,1)}
.ph[data-on="1"]{transform:none}
.ph-scr{position:relative;width:100%;height:100%;border-radius:40px;overflow:hidden;background:#cfdcc0;font-family:-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif}
.ph-scr::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.35) 0 2px,transparent 3px) 0 0/34px 34px,
  radial-gradient(circle at 70% 70%,rgba(110,140,90,.18) 0 3px,transparent 4px) 0 0/46px 46px,
  linear-gradient(160deg,#dfe8c9,#bcd3a6 55%,#a9c79c)}
.ph-sb{position:absolute;left:0;right:0;top:0;height:46px;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 34px;font-size:14px;font-weight:600;color:#111;z-index:3}
.ph-sb .isl{position:absolute;left:50%;top:10px;width:96px;height:28px;margin-left:-48px;border-radius:15px;background:#000}
.ph-sb .ic{display:flex;gap:5px;align-items:center}
.ph-sb .ic svg{width:17px;height:11px}
.ph-hd{position:absolute;left:0;right:0;top:46px;height:52px;background:rgba(247,247,247,.94);border-bottom:.5px solid rgba(0,0,0,.18);display:flex;align-items:center;padding:0 12px;z-index:3}
.ph-hd .bk{color:#2481cc;font-size:15px;display:flex;align-items:center;gap:2px}
.ph-hd .bk svg{width:10px;height:17px}
.ph-hd .nm{position:absolute;left:0;right:0;text-align:center;line-height:1.2}
.ph-hd .nm b{display:block;font-size:15px;font-weight:600;color:#000}
.ph-hd .nm small{font-size:12px;color:#8a8a8e}
.ph-hd .av{margin-left:auto;width:36px;height:36px;border-radius:50%;background:#14655e;color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;position:relative;z-index:1}
.ph-msgs{position:absolute;left:0;right:0;top:98px;bottom:52px;padding:10px 10px 8px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;z-index:2;overflow:hidden}
.ph-day{align-self:center;font-size:12px;font-weight:600;color:#fff;background:rgba(80,100,70,.45);border-radius:10px;padding:2px 9px;margin-bottom:4px}
.ph-b{align-self:flex-start;max-width:86%;background:#fff;border-radius:16px 16px 16px 5px;padding:7px 10px 6px;font-size:13.5px;line-height:1.36;color:#000;box-shadow:0 1px .5px rgba(0,0,0,.13);position:relative}
.ph-b.me{align-self:flex-end;background:#e1fec6;border-radius:16px 16px 5px 16px}
.ph-b b{font-weight:600}
.ph-b .tm{float:right;font-size:11px;color:#8c9a86;margin:6px 0 -3px 10px}
.ph-b.me .tm{color:#5fa344}
.ph-b .mono{font-family:Menlo,"SF Mono",Consolas,monospace;font-size:12px}
.ph-b.new{animation:phnew .45s cubic-bezier(.2,.8,.3,1.2) both}
@keyframes phnew{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.ph-kb{align-self:flex-start;width:86%;display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:-2px}
.ph-kb span{background:rgba(68,98,60,.38);color:#fff;font-size:13.5px;font-weight:600;text-align:center;border-radius:9px;padding:8px 4px;transition:background-color .2s}
.ph-kb span.press{background:rgba(40,70,35,.7)}
.ph-kb span.full{grid-column:1/-1}
.ph-in{position:absolute;left:0;right:0;bottom:0;height:52px;background:rgba(247,247,247,.96);border-top:.5px solid rgba(0,0,0,.15);display:flex;align-items:center;gap:9px;padding:0 10px 8px;z-index:3}
.ph-in .f{flex:1;height:32px;border-radius:16px;background:#fff;border:.5px solid #d6d6d6;font-size:14px;color:#a0a0a0;display:flex;align-items:center;padding-left:12px}
.ph-in svg{width:22px;height:22px;color:#8a8a8e}
.ph-tap{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:rgba(255,255,255,.55);z-index:5;pointer-events:none;animation:phtap .5s ease-out forwards}
@keyframes phtap{from{transform:scale(.3);opacity:.9}to{transform:scale(1.4);opacity:0}}