:root{
  /* Layout: desktop = icon rail | room list | conversation (white wall, grey/green bubbles). Phone = one column, bottom tabs; a room opens full screen.
     Toss-style system: white surfaces, Toss grey ramp, 16-24px radii, bottom sheets. Accent = mintalk logo blue (#8FA6F0); fills that carry white text use a darker shade (4.9:1). */
  --brand:#8FA6F0; --on-brand:#FFFFFF;
  --primary:#4F63C8; --primary-press:#3F51B0; --primary-text:#3F51B0; --primary-weak:#EEF1FD; --primary-ring:rgba(79,99,200,.35); --on-primary:#FFFFFF;
  --bg:#FFFFFF; --canvas:#F2F4F6; --card:#FFFFFF; --wall:#FFFFFF;
  --fill:#F2F4F6; --fill-strong:#E5E8EB; --hover:rgba(2,32,71,.04);
  --line:#E5E8EB; --line-soft:#F2F4F6; --line-strong:#D1D6DB;
  --t1:#191F28; --t2:#333D4B; --t3:#4E5968; --t4:#6B7684; --t5:#8B95A1; --t6:#B0B8C1;
  --bubble:#F2F4F6; --bubble-ink:#191F28; --mine:#4F63C8; --mine-ink:#FFFFFF; --link:#2E6AD1;
  --unread:#D9480F; --online:#20A35A;
  --red:#E02D3C; --red-bg:#FFEBEE; --red-text:#D22030;
  --orange-bg:#FFF1E6; --orange-text:#C2410C; --orange-ink:#8A3A0B;
  --blue-bg:#E8F3FF; --blue-text:#1B64DA;
  --green-bg:#EEF1FD; --green-text:#3F51B0;
  --c1b:#E8F3FF; --c1f:#1B64DA; --c2b:#FFF1E6; --c2f:#C2410C; --c3b:#F3EDFF; --c3f:#6D3FC0; --c4b:#FFF8DB; --c4f:#8A6100; --c5b:#E6F6EF; --c5f:#0B7A50; --c6b:#FFEDF1; --c6f:#C0264F;
  --mark:#FFE58A; --mark-ink:#2A2000; --mark-ring:#F2C200;
  --row-attn:#FFF8F2;
  --scrim:rgba(0,0,0,.44); --scrim-soft:rgba(0,0,0,.24);
  --sh-1:0 1px 3px rgba(0,27,55,.06); --sh-2:0 6px 20px rgba(0,27,55,.10); --sh-3:0 16px 40px rgba(0,27,55,.18);
  --toast-bg:rgba(25,31,40,.94); --toast-fg:#FFFFFF;
  --viewer:#0B0D10;
  --font:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Pretendard','Noto Sans KR','Malgun Gothic','Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --padL:max(16px, env(safe-area-inset-left, 0px)); --padR:max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --brand:#8FA6F0; --on-brand:#FFFFFF;
  --primary:#4F63C8; --primary-press:#5B70D6; --primary-text:#AFC0FF; --primary-weak:#232842; --primary-ring:rgba(175,192,255,.4); --on-primary:#FFFFFF;
  --bg:#17171C; --canvas:#101013; --card:#202027; --wall:#17171C;
  --fill:#2C2C35; --fill-strong:#3C3C47; --hover:rgba(255,255,255,.05);
  --line:#2C2C35; --line-soft:#222229; --line-strong:#3C3C47;
  --t1:#FFFFFF; --t2:#E4E4E5; --t3:#C3C3C6; --t4:#9E9EA4; --t5:#7E7E87; --t6:#62626D;
  --bubble:#2C2C35; --bubble-ink:#F2F2F3; --mine:#4F63C8; --mine-ink:#FFFFFF; --link:#7FB2FF;
  --unread:#FF8A3D; --online:#3DD47F;
  --red:#E02D3C; --red-bg:#3D1B1F; --red-text:#FF7A85;
  --orange-bg:#3A2414; --orange-text:#FFA36B; --orange-ink:#FFD0B0;
  --blue-bg:#1B2A44; --blue-text:#7FB2FF;
  --green-bg:#232842; --green-text:#AFC0FF;
  --c1b:#1B2A44; --c1f:#7FB2FF; --c2b:#3A2414; --c2f:#FFAA75; --c3b:#2C2340; --c3f:#B79CFF; --c4b:#3A3010; --c4f:#F2CD5C; --c5b:#133A2C; --c5f:#6ED3A6; --c6b:#3D1C27; --c6f:#FF8FAB;
  --mark:#6B5A12; --mark-ink:#FFF6D5; --mark-ring:#B89A22;
  --row-attn:#241F1A;
  --scrim:rgba(0,0,0,.6); --scrim-soft:rgba(0,0,0,.4);
  --sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 8px 24px rgba(0,0,0,.45); --sh-3:0 16px 44px rgba(0,0,0,.6);
  --toast-bg:#3C3C47; --toast-fg:#FFFFFF;
  --viewer:#0B0D10;
  color-scheme:dark }}
:root[data-theme="dark"]{
  --brand:#8FA6F0; --on-brand:#FFFFFF;
  --primary:#4F63C8; --primary-press:#5B70D6; --primary-text:#AFC0FF; --primary-weak:#232842; --primary-ring:rgba(175,192,255,.4); --on-primary:#FFFFFF;
  --bg:#17171C; --canvas:#101013; --card:#202027; --wall:#17171C;
  --fill:#2C2C35; --fill-strong:#3C3C47; --hover:rgba(255,255,255,.05);
  --line:#2C2C35; --line-soft:#222229; --line-strong:#3C3C47;
  --t1:#FFFFFF; --t2:#E4E4E5; --t3:#C3C3C6; --t4:#9E9EA4; --t5:#7E7E87; --t6:#62626D;
  --bubble:#2C2C35; --bubble-ink:#F2F2F3; --mine:#4F63C8; --mine-ink:#FFFFFF; --link:#7FB2FF;
  --unread:#FF8A3D; --online:#3DD47F;
  --red:#E02D3C; --red-bg:#3D1B1F; --red-text:#FF7A85;
  --orange-bg:#3A2414; --orange-text:#FFA36B; --orange-ink:#FFD0B0;
  --blue-bg:#1B2A44; --blue-text:#7FB2FF;
  --green-bg:#232842; --green-text:#AFC0FF;
  --c1b:#1B2A44; --c1f:#7FB2FF; --c2b:#3A2414; --c2f:#FFAA75; --c3b:#2C2340; --c3f:#B79CFF; --c4b:#3A3010; --c4f:#F2CD5C; --c5b:#133A2C; --c5f:#6ED3A6; --c6b:#3D1C27; --c6f:#FF8FAB;
  --mark:#6B5A12; --mark-ink:#FFF6D5; --mark-ring:#B89A22;
  --row-attn:#241F1A;
  --scrim:rgba(0,0,0,.6); --scrim-soft:rgba(0,0,0,.4);
  --sh-1:0 1px 3px rgba(0,0,0,.4); --sh-2:0 8px 24px rgba(0,0,0,.45); --sh-3:0 16px 44px rgba(0,0,0,.6);
  --toast-bg:#3C3C47; --toast-fg:#FFFFFF;
  --viewer:#0B0D10;
  color-scheme:dark }

/* ---------- base ---------- */
html{height:100%;box-sizing:border-box}
*,*::before,*::after{box-sizing:border-box}
body{height:100%;margin:0;background:var(--bg);color:var(--t1);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent;letter-spacing:-.01em}
#app{height:100%}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
a{color:var(--link)}
h1,h2,h3,h4{margin:0;text-wrap:balance;letter-spacing:-.02em}
p{margin:0}
mark{background:var(--mark);color:var(--mark-ink);border-radius:3px;padding:0 1px}
kbd{display:inline-block;min-width:24px;padding:1px 7px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:6px;background:var(--card);font-family:var(--font);font-size:12px;font-weight:600;text-align:center;margin:0 2px;color:var(--t2)}
code{font-family:var(--mono);font-size:.92em;background:var(--fill);padding:1px 5px;border-radius:5px}
:focus-visible{outline:2px solid var(--primary-text);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:var(--fill-strong) transparent}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.fill{fill:currentColor;stroke:none}
.muted{color:var(--t4)}
.small{font-size:12.5px}
.center{text-align:center}
.err{color:var(--red-text);font-size:13px;font-weight:500}
.num{font-variant-numeric:tabular-nums}
.pad{padding:20px}
@keyframes fadeIn{from{opacity:0}}
@keyframes sheetIn{from{transform:translateY(18px);opacity:0}}
@keyframes nfIn{from{transform:translateY(-14px) scale(.98);opacity:0}}
@keyframes drIn{from{transform:translateX(28px);opacity:.3}}
@keyframes prog{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
@keyframes bootShow{to{opacity:1}}

/* ---------- brand ---------- */
.wm{display:block;flex:none;max-width:100%} .wm path{fill:var(--brand)}
.mark{display:block;flex:none} .mark-bg{fill:var(--brand)} .mark-g{fill:var(--on-brand)}
.mark.mono .mark-g{fill:currentColor}

/* ---------- first screens ---------- */
.boot{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px var(--padR) 24px var(--padL);text-align:center}
.boot-msg{color:var(--t4);font-size:14px}
.boot-help{max-width:360px;display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:6px;color:var(--t3);font-size:14px;line-height:1.6;opacity:0;animation:bootShow .3s ease-out 4s forwards}
.center-screen{height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px var(--padR) 24px var(--padL);text-align:center}
/* stacked columns never squeeze their rows when the content is taller than the screen */
.onb-card>*,.center-screen>*,.dr-body>*,.cardcol>*,.stack>*,.guide>*,.nocap>*{flex-shrink:0}
.nocap{max-width:420px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--t3);font-size:15px}
.nocap h2{font-size:21px;font-weight:700;color:var(--t1);margin-bottom:2px}
.nocap .btn{margin-top:14px;min-width:200px}
.onb{height:100%;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:48px var(--padR) 40px var(--padL)}
.onb-card{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px}
.onb-title{font-size:26px;font-weight:700;line-height:1.36;color:var(--t1);margin-top:14px}
.onb-sub{font-size:15px;color:var(--t4);margin-top:-12px}
.onb-roles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.role{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;border:2px solid transparent;background:var(--fill);text-align:left;color:var(--t1)}
.role b{font-size:16px} .role span{font-size:13px;color:var(--t4)}
.role.on{border-color:var(--primary-text);background:var(--primary-weak)}
.info-box{padding:14px 16px;border-radius:16px;background:var(--fill);color:var(--t2);font-size:14px;line-height:1.6}
.notice-box{padding:14px 16px;border-radius:16px;background:var(--orange-bg);color:var(--orange-ink);font-size:14px;line-height:1.6}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:12px;border:0;background:var(--fill);color:var(--t2);font-size:14.5px;font-weight:600;white-space:nowrap;text-decoration:none;transition:background .15s,transform .1s}
.btn:hover{background:var(--fill-strong)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn.pri{background:var(--primary);color:var(--on-primary)}
.btn.pri:hover{background:var(--primary-press)}
.btn.weak{background:var(--primary-weak);color:var(--primary-text)}
.btn.weak:hover{filter:brightness(.97)}
.btn.ghost{background:transparent;color:var(--t3)}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{background:var(--red-bg);color:var(--red-text)}
.btn.ghost.danger{background:transparent}
.btn.danger-fill{background:var(--red);color:#FFFFFF}
.btn.sm{height:32px;padding:0 12px;border-radius:9px;font-size:13px}
.btn.lg{height:54px;padding:0 20px;border-radius:16px;font-size:16.5px;font-weight:700}
.btn.block{width:100%}
.btn.launch{min-width:220px}
.ibtn{width:40px;height:40px;border-radius:12px;border:0;background:transparent;color:var(--t3);display:inline-grid;place-items:center;flex:none;transition:background .15s}
.ibtn:hover{background:var(--hover);color:var(--t1)}
.ibtn.on{background:var(--fill);color:var(--t1)}
.ibtn.sm{width:32px;height:32px;border-radius:10px}
.ibtn.back{display:none}
.lnk{border:0;background:none;padding:0;color:var(--primary-text);font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:4px;cursor:pointer;align-self:flex-start}

/* ---------- inputs ---------- */
.inp,.sel,.ta{width:100%;min-height:50px;padding:12px 16px;border-radius:14px;border:1.5px solid transparent;background:var(--fill);color:var(--t1);font-size:16px;outline:0;transition:border-color .15s,background .15s}
.inp::placeholder,.ta::placeholder{color:var(--t5)}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--primary-text);background:var(--bg)}
.inp:disabled{opacity:.6}
.ta{min-height:110px;resize:vertical;line-height:1.55}
.ta.tall{min-height:170px}
.sel{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238B95A1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.inp.auto,.sel.auto{width:auto;min-height:40px;padding:8px 12px;font-size:14px;border-radius:10px}
.sel.auto{padding-right:36px;background-position:right 10px center}
.sel.sm{width:auto;min-height:32px;padding:4px 32px 4px 10px;font-size:13px;border-radius:9px;background-position:right 8px center}
.inp.mono{font-family:var(--mono);font-size:13.5px}
.inp.pwin{font-size:20px;letter-spacing:4px;text-align:center}
.inwrap{position:relative;display:block}
.inwrap .inp{padding-right:44px}
.unit{position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--t4);font-size:15px}
.search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;background:var(--fill);color:var(--t5)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:0;font-size:15px;color:var(--t1)}
.search input::placeholder{color:var(--t5)}
.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--t2);cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--primary)}
.field{display:flex;flex-direction:column;gap:8px}
.fl{font-size:14px;font-weight:600;color:var(--t3)}
.fl em{font-style:normal;margin-left:6px;font-size:12px;color:var(--orange-text)}
.fh{font-size:12.5px;color:var(--t4)}
.stack{display:flex;flex-direction:column;gap:18px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.nowrap{flex-wrap:nowrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.switch{position:relative;width:52px;height:32px;border-radius:16px;border:0;background:var(--fill-strong);flex:none;transition:background .2s;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#FFFFFF;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .2s}
.switch.on{background:var(--primary)}
.switch.on::after{transform:translateX(20px)}
.switch:disabled{opacity:.5;cursor:default}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line-soft)}
.card > .setrow{margin:0 -20px}
.card > .setrow:first-child{margin-top:-12px} .card > .setrow:last-child{margin-bottom:-12px;border-bottom:0}
.setrow.plain{padding:4px 0;border:0;margin:0}
.setrow.sub{padding-top:0}
.sl{display:flex;flex-direction:column;gap:2px;min-width:0}
.sl b{font-size:15.5px;font-weight:600;color:var(--t1)}
.sl span{font-size:13px;color:var(--t4)}

/* ---------- chips · pills · badges · avatars ---------- */
.chips{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible}
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--fill);color:var(--t3);font-size:14px;font-weight:600;white-space:nowrap;flex:none;transition:background .15s}
.chip:hover{background:var(--fill-strong)}
.chip.on{background:var(--t1);color:var(--bg)}
.chip .n{font-weight:700;opacity:.75}
.pill{display:inline-flex;align-items:center;gap:3px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--fill);color:var(--t3);flex:none}
.pill.green{background:var(--green-bg);color:var(--green-text)}
.pill.orange{background:var(--orange-bg);color:var(--orange-text)}
.pill.blue{background:var(--blue-bg);color:var(--blue-text)}
.pill.red{background:var(--red-bg);color:var(--red-text)}
.pill.gray{background:var(--fill);color:var(--t3)}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--red);color:#FFFFFF;font-size:12px;font-weight:700;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums;flex:none}
.badge.gray{background:var(--t5)}
.av{display:inline-grid;place-items:center;flex:none;border-radius:50%;font-weight:700;line-height:1;overflow:hidden;letter-spacing:-.04em}
img.av{object-fit:cover}
.av.c1{background:var(--c1b);color:var(--c1f)} .av.c2{background:var(--c2b);color:var(--c2f)} .av.c3{background:var(--c3b);color:var(--c3f)}
.av.c4{background:var(--c4b);color:var(--c4f)} .av.c5{background:var(--c5b);color:var(--c5f)} .av.c6{background:var(--c6b);color:var(--c6f)}
.av.hq{background:var(--brand);color:var(--on-brand)}
.av.all{background:var(--orange-bg);color:var(--orange-text)}
.av.hook{background:var(--fill);color:var(--t3)}
.avwrap{position:relative;display:inline-flex;flex:none}
.dot-on{position:absolute;right:0;bottom:0;width:13px;height:13px;border-radius:50%;background:var(--online);border:2.5px solid var(--bg)}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--online);flex:none}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:80px minmax(300px,360px) minmax(0,1fr);height:100%;min-height:0}
.shell.nolist{grid-template-columns:80px minmax(0,1fr)}
.rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px;background:var(--bg);border-right:1px solid var(--line-soft);min-height:0;overflow:auto}
.rail .logo{padding:2px 0 14px}
.rbtn{display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:10px 0;border:0;border-radius:14px;background:transparent;color:var(--t5);transition:background .15s,color .15s}
.rbtn:hover{background:var(--hover);color:var(--t3)}
.rbtn.on{color:var(--t1)}
.rbtn.on .rl-t{font-weight:700}
.ri-ic{position:relative;display:grid;place-items:center}
.rb{position:absolute;top:-7px;right:-13px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#FFFFFF;font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg);font-variant-numeric:tabular-nums}
.rl-t{font-size:11.5px;font-weight:500}
.rail-sp{flex:1}
.me-btn{position:relative;border:0;background:none;padding:4px;border-radius:50%}
.conn{position:absolute;right:3px;bottom:3px;width:12px;height:12px;border-radius:50%;background:var(--t6);border:2px solid var(--bg)}
.conn.on{background:var(--online)}
.side{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--line-soft);background:var(--bg)}
.sh{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:22px 16px 12px 20px;flex:none}
.sh h2{font-size:24px;font-weight:700;color:var(--t1)}
.sh-act{display:flex;gap:6px;align-items:center}
.side-tools{display:flex;flex-direction:column;gap:10px;padding:0 20px 10px;flex:none}
.list{flex:1;overflow-y:auto;min-height:0;padding:4px 0 16px}
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.main.canvas{background:var(--canvas)}
.ph{display:flex;align-items:center;gap:8px;height:64px;padding:0 16px 0 24px;flex:none}
.ph h2{font-size:20px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-act{display:flex;gap:6px;align-items:center}
.pbody{flex:1;overflow:auto;min-height:0;padding:8px var(--padR) 40px var(--padL)}
.cardcol{display:flex;flex-direction:column;gap:12px;max-width:720px;margin:0 auto;width:100%}
.card{background:var(--card);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.flush{padding:0;overflow:hidden;gap:0}
.card h3{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--t1)}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 24px;text-align:center;color:var(--t4)}
.em-ic{width:64px;height:64px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--t5);margin-bottom:6px}
.empty h3{font-size:17px;font-weight:700;color:var(--t2)}
.empty p{font-size:14px;max-width:320px}

/* ---------- room list ---------- */
.ri{display:flex;align-items:center;gap:14px;width:100%;padding:12px 20px;border:0;background:transparent;text-align:left;color:var(--t1);transition:background .12s}
.ri:hover{background:var(--hover)}
.ri.on{background:var(--fill)}
.ri-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ri-top,.ri-bot{display:flex;align-items:center;gap:6px;min-width:0}
.ri-name{font-size:16px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ri-kind{font-size:12px;color:var(--t5);flex:none}
.ri-flag{color:var(--t5);display:inline-flex;flex:none}
.ri-time{margin-left:auto;font-size:12px;color:var(--t4);flex:none;padding-left:8px}
.ri-last{flex:1;min-width:0;font-size:14px;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-last.none{color:var(--t5)}
.typing{color:var(--primary-text);font-weight:600}

/* ---------- chat ---------- */
.chat{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;background:var(--wall)}
.ch-head{display:flex;align-items:center;gap:12px;height:64px;padding:0 12px 0 20px;border-bottom:1px solid var(--line-soft);background:var(--bg);flex:none}
.ch-t{flex:1;min-width:0}
.ch-t h2{font-size:17px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub{font-size:12.5px;color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub.typing{color:var(--primary-text);font-weight:600}
.ch-act{display:flex;gap:2px}
.searchbar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line-soft);background:var(--bg);flex:none}
.searchbar .search{flex:1;height:40px}
.sb-n{font-size:12px;color:var(--t4);min-width:44px;text-align:center}
/* pinned notice: floats under the header, opens downward */
.nbar{margin:10px 12px 0;margin-left:max(12px, env(safe-area-inset-left, 0px));margin-right:max(12px, env(safe-area-inset-right, 0px));background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1);flex:none;overflow:hidden;z-index:3}
.nbar.need{border-color:var(--orange-text)}
.nb-head{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px 11px 12px;border:0;background:none;text-align:left;color:var(--t1)}
.nb-ic{width:34px;height:34px;border-radius:50%;background:var(--primary-weak);color:var(--primary-text);display:grid;place-items:center;flex:none}
.nbar.need .nb-ic{background:var(--orange-bg);color:var(--orange-text)}
.nb-t{flex:1;min-width:0;display:flex;flex-direction:column}
.nb-k{font-size:12px;font-weight:600;color:var(--t4)}
.nbar.need .nb-k{color:var(--orange-text)}
.nb-t b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nbar.open .nb-t b{white-space:normal}
.nb-chev{color:var(--t5);display:inline-flex}
.nb-body{padding:2px 16px 14px 58px;max-height:46vh;overflow-y:auto;animation:fadeIn .2s}
.nb-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.nb-foot .sp{flex:1}
.nbody{display:flex;flex-direction:column;gap:12px}
.nmeta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--t4)}
.body-text{font-size:15.5px;line-height:1.7;color:var(--t2);white-space:pre-wrap;word-break:break-word}
.nbody.compact .body-text{font-size:14.5px;line-height:1.65}
.msgwrap{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.msgs{flex:1;min-height:0;overflow-y:auto;position:relative}
.msgs-in{min-height:100%;display:flex;flex-direction:column;padding:12px var(--padR) 16px var(--padL)}
.grow{flex:1}
.loadmore{align-self:center;margin:8px 0}
.chat-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px 8px 8px;text-align:center;color:var(--t4);font-size:14px}
.chat-empty b{font-size:17px;color:var(--t1)}
.chat-empty .tips{display:flex;flex-direction:column;gap:8px;margin-top:10px;text-align:left;width:100%;max-width:380px}
.chat-empty .tips div{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--t3);background:var(--fill);padding:11px 14px;border-radius:14px}
.dsep{display:flex;justify-content:center;margin:20px 0 6px}
.dsep span{font-size:12px;color:var(--t4);background:var(--fill);padding:4px 12px;border-radius:999px}
.unread-div{display:flex;align-items:center;gap:12px;margin:16px 0 6px;color:var(--primary-text);font-size:12px;font-weight:600}
.unread-div::before,.unread-div::after{content:"";flex:1;height:1px;background:var(--line)}
.sys{display:flex;justify-content:center;margin:10px 0}
.sys span{font-size:12.5px;color:var(--t4);background:var(--fill);padding:5px 12px;border-radius:12px;text-align:center;max-width:86%}
.mrow{display:flex;gap:8px;align-items:flex-start;margin-top:4px}
.mrow.first{margin-top:14px}
.mrow.mine{justify-content:flex-end}
.m-av{width:40px;flex:none}
.m-col{display:flex;flex-direction:column;align-items:flex-start;max-width:min(74%, 560px);min-width:0}
.mine .m-col{align-items:flex-end}
.m-name{font-size:13px;color:var(--t3);font-weight:500;margin:0 0 5px 2px}
.m-line{display:flex;align-items:flex-end;gap:6px;max-width:100%}
.mine .m-line{flex-direction:row-reverse}
.m-meta{display:flex;flex-direction:column;align-items:flex-start;font-size:11px;color:var(--t5);flex:none;white-space:nowrap;line-height:1.35}
.mine .m-meta{align-items:flex-end}
.m-un{color:var(--unread);font-weight:700;font-size:12px}
.bub{background:var(--bubble);color:var(--bubble-ink);border-radius:18px;padding:10px 14px;font-size:15px;line-height:1.5;word-break:break-word;overflow-wrap:anywhere;min-width:0;max-width:100%;cursor:default}
.mine .bub{background:var(--mine);color:var(--mine-ink)}
.mrow.first:not(.mine) .bub{border-top-left-radius:6px}
.mrow.first.mine .bub{border-top-right-radius:6px}
.bub .bt{white-space:pre-wrap}
.bub a{color:var(--link)}
.mine .bub a{color:inherit;text-decoration:underline}
.bub.plain,.bub.card{background:none!important;padding:0;border-radius:0}
.bub.deleted{background:transparent!important;border:1px dashed var(--line-strong);color:var(--t5)!important}
.bub.hl{box-shadow:0 0 0 2px var(--mark-ring)}
.bub .atts{margin-top:6px}
.bub.plain .atts{margin-top:0}
.quote{display:block;margin:0 0 6px;padding:6px 10px;border-left:3px solid var(--primary-text);background:var(--hover);border-radius:8px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;max-width:100%}
.mine .quote{background:rgba(255,255,255,.16);border-left-color:rgba(255,255,255,.85)}
.quote b{margin-right:6px}
.rstag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;margin-bottom:4px;color:var(--green-text)}
.rstag.hold{color:var(--t4)}
.mine .rstag{color:inherit;opacity:.95}
.rxs{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.rx{height:26px;padding:0 9px;border-radius:13px;border:1px solid var(--line);background:var(--card);font-size:12.5px;color:var(--t3)}
.rx.on{border-color:var(--primary-text);color:var(--primary-text);background:var(--primary-weak)}
.mact{display:flex;flex-wrap:wrap;gap:2px;margin-top:6px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-2);z-index:2;animation:fadeIn .12s}
.mact button{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px;border:0;border-radius:10px;background:none;font-size:13px;color:var(--t2)}
.mact button:hover{background:var(--hover)}
.mact button.on{background:var(--primary-weak);color:var(--primary-text)}
.mact .danger{color:var(--red-text)}
.pending{display:flex;justify-content:flex-end;margin-top:8px}
.pending .bub{background:var(--mine);color:var(--mine-ink);opacity:.82;display:flex;flex-direction:column;gap:6px;max-width:74%}
.ptext{font-size:12px;opacity:.9}
.prog{height:4px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.prog i{display:block;height:100%;width:40%;background:#FFFFFF;animation:prog 1.2s ease-in-out infinite}
.pending .row{gap:6px}
.jump{position:absolute;right:16px;bottom:14px;z-index:5;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;border-radius:19px;border:0;background:var(--t1);color:var(--bg);font-size:13.5px;font-weight:700;box-shadow:var(--sh-2)}

/* ---------- attachments ---------- */
.atts{display:flex;flex-direction:column;gap:6px;max-width:100%}
.igrid{display:grid;gap:3px;border-radius:16px;overflow:hidden;max-width:min(300px, 100%)}
.igrid.n1{grid-template-columns:1fr}
.igrid.n2{grid-template-columns:1fr 1fr;width:300px}
.igrid.n3{grid-template-columns:1fr 1fr 1fr;width:300px}
.igrid.n4{grid-template-columns:1fr 1fr;width:300px}
.ithumb{border:0;padding:0;background:var(--fill);display:block;position:relative;aspect-ratio:1;overflow:hidden;cursor:zoom-in;max-width:100%}
.igrid.n1 .ithumb{aspect-ratio:auto;max-height:380px}
.ithumb img{width:100%;height:100%;object-fit:cover;display:block}
.ithumb.broken{min-height:120px}
.ithumb .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#FFFFFF;font-size:20px;font-weight:700}
.vatt{width:300px;max-width:100%;border-radius:16px;overflow:hidden;background:#000000;border:1px solid var(--line)}
.vatt video{display:block;width:100%;max-height:380px;background:#000000}
.vposter{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#111111;color:#FFFFFF}
.vposter img{width:100%;height:100%;object-fit:cover;opacity:.85}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);display:grid;place-items:center}
.vmeta{position:absolute;left:10px;bottom:8px;font-size:12px;background:rgba(0,0,0,.5);padding:2px 8px;border-radius:8px}
.vbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;font-size:12px;color:var(--t3);background:var(--card)}
.vbar.err{color:var(--red-text)}
.fatt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:240px;max-width:340px;color:var(--t1);text-decoration:none}
@media (max-width:520px){.fatt{min-width:0}}
.fbadge{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#FFFFFF;flex:none;background:var(--t5);letter-spacing:0}
.f-xls{background:#1D7044} .f-pdf{background:#E1312C} .f-doc{background:#2B5797} .f-hwp{background:#0B83D9} .f-ppt{background:#D24726} .f-zip{background:#7A5CF0} .f-etc{background:#6B7684}
.fbadge.f-link{background:var(--primary-weak);color:var(--primary-text)}
.fmeta{flex:1;min-width:0;display:flex;flex-direction:column}
.fname{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fsize{font-size:12px;color:var(--t4)}
.fact{display:flex;gap:6px;flex:none}

/* ---------- request & notice cards in chat ---------- */
.reqcard{width:300px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:12px;cursor:pointer;box-shadow:var(--sh-1);color:var(--t1);white-space:normal}
.rq-h{display:flex;align-items:center;gap:10px}
.rq-ic{width:36px;height:36px;border-radius:50%;background:var(--primary-weak);color:var(--primary-text);display:grid;place-items:center;flex:none}
.rq-tt{display:flex;flex-direction:column;min-width:0;flex:1}
.rq-tt b{font-size:15px;font-weight:700}
.rq-tt span{font-size:12px;color:var(--t4)}
.rq-f{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.rq-f dt{color:var(--t4)}
.rq-f dd{margin:0;font-weight:600;color:var(--t1);word-break:break-word}
.rq-th{display:flex;gap:6px}
.rq-th img{width:56px;height:56px;border-radius:10px;object-fit:cover;background:var(--fill)}
.rq-urg{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--red-text)}
.rq-act{display:flex;gap:8px}
.rq-act .btn{flex:1}
.rq-go{display:flex;align-items:center;justify-content:flex-end;gap:2px;font-size:13px;color:var(--t4);font-weight:600}
.refcard{width:280px;max-width:100%;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;box-shadow:var(--sh-1);color:var(--t1);white-space:normal}
.refcard.static{cursor:default}
.rc-k{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--orange-text)}
.refcard b{font-size:15px}
.rc-go{display:flex;align-items:center;gap:2px;font-size:13px;color:var(--primary-text);font-weight:600}

/* ---------- request bar (top of a branch room) ---------- */
.reqbar{display:flex;align-items:center;gap:6px;padding:8px var(--padR) 8px var(--padL);background:var(--bg);border-bottom:1px solid var(--line-soft);flex:none;min-width:0}
.rb-scroll{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.rb-scroll::-webkit-scrollbar{display:none}
.rb-k{display:inline-flex;align-items:center;gap:5px;flex:none;padding-right:4px;font-size:13px;font-weight:700;color:var(--t2)}
.rb-k .ic{color:var(--primary-text)}
.rb-item{display:inline-flex;align-items:center;gap:5px;flex:none;height:34px;padding:0 10px 0 4px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--t1);font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s}
.rb-item:hover{background:var(--fill);border-color:var(--line-strong)}
.rb-ic{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--primary-weak);color:var(--primary-text);flex:none}
.rb-how{display:inline-flex;align-items:center;gap:5px;flex:none;height:34px;padding:0 12px 0 10px;border-radius:999px;border:0;background:var(--primary-weak);color:var(--primary-text);font-size:13px;font-weight:700;white-space:nowrap;transition:filter .15s}
.rb-how:hover{filter:brightness(.96)}
.rb-info,.rb-chev{display:inline-flex}
.rb-chev{display:none;margin-left:-2px}
.reqbar.two{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k how" "sc sc";gap:6px 8px;padding-top:9px;padding-bottom:10px}
.reqbar.two .rb-k{grid-area:k;justify-self:start}
.reqbar.two .rb-how{grid-area:how;height:26px;padding:0 4px 0 10px;background:transparent;font-size:12.5px;gap:3px}
.reqbar.two .rb-how:hover{background:var(--primary-weak);filter:none}
.reqbar.two .rb-info{display:none}
.reqbar.two .rb-chev{display:inline-flex}
.reqbar.two .rb-scroll{grid-area:sc;margin:0 calc(-1 * var(--padR)) 0 calc(-1 * var(--padL));padding:0 var(--padR) 0 var(--padL);scroll-padding:0 var(--padR) 0 var(--padL)}
.hs-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.hs-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px);mask-image:linear-gradient(90deg,transparent,#000 40px)}
.hs-lr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.chat-empty.has-types{padding-top:22px;gap:6px}
.etypes{width:100%;max-width:560px;margin-top:16px;display:flex;flex-direction:column;gap:10px;text-align:left}
.et-hint{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:14px;font-size:12.5px;color:var(--t4)}
.et-hint span{display:inline-flex;align-items:center;gap:5px}
.etypes p{font-size:14px;font-weight:700;color:var(--t2)}
.et-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.et{display:flex;align-items:center;gap:10px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--card);text-align:left;color:var(--t1);min-width:0;transition:background .15s}
.et:hover{background:var(--fill)}
.et > span:last-child{display:flex;flex-direction:column;min-width:0}
.et b{font-size:14px}
.et small{font-size:12px;color:var(--t4);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ---------- menu bar & composer ---------- */
.menubar{display:flex;align-items:center;gap:6px;overflow-x:auto;padding:8px var(--padR) 2px var(--padL);flex:none;scrollbar-width:none;background:var(--bg)}
.menubar::-webkit-scrollbar{display:none}
.menubar .chip{height:34px;font-size:13.5px;gap:5px;padding:0 12px}
.chip.howto{background:var(--primary-weak);color:var(--primary-text)}
.mb-k{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--t4);flex:none;padding-right:2px}
.composer{flex:none;background:var(--bg);padding:8px var(--padR) 12px var(--padL)}
.replybar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 14px;margin-bottom:8px;border-radius:14px;background:var(--fill);font-size:13px}
.replybar div{flex:1;min-width:0;display:flex;flex-direction:column}
.replybar span{color:var(--t4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px}
.titem{position:relative;flex:none;width:92px;display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--t4)}
.titem img,.titem .fbadge{width:92px;height:92px;border-radius:12px;object-fit:cover}
.titem .fbadge{font-size:14px}
.tv{position:absolute;left:36px;top:36px;color:#FFFFFF;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.tedit{position:absolute;left:6px;top:64px;height:22px;padding:0 8px;border:0;border-radius:11px;background:rgba(0,0,0,.62);color:#FFFFFF;font-size:11px}
.tx{position:absolute;right:4px;top:4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.62);color:#FFFFFF;display:grid;place-items:center}
.tname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t2)}
.cbar{display:flex;align-items:flex-end;gap:8px}
.cl{position:relative;flex:none}
.cbtn{width:42px;height:42px;border-radius:50%;border:0;background:var(--fill);color:var(--t3);display:grid;place-items:center;transition:background .15s,transform .15s}
.cbtn:hover{background:var(--fill-strong)}
.cbtn.on{background:var(--t1);color:var(--bg);transform:rotate(45deg)}
.tawrap{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px;background:var(--fill);border-radius:22px;padding:3px 4px 3px 16px;transition:box-shadow .15s}
.tawrap:focus-within{box-shadow:0 0 0 2px var(--primary-ring)}
.tawrap textarea{flex:1;min-width:0;border:0;background:transparent;resize:none;outline:0;font-size:15px;line-height:1.45;padding:8px 0;max-height:180px;color:var(--t1)}
.tawrap textarea::placeholder{color:var(--t5)}
.tawrap .ibtn{margin-bottom:2px}
.send{width:42px;height:42px;border-radius:50%;border:0;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;flex:none;transition:background .15s}
.send:disabled{background:var(--fill);color:var(--t6);cursor:default}
.pop{position:absolute;bottom:calc(100% + 10px);left:0;z-index:20;width:300px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-3);padding:8px;display:flex;flex-direction:column;animation:sheetIn .16s}
.pop button{display:flex;align-items:center;gap:12px;padding:10px;border:0;background:none;border-radius:14px;text-align:left}
.pop button:hover{background:var(--hover)}
.pi{width:42px;height:42px;border-radius:14px;background:var(--fill);display:grid;place-items:center;color:var(--t2);flex:none}
.pop button > span:last-child{display:flex;flex-direction:column;font-size:15px;font-weight:600;color:var(--t1)}
.pop small{font-size:12.5px;color:var(--t4);font-weight:400}
.ro-bar{padding:14px 20px;text-align:center;font-size:13.5px;color:var(--t4);background:var(--fill);flex:none}
.drop{position:absolute;inset:0;z-index:40;background:var(--scrim-soft);display:grid;place-items:center;pointer-events:none}
.drop div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 36px;border-radius:24px;border:2px dashed var(--primary-text);background:var(--card);color:var(--t1)}
.drop span{font-size:13px;color:var(--t4)}

/* ---------- chat menu drawer ---------- */
.drawer-scrim{position:absolute;inset:0;z-index:30;background:var(--scrim-soft);display:flex;justify-content:flex-end;animation:fadeIn .15s}
.drawer{width:min(380px,100%);height:100%;background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--sh-3);animation:drIn .22s cubic-bezier(.2,.8,.2,1)}
.dr-head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 12px 0 20px;flex:none;border-bottom:1px solid var(--line-soft)}
.dr-head h2{font-size:18px;font-weight:700}
.dr-body{flex:1;overflow-y:auto;padding:16px 0 32px;display:flex;flex-direction:column}
.dr-room{display:flex;align-items:center;gap:14px;padding:4px 20px 12px}
.dr-room div{display:flex;flex-direction:column;min-width:0}
.dr-room b{font-size:17px}
.dr-room span{font-size:13px;color:var(--t4)}
.dr-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px 12px 14px}
.dr-acts button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 2px;border:0;background:none;border-radius:14px;font-size:12.5px;color:var(--t2);font-weight:500}
.dr-acts button > span{width:44px;height:44px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--t2)}
.dr-acts button:hover{background:var(--hover)}
.dr-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 20px;border:0;background:none;text-align:left;color:var(--t1)}
.dr-row:hover{background:var(--hover)}
.dr-row.hl{background:var(--primary-weak);margin-bottom:14px}
.dr-ri{width:36px;height:36px;border-radius:50%;background:var(--fill);display:grid;place-items:center;color:var(--t3);flex:none}
.dr-row.hl .dr-ri{background:var(--card);color:var(--primary-text)}
.dr-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.dr-rt b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-rt span{font-size:12.5px;color:var(--t4)}
.dr-sec{padding:14px 0 8px;border-top:8px solid var(--canvas)}
.dr-sec h3{display:flex;align-items:center;gap:6px;padding:2px 20px 8px;font-size:15px;font-weight:700;color:var(--t1)}
.dr-sec h3 span{font-size:13px;color:var(--t4);font-weight:600}
.dr-none{padding:2px 20px 10px;font-size:13.5px;color:var(--t5)}
.dr-more{margin:6px 20px 4px}
.dr-older{display:flex;justify-content:center;padding:14px;border-top:8px solid var(--canvas)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:0 20px}
.mgrid button{position:relative;aspect-ratio:1;border:0;padding:0;background:var(--fill);border-radius:8px;overflow:hidden}
.mgrid img{width:100%;height:100%;object-fit:cover;display:block}
.vb{position:absolute;right:6px;bottom:6px;color:#FFFFFF;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.mlist{display:flex;flex-direction:column;gap:8px;padding:0 20px}
.mlist .fatt{max-width:none;min-width:0}

/* ---------- sheets (bottom sheet on phone, dialog on desktop) ---------- */
.scrim{position:fixed;inset:0;z-index:100;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .15s}
.sheet{background:var(--card);border-radius:24px;width:100%;max-width:480px;max-height:min(88vh, 900px);display:flex;flex-direction:column;box-shadow:var(--sh-3);animation:sheetIn .22s cubic-bezier(.2,.8,.2,1);min-height:0}
.sheet.wide{max-width:760px}
.grab{display:none;width:40px;height:5px;border-radius:3px;background:var(--fill-strong);margin:10px auto 0;flex:none}
.sh-head{display:flex;align-items:flex-start;gap:12px;padding:24px 18px 8px 24px;flex:none}
.sh-tt{flex:1;min-width:0}
.sh-tt h3{font-size:21px;font-weight:700;color:var(--t1);line-height:1.35}
.sh-tt p{font-size:14px;color:var(--t4);margin-top:4px;line-height:1.5}
.sh-body{padding:12px 24px 20px;overflow-y:auto;flex:1;min-height:0}
.sh-body:empty{display:none}
.sh-foot{display:flex;gap:8px;padding:8px 24px 24px;flex:none}
.sh-foot .btn{flex:1}
.sh-foot .btn.pri{flex:1.6}
.sheet.confirm{max-width:400px}
.sheet.pw{max-width:420px}

/* ---------- request guide & forms ---------- */
.guide{display:flex;flex-direction:column;gap:20px}
.guide .tips{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.guide .tips li{display:flex;gap:12px;align-items:flex-start}
.tn{width:28px;height:28px;border-radius:50%;background:var(--primary-weak);color:var(--primary-text);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.guide .tips b{display:block;font-size:15.5px;color:var(--t1)}
.guide .tips span{font-size:14px;color:var(--t3)}
.flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-radius:16px;background:var(--fill)}
.fs{display:flex;flex-direction:column;font-size:14px;font-weight:700;color:var(--t2)}
.fs small{font-size:12px;font-weight:400;color:var(--t4)}
.fs.on{color:var(--primary-text)}
.flow .ic{color:var(--t5)}
.guide h4{font-size:16px;font-weight:700;color:var(--t1)}
.gtypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.gt{border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:10px}
.gt-h{display:flex;align-items:center;gap:10px}
.gt-h b{font-size:15.5px}
.gt ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--t2);flex:1}
.gt-ex{font-size:13px;color:var(--t4);background:var(--fill);padding:8px 12px;border-radius:10px;line-height:1.5}
.guide-lnk{margin-top:16px}
.typegrid{display:flex;flex-direction:column;gap:8px}
.tcard{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;border:0;background:var(--fill);text-align:left;color:var(--t1);transition:background .15s}
.tcard:hover{background:var(--fill-strong)}
.tcard .ic:last-child{color:var(--t5)}
.tc-t{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.tc-t b{font-size:16px}
.tc-t span{font-size:13px;color:var(--t4)}
.dropmini{display:flex;flex-direction:column;gap:8px}
.zone{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 16px;border-radius:14px;border:1.5px dashed var(--line-strong);color:var(--t4);font-size:14px;outline:0}
.zone span{flex:1}
.zone.over,.zone:focus{border-color:var(--primary-text);background:var(--primary-weak)}
.minitray{display:flex;gap:8px;flex-wrap:wrap}
.mt{position:relative;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--fill);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--t3)}
.mt img{width:100%;height:100%;object-fit:cover}
.mt button{position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#FFFFFF;display:grid;place-items:center}
.req-title{font-size:20px;font-weight:700;color:var(--t1);line-height:1.4}
.dmeta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--t4)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;padding:16px;border-radius:16px;background:var(--fill);font-size:14.5px}
.kv dt{color:var(--t4)}
.kv dd{margin:0;color:var(--t1);font-weight:600;word-break:break-word}
.timeline{display:flex;flex-direction:column;gap:10px;padding-left:14px;border-left:2px solid var(--line)}
.timeline div{display:flex;flex-direction:column;font-size:14px;color:var(--t2)}
.timeline time{font-size:12px;color:var(--t4)}

/* ---------- board ---------- */
.li{display:flex;flex-direction:column;gap:6px;width:100%;padding:14px 20px;border:0;background:none;text-align:left;color:var(--t1);transition:background .12s}
.li:hover{background:var(--hover)}
.li.on{background:var(--fill)}
.li-top{display:flex;align-items:center;gap:6px;min-width:0}
.li-title{font-size:15.5px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.li-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--t4)}
.late{color:var(--red-text);font-weight:600}
.okc{color:var(--green-text);font-weight:600}
.warnc{color:var(--orange-text);font-weight:600}
.hotc{color:var(--red-text)}
.ntitle{font-size:22px;font-weight:700;color:var(--t1);line-height:1.38}
.ack-grid{display:flex;flex-wrap:wrap;gap:6px}
.card .btn.weak{align-self:flex-start}
/* on grey canvas pages, loose boxes and plain buttons sit on white; inside white cards they go back to grey */
.main.canvas .info-box{background:var(--card)}
.main.canvas .card .info-box{background:var(--fill)}
.main.canvas .btn:not(.pri):not(.weak):not(.danger):not(.ghost):not(.danger-fill){background:var(--card)}
.main.canvas .card .btn:not(.pri):not(.weak):not(.danger):not(.ghost):not(.danger-fill){background:var(--fill)}
.main.canvas .btn.danger:not(.ghost){background:var(--card);color:var(--red-text)}
.main.canvas .card .btn.danger:not(.ghost){background:var(--red-bg)}

/* ---------- dashboard ---------- */
.summary{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:12px}
.sumt{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:18px 20px;border-radius:20px;border:0;background:var(--card);text-align:left;color:var(--t1);transition:box-shadow .15s}
.sumt span{font-size:14px;color:var(--t4);font-weight:600}
.sumt b{font-size:28px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.sumt small{font-size:15px;color:var(--t5);font-weight:600;margin-left:2px}
.sumt.hot b{color:var(--red-text)}
button.sumt:hover{box-shadow:var(--sh-2)}
.pbody > .notice-box{margin-bottom:12px}
.pbody > .card{margin-bottom:12px}
.pbody > p.small{margin-top:4px}
.tablewrap{overflow-x:auto}
table.dt{width:100%;border-collapse:collapse;font-size:14px;min-width:860px}
.dt th{text-align:left;font-size:12.5px;font-weight:600;color:var(--t4);padding:12px 14px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.dt td{padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.dt tr:last-child td{border-bottom:0}
.dt .num{text-align:right;font-variant-numeric:tabular-nums}
.dt tr.attn td{background:var(--row-attn)}
.nm{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}
.ol{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--t5);white-space:nowrap}
.ol::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--t6)}
.ol.on{color:var(--green-text);font-weight:600}
.ol.on::before{background:var(--online)}
.lastm{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t3)}

/* ---------- settings ---------- */
.setnav{display:flex;flex-direction:column;padding:4px 12px;flex:none}
.setnav button{display:flex;align-items:center;gap:14px;padding:12px;border:0;background:none;border-radius:14px;font-size:16px;font-weight:600;color:var(--t1);text-align:left;transition:background .12s}
.setnav button > span:nth-child(2){flex:1}
.setnav button:hover{background:var(--hover)}
.setnav button.on{background:var(--fill)}
.sn-ic{width:36px;height:36px;border-radius:12px;background:var(--fill);display:grid;place-items:center;color:var(--t3)}
.setnav button.on .sn-ic{background:var(--primary-weak);color:var(--primary-text)}
.setnav button > .ic{color:var(--t5)}
.verline{font-size:12px;color:var(--t5);padding:12px 24px}
.me-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.me-top div{display:flex;flex-direction:column}
.me-top b{font-size:18px;color:var(--t1)}
.me-top span{font-size:13.5px;color:var(--t4)}
.memrow{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
.memrow:last-child{border-bottom:0}
.mi{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px}
.mi b{font-size:15.5px;color:var(--t1)}
.mi span{font-size:13px;color:var(--t4)}
.hookrow{border-bottom:1px solid var(--line-soft)}
.hookrow:last-child{border-bottom:0}
.hk-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px;border:0;background:none;text-align:left;color:var(--t1)}
.hk-head:hover{background:var(--hover)}
.hk-head .ic:last-child{color:var(--t5)}
.hk-t{flex:1;display:flex;flex-direction:column;min-width:0}
.hk-t b{font-size:15.5px}
.hk-t span{font-size:13px;color:var(--t4)}
.hk-body{display:flex;flex-direction:column;gap:12px;padding:4px 20px 20px}
.linkbox{display:flex;gap:8px}
.linkbox .inp{flex:1;min-width:0}
.qr{display:grid;place-items:center;align-self:center;width:200px;height:200px;border-radius:20px;background:#FFFFFF;padding:16px;box-shadow:var(--sh-1);border:1px solid var(--line)}
.qr img,.qr canvas{display:block}
.qr-wait{font-size:12px;color:#6B7684}
.meter{height:10px;border-radius:5px;background:var(--fill);overflow:hidden}
.meter i{display:block;height:100%;background:var(--primary)}
.helpsec{gap:6px}
.helpsec h3{font-size:16px;margin-top:12px}
.helpsec h3:first-child{margin-top:0}
.helpsec ol,.helpsec ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:14.5px;color:var(--t2)}
.helpsec p{font-size:14px;color:var(--t2)}
.helpsec pre{margin:0;padding:12px;border-radius:12px;background:var(--fill);font-family:var(--mono);font-size:12px;overflow-x:auto;white-space:pre;color:var(--t2)}
details.card summary{cursor:pointer;font-size:15px;color:var(--t1);list-style:none;display:flex;justify-content:space-between;align-items:center}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"펼치기";font-size:13px;color:var(--t4);font-weight:500}
details.card[open] summary::after{content:"접기"}

/* ---------- notifications (KakaoTalk-style) & toasts ---------- */
.notifs{position:fixed;top:calc(12px + env(safe-area-inset-top, 0px));right:max(16px, env(safe-area-inset-right, 0px));width:370px;z-index:200;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.notif{display:flex;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-3);overflow:hidden;animation:nfIn .28s cubic-bezier(.2,.8,.2,1);pointer-events:auto}
.notif.urgent{border-color:var(--red-text);box-shadow:0 0 0 2px var(--red-bg),var(--sh-3)}
.notif.notice{border-color:var(--orange-text)}
.nf-main{flex:1;display:flex;gap:12px;padding:14px 6px 14px 14px;text-align:left;border:0;background:none;min-width:0;color:var(--t1)}
.nf-av{flex:none;display:flex}
.nf-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--orange-bg);color:var(--orange-text)}
.nf-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.nf-top{display:flex;align-items:center;gap:6px;min-width:0}
.nf-top b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nf-time{margin-left:auto;font-size:12px;color:var(--t4);flex:none;padding-left:6px}
.nf-who{font-size:13px;color:var(--t3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-msg{font-size:14px;color:var(--t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all}
.nf-x{border:0;background:none;color:var(--t5);padding:12px 12px 0;align-self:flex-start}
.nf-x:hover{color:var(--t1)}
.nf-more{align-self:flex-end;pointer-events:auto;border:0;background:var(--toast-bg);color:var(--toast-fg);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:12px}
.toasts{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);z-index:250;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:var(--toast-bg);color:var(--toast-fg);padding:12px 18px;border-radius:14px;font-size:14px;font-weight:500;box-shadow:var(--sh-2);animation:sheetIn .2s;text-align:center}

/* ---------- capture · annotate ---------- */
.cap{display:flex;flex-direction:column;gap:16px}
.cap-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:14.5px;color:var(--t2)}
.pastezone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 20px;border-radius:20px;border:2px dashed var(--line-strong);color:var(--t4);text-align:center;outline:0}
.pastezone b{font-size:16px;color:var(--t1)}
.pastezone .ic{color:var(--primary-text)}
.pastezone:focus,.pastezone.over{border-color:var(--primary-text);background:var(--primary-weak)}
.cap label.btn{align-self:center}
.anno{display:flex;flex-direction:column;gap:12px}
.anno-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sepv{width:1px;height:24px;background:var(--line)}
.sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);padding:0}
.sw.on{box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--primary-text)}
.anno-stage{position:relative;max-height:62vh;overflow:auto;border-radius:16px;background:var(--fill);display:flex;justify-content:center}
.anno-stage canvas{max-width:100%;height:auto;touch-action:none;cursor:crosshair;display:block}
.anno-text{position:absolute;min-width:160px;height:34px;padding:0 10px;border-radius:8px;border:2px solid var(--primary-text);background:var(--card);color:var(--t1);font-size:15px}

/* ---------- image viewer (always dark) ---------- */
.viewer{position:fixed;inset:0;z-index:300;background:var(--viewer);color:#FFFFFF;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px)}
.vw-top{display:flex;align-items:center;gap:4px;padding:10px var(--padR) 10px var(--padL)}
.vw-top .ibtn{color:#FFFFFF}
.vw-top .ibtn:hover{background:rgba(255,255,255,.12);color:#FFFFFF}
.vw-info{flex:1;min-width:0;display:flex;flex-direction:column}
.vw-info b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw-info span{font-size:12.5px;opacity:.7}
.vw-zoom{font-size:12px;opacity:.8;min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.vw-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:grid;place-items:center;touch-action:none}
.vw-stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .08s;user-select:none}
.vw-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#FFFFFF;display:grid;place-items:center}
.vw-nav.l{left:16px} .vw-nav.r{right:16px}
.vw-strip{display:flex;gap:6px;overflow-x:auto;padding:10px var(--padR) 14px var(--padL);justify-content:center}
.vw-strip button{flex:none;width:56px;height:56px;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#222222;opacity:.6}
.vw-strip button.on{border-color:#FFFFFF;opacity:1}
.vw-strip img{width:100%;height:100%;object-fit:cover}

/* ---------- phone ---------- */
@media (max-width:860px){
  .shell,.shell.nolist{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}
  .rail{grid-row:2;flex-direction:row;justify-content:space-around;align-items:stretch;gap:0;border-right:0;border-top:1px solid var(--line-soft);padding:4px var(--padR) 4px var(--padL);overflow:visible}
  .rail .logo,.rail .me-btn,.rail .rail-sp{display:none}
  .rbtn{flex:1;width:auto;padding:7px 0 5px;border-radius:12px}
  .side,.main{grid-row:1;grid-column:1}
  .side{border-right:0}
  .shell.has-main .side{display:none}
  .shell:not(.has-main) .main{display:none}
  .shell.full .rail{display:none}
  .shell.full{grid-template-rows:minmax(0,1fr)}
  .ibtn.back{display:inline-grid}
  .ch-head{padding-left:4px;padding-right:6px;height:58px;gap:10px}
  .ph{padding-left:4px}
  .sh{padding:16px 12px 10px 16px}
  .side-tools{padding:0 16px 10px}
  .ri{padding:12px 16px}
  .li{padding:14px 16px}
  .m-col{max-width:80%}
  .grid2,.onb-roles{grid-template-columns:1fr}
  .scrim{align-items:flex-end;padding:0}
  .sheet,.sheet.wide,.sheet.confirm,.sheet.pw{max-width:none;border-radius:24px 24px 0 0;max-height:92%}
  .grab{display:block}
  .sh-head{padding:14px 12px 6px 20px}
  .sh-body{padding:10px 20px 16px}
  .sh-foot{padding:8px 20px 16px}
  .notifs{left:max(12px, env(safe-area-inset-left, 0px));right:max(12px, env(safe-area-inset-right, 0px));width:auto}
  .toasts{bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
  .shell.full ~ .toasts{bottom:calc(150px + env(safe-area-inset-bottom, 0px))}
  .gtypes{grid-template-columns:1fr}
  .summary{grid-template-columns:1fr 1fr}
  .sumt{padding:16px}
  .sumt b{font-size:24px}
  .pop{width:min(300px, calc(100vw - 32px))}
  .nb-body{padding-left:16px}
  .dr-acts{grid-template-columns:repeat(4,1fr)}
  .igrid.n2,.igrid.n3,.igrid.n4{width:min(300px, 64vw)}
  .flow{flex-direction:column;align-items:flex-start;gap:6px}
  .et-grid{grid-template-columns:1fr}
  .flow .ic{transform:rotate(90deg);margin-left:8px}
}