/* Y-Work — 화면 스타일
   색·레이아웃 규칙이 전부 여기 있습니다. 여기만 고치면 화면 전체가 바뀝니다. */

/* 앱 글꼴 (2026-10-01) : 폰에서 '시스템 글꼴'을 손글씨 등으로 바꿔 두어도 앱은 늘 같은 글꼴로 보이게 서버에서 글꼴을 내려보냅니다.
   ymsans-*.woff = Noto Sans CJK KR (SIL 오픈 폰트 라이선스) 에서 한글 11,172자·영문·기호만 뽑은 것 */
@font-face{font-family:"YM Sans";font-weight:400;font-style:normal;font-display:swap;src:url("/ymsans-400.woff") format("woff")}
@font-face{font-family:"YM Sans";font-weight:500;font-style:normal;font-display:swap;src:url("/ymsans-500.woff") format("woff")}
@font-face{font-family:"YM Sans";font-weight:700;font-style:normal;font-display:swap;src:url("/ymsans-700.woff") format("woff")}

:root{
  --ink:#1B1A19; --ink-2:#5C6373; --ink-3:#8B91A1;
  --line:#E1E5EC; --line-2:#EDF0F5;
  --bg:#F4F6FA; --surface:#FFFFFF; --surface-2:#EFF2F7; --surface-3:#E6EAF2;
  --navy:#243553; --navy-ink:#243553; --tag:#1A73E8;
  --red:#C32C31; --charcoal:#322E2B;
  --me-bg:#243553; --me-ink:#FFFFFF;
  --you-bg:#FFFFFF; --you-ink:#1B1A19;
  --rail:#242A36; --rail-ink:#9BA3B4; --rail-on:#FFFFFF;
  --wash:#E7ECF6;
  --ok:#2E7D5B; --warn:#B26A00;
  --on-navy:#FFFFFF;
  --shadow:0 1px 2px rgba(24,32,52,.06), 0 8px 24px rgba(24,32,52,.07);
  --shadow-sm:0 1px 2px rgba(24,32,52,.07);
  --sans:"YM Sans","IBM Plex Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR",Roboto,"Malgun Gothic","맑은 고딕",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",Consolas,"YM Sans",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EAEDF3; --ink-2:#A3AABA; --ink-3:#767D8E;
    --line:#2B3240; --line-2:#232936;
    --bg:#12151B; --surface:#1A1E27; --surface-2:#222833; --surface-3:#2A313D;
    --navy:#6E92D6; --navy-ink:#8FAEE8; --tag:#7DB4FF;
    --red:#E4676B;
    --me-bg:#2E4877; --me-ink:#F2F5FB;
    --you-bg:#232935; --you-ink:#EAEDF3;
    --rail:#0F1319; --rail-ink:#7E869A;
    --wash:#222C40;
    --ok:#5DBF92; --warn:#E0A44A;
    --on-navy:#12151B;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ink:#EAEDF3; --ink-2:#A3AABA; --ink-3:#767D8E;
  --line:#2B3240; --line-2:#232936;
  --bg:#12151B; --surface:#1A1E27; --surface-2:#222833; --surface-3:#2A313D;
  --navy:#6E92D6; --navy-ink:#8FAEE8; --tag:#7DB4FF;
  --red:#E4676B;
  --me-bg:#2E4877; --me-ink:#F2F5FB;
  --you-bg:#232935; --you-ink:#EAEDF3;
  --rail:#0F1319; --rail-ink:#7E869A;
  --wash:#222C40;
  --ok:#5DBF92; --warn:#E0A44A;
  --on-navy:#12151B;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ══ 데스크탑 둥근 창 (2026-09-16 원장님 "프로그램 자체 모서리를 부드럽게") ══════════
   프로그램이 창 테두리를 없애고 바탕을 투명하게 주면(html.frameless), 화면이 12px 둥근 판 + 제목줄을 직접 그립니다.
   화면 전체(고정 배치된 팝업·뷰어 포함)를 clip-path 로 둥글게 잘라내고, 제목줄 32px 만큼 아래로 내립니다. 최대화 창은 각지게. */
:root{--winbar:0px}
html.frameless{--winbar:32px;background:transparent;overflow:hidden}
/* body 를 창 크기에 고정하고 안에서 스크롤 → 화면 밖으로 넘친 내용(로그인 화면 등)도 잘려 사라지지 않고 스크롤됩니다 */
html.frameless body{background:transparent;clip-path:inset(0 round 12px);position:fixed;inset:0;height:auto;overflow:auto}
html.frameless.maximized body{clip-path:none}
html.frameless body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg);pointer-events:none}
html.frameless body::after{content:"";position:fixed;inset:0;z-index:200;border:1px solid rgba(0,0,0,.28);border-radius:12px;pointer-events:none}
html.frameless.maximized body::after{display:none}
.winbar{position:fixed;left:0;right:0;top:0;height:var(--winbar);z-index:150;display:flex;align-items:center;gap:8px;padding:0 0 0 12px;
  background:var(--surface);border-bottom:1px solid var(--line-2);-webkit-app-region:drag;user-select:none;color:var(--ink-2);font-size:12.5px}
.winbar .wblogo{width:16px;height:16px;flex:none}
.winbar .wbtitle{flex:1;min-width:0;font-weight:600;letter-spacing:.01em}
.wbbtns{display:flex;height:100%;-webkit-app-region:no-drag}
.wbbtn{width:46px;height:100%;display:grid;place-items:center;color:var(--ink-2);border-radius:0}
.wbbtn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.1}
.wbbtn:hover{background:rgba(0,0,0,.07)}
.wbbtn.close:hover{background:#c42b1c;color:#fff}
.wbbtn .wbrestore{display:none}
html.maximized .wbbtn .wbmax{display:none}
html.maximized .wbbtn .wbrestore{display:block}
html.frameless .app{height:calc(100dvh - var(--winbar));margin-top:var(--winbar)}
html.frameless body[data-zoom="120"] .app,html.frameless body[data-zoom="150"] .app{height:calc((100dvh - var(--winbar)) / var(--zoomf))}
html.frameless .sheet,html.frameless .viewer,html.frameless .settings,html.frameless .lockscreen{top:var(--winbar)}
html.frameless .sheetbox.fullpage{height:calc(100dvh - var(--winbar))}
html.frameless .auth{min-height:calc(100dvh - var(--winbar));margin-top:var(--winbar)}
html.frameless .updbar{top:calc(10px + var(--winbar))}

/* ══ 로그인 ══════════════════════════════════════════ */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px 20px}
.authbox{width:100%;max-width:380px}
.authhead{text-align:center;margin-bottom:26px}
.authhead svg{width:76px;height:76px}
.authhead h1{margin:14px 0 4px;font-size:24px;font-weight:600;letter-spacing:-.02em}
.authhead p{margin:0;font-size:13px;color:var(--ink-3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px 20px;box-shadow:var(--shadow)}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.field input{
  width:100%;padding:11px 13px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);font-size:15px;
}
.field input:focus{outline:none;border-color:var(--navy);background:var(--surface)}
.btn{
  width:100%;padding:12px;border-radius:10px;background:var(--navy);color:var(--on-navy);
  font-size:15px;font-weight:600;letter-spacing:-.01em;
}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink-2);font-weight:500;font-size:14px}
.btn.danger{background:var(--red);color:#fff}
.btn.ghost.danger{background:var(--surface);color:var(--red);border:1px solid color-mix(in srgb,var(--red) 40%,transparent)}
.btn.ghost.danger:hover{background:color-mix(in srgb,var(--red) 8%,var(--surface))}
.authswap{text-align:center;margin-top:16px;font-size:13px;color:var(--ink-3)}
.authswap button{color:var(--navy-ink);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.msg{margin:0 0 14px;padding:10px 12px;border-radius:9px;font-size:13px;line-height:1.5}
.msg.err{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.msg.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.hint{font-size:12px;color:var(--ink-3);margin:-8px 0 14px}

/* ── 로그인 화면 아래 «앱으로 쓰기» ────────────────────── */
.getapp{margin-top:26px}
.galine{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3);margin-bottom:11px}
.galine::before,.galine::after{content:"";flex:1;height:1px;background:var(--line)}
.gabtns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gabtn{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 4px 11px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px;
  box-shadow:var(--shadow-sm);transition:border-color .13s, transform .13s;
}
.gabtn:hover{border-color:var(--navy);transform:translateY(-1px)}
.gabtn:active{transform:none}
.gabtn svg{width:24px;height:24px;stroke:var(--navy-ink);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.gabtn b{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:-.02em;text-align:center}
.gabtn span{font-size:10.5px;color:var(--ink-3);text-align:center;line-height:1.35}
.gabtn[aria-pressed="true"]{border-color:var(--navy);
  background:color-mix(in srgb,var(--navy) 7%,var(--surface))}
.gahint{margin:11px 0 0;font-size:12px;line-height:1.6;color:var(--ink-2);
  background:var(--surface-2);border-radius:10px;padding:10px 12px}
.gahint b{color:var(--ink);font-weight:600}
.gahint.on{background:color-mix(in srgb,var(--navy) 6%,var(--surface));
  border:1px solid color-mix(in srgb,var(--navy) 18%,transparent);text-align:left}
.gawarn{display:inline-block;margin-top:6px;color:var(--red);font-weight:600;font-size:11.5px;line-height:1.5}
.gainline{display:inline-block;margin-top:8px;padding:6px 12px;border:1px solid var(--navy);border-radius:999px;color:var(--navy-ink);background:var(--surface);font-size:12px;font-weight:600}
.gainline:hover{background:var(--wash)}
.gabtn.on{border-color:var(--navy);
  background:color-mix(in srgb,var(--navy) 8%,var(--surface));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--navy) 16%,transparent)}
.gabtn.on b{color:var(--navy-ink)}
.galink{margin:9px 0 0;text-align:center;font-size:12px}
.galink a{color:var(--navy-ink);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--navy) 35%,transparent)}
.galink a:hover{border-bottom-color:var(--navy)}

/* 웹 브라우저로 열었을 때 — 로그인 칸은 접어 둡니다 (v1.7.1) */
.getapp:first-of-type{margin-top:0;margin-bottom:20px}
.webfold{margin-top:4px}
.webfoldbtn{display:flex;width:100%;align-items:center;justify-content:center;gap:6px;
  padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow-sm)}
.webfoldbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .16s}
.webfold.open .webfoldbtn{border-color:var(--navy);color:var(--navy-ink)}
.webfold.open .webfoldbtn svg{transform:rotate(180deg)}
.webfoldbody{margin-top:11px}
@media (max-width:360px){ .gabtns{grid-template-columns:1fr} .gabtn{flex-direction:row;gap:9px;padding:11px 13px}
  .gabtn b,.gabtn span{text-align:left} .gabtn>div{flex:1} }

/* ══ 앱 ══════════════════════════════════════════════ */
.app{container-type:inline-size;container-name:app;height:100dvh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.shell{flex:1;display:flex;min-height:0}

.mhead{display:flex;align-items:center;gap:9px;padding:12px 15px 10px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}
.mhead .mark{width:26px;height:26px;flex:none}
.mhead b{flex:1;font-size:16px;font-weight:600;letter-spacing:-.01em}

.rail{display:none;width:74px;flex:none;background:var(--rail);flex-direction:column;align-items:center;padding:14px 0 10px;gap:2px}
.rail .mark{width:32px;height:32px;margin-bottom:12px}
.rail button{width:60px;height:48px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--rail-ink);font-size:9px;font-weight:500;white-space:nowrap;letter-spacing:-.02em;transition:background .15s,color .15s;position:relative}
.rail button svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail button[aria-pressed="true"]{background:#ffffff14;color:var(--rail-on)}
.rail .sp{flex:1}

.list{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--surface)}
.lhead{padding:14px 16px 10px;display:none;align-items:center;gap:8px;flex-wrap:wrap}
.lhead h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;flex:1}
.iconbtn{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2);flex:none}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.search{margin:0 16px 10px;display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:9px;padding:2px 11px}
.search svg{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:1.8;flex:none}
.search input{flex:1;border:0;background:none;padding:8px 0;font-size:13px}
.search input:focus{outline:none}
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.empty{padding:40px 24px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.7}

.room{display:flex;gap:11px;padding:11px 16px;width:100%;text-align:left;align-items:flex-start;border-bottom:1px solid var(--line-2)}
.room:hover{background:var(--surface-2)}
.room[aria-current="true"]{background:var(--wash)}
.av{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:600;color:#fff;letter-spacing:-.02em}
.c0{background:#3C5A8C}.c1{background:#7A5E93}.c2{background:#2F7A6B}
.c3{background:#9A5A3C}.c4{background:#4A6B8A}.c5{background:#8C5A76}
/* v1.8.1 — 메모지처럼 다양하게 6가지 더 */
.c6{background:#C0392B}.c7{background:#D98E04}.c8{background:#2E8B57}
.c9{background:#1F8FBF}.c10{background:#E0557A}.c11{background:#6B7B3C}
.colorpick{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 16px}
.colorpick button{width:40px;height:40px;padding:0;border-radius:50%;position:relative}
.colorpick button .av{width:40px;height:40px;border-radius:50%;transition:transform .12s}
.colorpick button[aria-pressed="true"] .av{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--navy);transform:scale(1.08)}
.colorpick button[aria-pressed="true"]::after{content:"✓";position:absolute;right:-3px;bottom:-3px;width:16px;height:16px;border-radius:50%;background:var(--navy);color:var(--on-navy,#fff);font-size:10px;line-height:16px;text-align:center;font-weight:700}
.av.notice{background:var(--red)}
/* 학원 이름이 들어간 방 — 로고 */
.av.logo{background:#fff;border:1px solid var(--line);padding:5px}
.av.logo svg{width:100%;height:100%;display:block}
.chead .cav .av.logo.grp{background:#fff}
.rmain{flex:1;min-width:0}
.rtop{display:flex;align-items:baseline;gap:7px}
.rname{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcount{font-size:11.5px;color:var(--ink-3);font-family:var(--mono);flex:none}
.rprev{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.rmeta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;padding-top:2px}
.rtime{font-size:11px;color:var(--ink-3);font-family:var(--mono);font-variant-numeric:tabular-nums}
.badge{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}

.chat{flex:2;min-width:0;display:none;flex-direction:column;background:var(--bg);position:relative}
.chat.dropping::after{content:"여기에 놓으면 보냅니다";position:absolute;inset:8px;z-index:60;border:2px dashed var(--navy);border-radius:16px;background:rgba(36,53,83,.08);display:grid;place-items:center;font-size:16px;font-weight:600;color:var(--navy);pointer-events:none}
.chead{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line);flex:none}
.back{display:none;width:30px;height:30px;border-radius:8px;place-items:center;color:var(--ink-2);flex:none}
.back svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chead .cav{flex:none;display:flex}
.chead .cav .av{width:38px;height:38px;border-radius:50%;font-size:12px}
.chead .cav .av.grp{border-radius:12px;background:var(--navy)}
.ctitle{flex:1;min-width:0}
.ctitle b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctitle span{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
/* 인원수 — 누르면 누가 있는지 보고 초대·내보내기까지 됩니다 (v1.7) */
.csub{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--ink-3);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--mono);padding:1px 7px 1px 5px;margin-left:-5px;border-radius:11px}
.csub:hover{background:var(--surface-2);color:var(--navy-ink)}
.csub::after{content:"›";font-size:13px;opacity:.6}
.csub.flat::after{content:""}
.csub.flat{font-family:inherit;cursor:default}

.msgs{flex:1;overflow-y:auto;padding:16px 14px 8px;display:flex;flex-direction:column;gap:13px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--roombg,transparent)}
/* 날짜가 바뀌면 가로선과 함께 날짜를 보여 줍니다 (v1.7) */
.daysep{align-self:stretch;display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink-3)}
.daysep::before,.daysep::after{content:"";flex:1;height:1px;background:var(--line)}
.daysep i{font-style:normal;background:var(--surface-3);padding:3px 12px;border-radius:20px;flex:none}

/* ══ 채팅방 배경색 12가지 (v1.7) — 사람마다 방마다 따로 정합니다 ══ */
.msgs[data-bg="cream"]    {--roombg:#FBF6EC}
.msgs[data-bg="apricot"]  {--roombg:#FCEFE6}
.msgs[data-bg="pink"]     {--roombg:#FCEBF0}
.msgs[data-bg="lavender"] {--roombg:#F1EDFB}
.msgs[data-bg="sky"]      {--roombg:#E9F2FC}
.msgs[data-bg="mint"]     {--roombg:#E6F5F0}
.msgs[data-bg="grass"]    {--roombg:#EDF5E6}
.msgs[data-bg="lemon"]    {--roombg:#FBF7DF}
.msgs[data-bg="sand"]     {--roombg:#F4EFE7}
.msgs[data-bg="slate"]    {--roombg:#ECEFF4}
.msgs[data-bg="coral"]    {--roombg:#FCEDEA}
.msgs[data-bg="violet"]   {--roombg:#F6EBF7}
@media (prefers-color-scheme: dark){
  /* 어두운 화면에서는 같은 색을 아주 어둡게 깝니다 (눈이 부시지 않게) */
  .msgs[data-bg="cream"]    {--roombg:#242118}
  .msgs[data-bg="apricot"]  {--roombg:#261D18}
  .msgs[data-bg="pink"]     {--roombg:#26191E}
  .msgs[data-bg="lavender"] {--roombg:#1E1B2A}
  .msgs[data-bg="sky"]      {--roombg:#18202B}
  .msgs[data-bg="mint"]     {--roombg:#172422}
  .msgs[data-bg="grass"]    {--roombg:#1C2419}
  .msgs[data-bg="lemon"]    {--roombg:#252315}
  .msgs[data-bg="sand"]     {--roombg:#242019}
  .msgs[data-bg="slate"]    {--roombg:#1B1F25}
  .msgs[data-bg="coral"]    {--roombg:#261A18}
  .msgs[data-bg="violet"]   {--roombg:#241A26}
}
.bgswatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:4px}
.bgsw{aspect-ratio:1.25;border-radius:12px;border:2px solid var(--line);position:relative;
  display:grid;place-items:end center;padding-bottom:5px;font-size:10px;color:var(--ink-3)}
.bgsw[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 2px color-mix(in srgb,var(--navy) 25%,transparent)}
.bgsw span{background:var(--surface);border-radius:8px;padding:1px 6px}

/* ══ 방 공지 (v1.7) ══════════════════════════════════════════ */
.noticebar{display:flex;align-items:flex-start;gap:9px;flex:none;padding:10px 14px;
  background:color-mix(in srgb,var(--navy) 7%,var(--surface));
  border-bottom:1px solid var(--line);cursor:pointer}
.noticebar .nicon{flex:none;width:17px;height:17px;margin-top:1px;color:var(--navy-ink)}
.noticebar .nicon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ntext{flex:1;min-width:0;font-size:12.5px;line-height:1.5;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.noticebar.open .ntext{white-space:pre-wrap;overflow:visible;max-height:32vh;overflow-y:auto}
.ntext b{display:block;font-size:11px;color:var(--ink-3);font-weight:600;margin-bottom:2px}
.nfold{flex:none;width:22px;height:22px;border-radius:6px;color:var(--ink-3);transition:transform .18s}
.nfold svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.noticebar.open .nfold{transform:rotate(180deg)}

/* ══ 대화 검색줄 (v1.7) ══════════════════════════════════════ */
.searchbar{display:flex;align-items:center;gap:6px;flex:none;padding:8px 10px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.searchbar .sicon{width:17px;height:17px;flex:none;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round}
.searchbar input{flex:1;min-width:0;border:0;background:transparent;font-size:13.5px;color:var(--ink);outline:none}
.scount{flex:none;font-size:11.5px;color:var(--ink-3);font-family:var(--mono);min-width:44px;text-align:right}
.hitmark{background:color-mix(in srgb,var(--yellow,#F2C14E) 55%,transparent);border-radius:3px}
.bubblerow.hitnow .bub,.bubblerow.hitnow .bigemo{outline:2px solid var(--navy);outline-offset:2px}
.more{align-self:center;font-size:12px;color:var(--navy-ink);padding:4px 12px}
.noticetop{align-self:center;display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.noticetop .more{border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.bubblerow{display:flex;gap:9px;max-width:82%}
/* 답장 빠른 단추 (2026-09-16) — PC 는 마우스를 올리면, 폰은 오른쪽으로 밀면 */
.replyquick{display:none;align-self:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--ink-3);font-size:15px;flex:none;border:1px solid var(--line)}
/* 마우스 있는 기기에서는 답장 단추 자리를 늘 비워 둡니다 —
   전에는 마우스를 올릴 때 단추가 새로 생기면서 말풍선이 밀려 화면이 흔들렸습니다 (2026-09-17 원장님) */
@media (hover:hover){
  .replyquick{display:grid;place-items:center;visibility:hidden;opacity:0;transition:opacity .12s}
  .bubblerow:hover .replyquick{visibility:visible;opacity:1}
  .replyquick:hover{color:var(--navy-ink);border-color:var(--navy)}
}
.bubblerow.swiping .replyquick{display:grid;place-items:center;color:var(--navy-ink)}
.bubblerow .av{width:34px;height:34px;border-radius:11px;font-size:12px}
.mbody{min-width:0}
.mname{font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:4px}
.brow{display:flex;align-items:flex-end;gap:6px}
.bub{background:var(--you-bg);color:var(--you-ink);padding:9px 12px;border-radius:4px 13px 13px 13px;font-size:13.5px;box-shadow:var(--shadow-sm);white-space:pre-wrap;word-break:break-word}
.bub.gone{background:none;box-shadow:none;color:var(--ink-3);font-style:italic;padding-left:0;font-size:12.5px}
.stamp{font-size:10.5px;color:var(--ink-3);font-family:var(--mono);white-space:nowrap;padding-bottom:2px;font-variant-numeric:tabular-nums}
.bubblerow.me{align-self:flex-end;flex-direction:row-reverse}
.bubblerow.me .brow{flex-direction:row-reverse}
.bubblerow.me .bub{background:var(--me-bg);color:var(--me-ink);border-radius:13px 4px 13px 13px;box-shadow:none}
.bigemo{font-size:44px;line-height:1.1;padding:2px 4px}
/* ══ 사진·영상 바로 보기 (v1.7) ══════════════════════════════
   jpg·png·gif 를 보내면 파일 이름 대신 그림이 바로 뜹니다. */
.photocard{display:block;border-radius:4px 13px 13px 13px;overflow:hidden;position:relative;
  max-width:min(260px,66vw);background:var(--surface-3);line-height:0;box-shadow:var(--shadow-sm)}
.bubblerow.me .photocard{border-radius:13px 4px 13px 13px}
.photocard img,.photocard video{width:100%;height:auto;max-height:320px;object-fit:cover;display:block}
.photocard.tall img{max-height:340px;width:auto;max-width:100%}
.photocard .gifmark{position:absolute;left:7px;top:7px;background:rgba(0,0,0,.58);color:#fff;
  font-size:10px;font-weight:600;border-radius:5px;padding:2px 6px;line-height:1.4;letter-spacing:.02em}
.photocard .playmark{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;font-size:17px;padding-left:3px}
.photocard:hover{filter:brightness(.96)}

/* 미리보기 + 파일 정보를 함께 (v1.7.1)
   그림 아래에 이름 · 용량 · [저장] 을 한 줄로 붙입니다. */
.photowrap{display:inline-block;max-width:min(260px,66vw);
  border-radius:4px 13px 13px 13px;overflow:hidden;background:var(--you-bg);
  box-shadow:var(--shadow-sm)}
.bubblerow.me .photowrap{border-radius:13px 4px 13px 13px}
.photowrap .photocard{max-width:100%;border-radius:0;box-shadow:none}
.photofoot{display:flex;align-items:center;gap:7px;padding:7px 9px 7px 10px;line-height:1.3;min-width:0}
.photofoot b{flex:1;min-width:0;font-size:11.5px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photofoot>span{flex:none;font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.psave{flex:none;display:inline-flex;align-items:center;gap:3px;padding:3px 7px 3px 5px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font-size:10.5px;font-weight:600}
.psave svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.psave i{font-style:normal}
.psave:hover{border-color:var(--navy);color:var(--navy-ink);background:var(--surface-2)}
.psave:active{transform:scale(.96)}

.filecard{display:flex;gap:10px;align-items:center;background:var(--you-bg);border-radius:4px 13px 13px 13px;padding:10px 12px;box-shadow:var(--shadow-sm);min-width:0;text-align:left}
.bubblerow.me .filecard{border-radius:13px 4px 13px 13px}
/* 파일 아이콘 — 종류 색의 문서(종이) 모양, 오른쪽 위 모서리 접힘 (2026-09-16) */
.ficon{--fc:var(--ink-2);position:relative;width:30px;height:36px;flex:none;display:grid;place-items:end center;padding-bottom:4px;
  font-family:var(--mono);font-size:8.5px;font-weight:600;color:#fff;background:var(--fc);
  border-radius:4px;clip-path:polygon(0 0,68% 0,100% 24%,100% 100%,0 100%)}
.ficon .fold{position:absolute;top:0;right:0;width:32%;height:24%;background:rgba(255,255,255,.45);border-bottom-left-radius:3px}
.ficon.xls{--fc:#1E7145}.ficon.pdf{--fc:#B5252A}.ficon.hwp{--fc:#1E5AA8}
.ficon.doc{--fc:#2B579A}.ficon.img{--fc:#7A5E93}.ficon.zip{--fc:#8A6D3B}
/* 폴더 아이콘 — 윈도우 탐색기풍 노란 폴더(SVG 심볼 #icoFolder) */
.ficon.dir{width:38px;height:34px;background:none;clip-path:none;padding:0;display:grid;place-items:center;border-radius:0}
.ficon.dir svg{width:38px;height:32px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.fmeta{min-width:0;flex:1}
.fdl{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);color:var(--navy-ink)}
.fdl svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fdl:hover{background:var(--surface-2)}
.flinks{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:12.5px}
.flink{color:#2F6FD6;padding:0;background:none;border:0;font-size:12.5px;cursor:pointer}
.flink:hover{text-decoration:underline}
.fdot{color:var(--ink-3)}
/* 파일함 (데스크탑) */
.filebox .galpickhead{border-bottom:0;padding:14px 16px 4px}
.filebox .galpickhead h3{font-size:20px;font-weight:700}
.fbsub{display:flex;align-items:center;gap:8px;padding:0 16px 10px;font-size:12.5px;color:var(--ink-3);border-bottom:1px solid var(--line)}
.fbsub .csp{flex:1}
.fbbody{flex:1;overflow-y:auto;padding:4px 0 20px}
.fbday{padding:16px 16px 6px;font-size:12.5px;color:var(--ink-3);font-weight:600}
.fbrow{display:flex;gap:14px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.fbrow .fmeta b{display:block;font-size:14px;font-weight:600;color:var(--ink);word-break:break-all}
.fbrow .fmeta span{font-size:12px;color:var(--ink-3)}
.fbrow .ficon{width:34px;height:40px;margin-top:2px}
/* ══ 수식 그리기 (2026-09-16) — 분수는 위아래로, 근호는 윗줄, 첨자는 작게 ══ */
.mgrp{display:inline-flex;align-items:center;white-space:nowrap}
.mth i{font-style:italic;font-family:"Times New Roman",var(--font),serif;padding:0 .5px}
.mop{padding:0 3px}
.mfn{padding-right:2px;font-style:normal}
.mfrac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 3px;line-height:1.15}
.mnum{display:block;padding:0 3px 1px;border-bottom:1.3px solid currentColor}
.mfrac.noline .mnum{border-bottom:none}
.mden{display:block;padding:1px 3px 0}
.msqrt{display:inline-flex;align-items:stretch;margin:0 1px}
.mrad{display:flex;align-items:flex-end;line-height:.95;font-size:1.2em;transform:translateY(.06em)}
.mrbody{display:flex;align-items:center;border-top:1.4px solid currentColor;padding:0 3px 0 1px;margin-top:2px}
.mbig{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 2px}
.mbigtop,.mbigbot{font-size:.66em;line-height:1.1;min-height:0}
.mbigmid{font-size:1.25em;line-height:1}
.mbigmid .mfn{font-size:.8em}
.msup,.msub{font-size:.72em;line-height:1;display:inline-block}
.msup{vertical-align:super;transform:translateY(-.15em)}
.msub{vertical-align:sub;transform:translateY(.18em)}
.mvec{display:inline-flex;flex-direction:column;align-items:center;line-height:1;vertical-align:baseline}
.mvec::before{content:"→";font-size:.6em;line-height:.9}
.mvec.bar::before{content:"";width:100%;border-top:1.2px solid currentColor;margin-bottom:1px}
.mvec.hat::before{content:"^";font-size:.75em;line-height:.6}
/* 미리보기 칸 */
.mprev{margin:6px 0 0;padding:9px 11px;border:1px dashed var(--line);border-radius:10px;background:var(--wash);
  font-size:14px;line-height:1.9;color:var(--ink);min-height:20px;word-break:break-word}
.mprev .empty{margin:0;font-size:12px;color:var(--ink-3)}
.mprevlab{display:block;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.mth{display:inline-flex;align-items:center;font-size:1em;background:var(--surface-2);border-radius:4px;padding:1px 4px;white-space:nowrap;vertical-align:middle}
.paper .mth{background:none;font-family:"Times New Roman",serif;font-style:italic;font-size:1em}
.setgrip{flex:none;padding:6px 4px;color:var(--ink-3);font-size:14px;letter-spacing:-3px;cursor:grab;touch-action:none;user-select:none}
.setmv{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-size:11px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.setmv:active{background:var(--surface-3)}
.setrow .setmv + .setmv{margin-left:-6px}
.orgorder{display:block;margin:14px auto 20px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;color:var(--ink-2)}
.setrow.fixed{opacity:.75}
.setrow.dragging{background:var(--surface-2);box-shadow:var(--shadow);position:relative;z-index:2;cursor:grabbing}
/* 연달아 보낸 사진 묶음 — 작은 네모 격자 (2026-09-16 원장님: 카카오톡처럼 축소된 미리보기) */
.photogrid{display:grid;gap:3px;width:min(252px,64vw);border-radius:4px 13px 13px 13px;overflow:hidden;background:var(--you-bg);box-shadow:var(--shadow-sm)}
.bubblerow.me .photogrid{border-radius:13px 4px 13px 13px}
.photogrid.two{width:min(216px,60vw)}
.ptile{position:relative;aspect-ratio:1;overflow:hidden;background:var(--surface-2);padding:0;border:0;display:block;cursor:pointer;-webkit-touch-callout:none}
.ptile img{width:100%;height:100%;object-fit:cover;display:block}
.ptile:hover img{filter:brightness(.94)}
.ptile .pmore{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.5);color:#fff;font-size:20px;font-weight:700}
/* 파일·사진 옆 동그라미 — 내 것은 공유, 남의 것은 내려받기 (2026-09-16) */
.fside{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;align-self:center;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);box-shadow:0 1px 2px rgba(24,32,52,.06)}
.fside svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fside:hover{background:var(--surface-2);color:var(--navy-ink)}
.fside:active{transform:scale(.94)}
/* 아바타 글자 — 이름 길이에 맞춰 글자 크기를 줄여 네모 안에 다 들어가게 (v1.8) */
.av{padding:0 2px;box-sizing:border-box;text-align:center;line-height:1.05;word-break:keep-all;overflow:hidden}
.av[data-len="3"]{font-size:11px;letter-spacing:-.06em}
.av[data-len="4"]{font-size:9px;letter-spacing:-.08em}
.bubblerow .av[data-len="3"]{font-size:9.5px}
.bubblerow .av[data-len="4"]{font-size:8px}
.person .av[data-len="3"]{font-size:10px}
.person .av[data-len="4"]{font-size:8.5px}
.fmeta b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmeta span{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
/* ══ 꾹 누르기 메뉴 (v1.7) — 카카오톡처럼 위에 반응, 아래에 메뉴 ══ */
/* 반응 줄 — 유리알 알약 모양.
   바깥은 살짝 비치는 알약, 안은 이모지마다 동그란 홈이 하나씩 파여 있습니다. */
.quickreact{
  display:flex;align-items:center;justify-content:space-between;gap:2px;
  margin:2px 0 14px;padding:6px 8px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 8px 24px rgba(24,32,52,.14),0 1px 2px rgba(24,32,52,.06);
}
.quickreact button{
  width:42px;height:42px;flex:none;border-radius:50%;
  font-size:26px;line-height:1;display:grid;place-items:center;
  transition:transform .13s ease, background .13s ease;
}
.quickreact button:hover{background:var(--surface-2);transform:scale(1.12)}
.quickreact button:active{transform:scale(.92)}
.quickreact button[aria-pressed="true"]{background:var(--wash);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--navy) 55%,transparent)}
/* 다른 이모지 고르기 — 작은 ＋ 동그라미 */
.quickreact button.more{width:34px;height:34px;font-size:18px;font-weight:600;color:var(--ink-3);background:var(--surface-2)}
:root[data-theme="dark"] .quickreact{box-shadow:0 8px 24px rgba(0,0,0,.45)}

.mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 2px}
.mgrid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 2px 9px;
  border-radius:12px;font-size:11.5px;font-weight:500;color:var(--ink-2);letter-spacing:-.02em}
.mgrid button:hover{background:var(--surface-2)}
.mgrid button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;color:var(--ink-2)}
.mgrid button.danger,.mgrid button.danger svg{color:var(--red)}
.msgpeek{font-size:12.5px;color:var(--ink-3);background:var(--surface-2);border-radius:10px;
  padding:8px 11px;margin:-2px 0 12px;max-height:66px;overflow:hidden;white-space:pre-wrap;word-break:break-word}
.msgpeek.selectable{color:var(--ink);font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word;max-height:38vh;overflow-y:auto;
  user-select:text;-webkit-user-select:text;-webkit-touch-callout:default;cursor:text;touch-action:pan-y}
.msgpeek.selectable::selection{background:rgba(26,115,232,.28)}
.msghint{font-size:11.5px;color:var(--ink-3);margin:4px 2px 8px}
/* 말풍선 메뉴 — 카카오톡처럼 작은 창. 손끝 자리에 뜹니다 (2026-09-16 원장님) */
.sheetbox.msgmenu{width:300px;max-width:calc(100vw - 16px);padding:10px 10px 8px;border-radius:18px}
.sheetbox.msgmenu .quickreact{margin:0 0 6px;padding:5px 6px;box-shadow:none;border:0;background:var(--surface-2)}
.sheetbox.msgmenu .quickreact button{width:38px;height:38px;font-size:23px}
.sheetbox.msgmenu .quickreact button.more{width:30px;height:30px;font-size:16px;background:var(--surface)}
.sheetbox.msgmenu .mgrid{gap:2px 0}
.sheetbox.msgmenu .mgrid button{padding:7px 2px 5px;gap:3px;font-size:10.5px;border-radius:10px}
.sheetbox.msgmenu .mgrid button svg{width:20px;height:20px}
.sheet.anchor{display:block;padding:0;background:rgba(15,19,25,.22)}
.sheet.anchor .sheetbox.msgmenu{position:fixed;left:8px;bottom:auto;top:auto}
/* 마우스가 있는 기기에서는 말풍선 글자를 바로 끌어서 고를 수 있습니다 */
@media (hover:hover){ .bub{user-select:text;-webkit-user-select:text;cursor:text} }

/* ══ 채팅방 기능 — 사다리·랜덤·선착순 (v1.7) ══ */
.minicard{background:var(--you-bg);border-radius:4px 13px 13px 13px;padding:11px 13px;
  box-shadow:var(--shadow-sm);min-width:200px;max-width:300px;text-align:left}
.bubblerow.me .minicard{border-radius:13px 4px 13px 13px}
.minihead{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:var(--navy-ink);margin-bottom:7px}
.minihead .mtag{background:var(--navy);color:var(--on-navy);border-radius:6px;padding:1px 7px;font-size:10px}
.minicard h4{font-size:13.5px;font-weight:600;margin:0 0 8px}
.miniline{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:4px 0;
  border-top:1px solid var(--line-2)}
.miniline:first-of-type{border-top:0}
.miniline .mfrom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.miniline .marr{color:var(--ink-3);flex:none}
.miniline .mto{flex:1;min-width:0;font-weight:600;color:var(--navy-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minipick{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.minipick span{background:var(--navy);color:var(--on-navy);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:600}
.minislot{display:flex;align-items:center;gap:7px;font-size:12.5px;padding:4px 0;border-top:1px solid var(--line-2)}
.minislot b{width:18px;flex:none;color:var(--ink-3);font-family:var(--mono);font-size:11px}
.minislot .empty{color:var(--ink-3)}
.minijoin{width:100%;margin-top:9px;padding:9px;border-radius:10px;background:var(--navy);
  color:var(--on-navy);font-size:13px;font-weight:600}
.minijoin[disabled]{background:var(--surface-3);color:var(--ink-3)}
.miniform{display:grid;gap:8px}
.miniform .row{display:flex;gap:7px;align-items:center}
.miniform .row input{flex:1}
.miniform .row button{flex:none;width:34px;height:34px;border-radius:9px;background:var(--surface-2);color:var(--ink-3);font-size:17px}

.reacts{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.bubblerow.me .reacts{justify-content:flex-end}
/* 반응 알약 — 카카오톡처럼 큼직한 이모지 + 숫자 (2026-09-16 원장님 "따봉 버튼 이쁘게") */
.react{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid transparent;border-radius:999px;padding:4px 11px 4px 9px;font-size:17px;line-height:1;box-shadow:0 1px 2px rgba(24,32,52,.06)}
.react .remo{font-size:17px;line-height:1}
.react b{font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink-2)}
.react.mine{background:var(--wash);border-color:color-mix(in srgb,var(--navy) 45%,transparent)}
.react.mine b{color:var(--navy-ink)}
.bubblerow.me .react{background:var(--surface)}
.react .rsti{width:24px;height:24px}
/* ＋ 는 작은 동그라미 (v1.7) */
.react.add{width:26px;height:26px;padding:0;justify-content:center;color:var(--ink-3);font-size:14px;background:transparent;border:1px dashed var(--line);opacity:.7}
.react.add:hover{opacity:1;border-style:solid}
.typing{padding:2px 16px 6px;font-size:11.5px;color:var(--ink-3);min-height:20px}

.composer{flex:none;background:var(--surface);border-top:1px solid var(--line);padding:9px 12px;display:flex;align-items:flex-end;gap:9px}
.composer .iconbtn{margin-bottom:1px}
.composer textarea{
  flex:1;background:var(--surface-2);border:0;border-radius:19px;padding:10px 14px;
  font-size:14px;resize:none;max-height:120px;min-height:38px;line-height:1.4;
}
.composer textarea:focus{outline:none}
.send{width:34px;height:34px;border-radius:50%;background:var(--navy);display:grid;place-items:center;flex:none}
.send svg{width:17px;height:17px;stroke:var(--on-navy);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.send:disabled{opacity:.4}

.emojipad{flex:none;background:var(--surface);border-top:1px solid var(--line);padding:4px 12px 12px;touch-action:pan-y}
/* 위쪽 손잡이 — 아래로 끌면 닫힙니다 */
.emojipad::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 6px}
.emogrid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.emogrid button{aspect-ratio:1;border-radius:8px;font-size:20px;display:grid;place-items:center}
.emogrid button:hover{background:var(--surface-2)}
.emogrid.sections{display:block;max-height:264px;overflow-y:auto;padding:2px}
.emogrid.sections .emohead{font-size:11.5px;font-weight:600;color:var(--ink-3);margin:8px 4px 4px}
.emogrid.sections .emohead:first-child{margin-top:0}
.emogrid.sections .emorow{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
@container app (min-width: 700px){ .emogrid.sections .emorow{grid-template-columns:repeat(12,1fr)} }

.tabs{display:flex;flex:none;background:var(--surface);border-top:1px solid var(--line);padding:5px 2px calc(5px + env(safe-area-inset-bottom))}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0 3px;color:var(--ink-3);font-size:10px;font-weight:500;position:relative;white-space:nowrap;letter-spacing:-.02em}
/* Y-MATH 수학학원 탭 — 로고 아이콘, 긴 이름은 살짝 작게 */
.tabs button.orgtab{flex:1.25;font-size:9px;letter-spacing:-.04em}
.tabs button.orgtab svg,.rail button.orgtab svg{stroke:none;stroke-width:0}
.tabs button.orgtab:not([aria-pressed="true"]) svg{opacity:.55}
.tabs button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button[aria-pressed="true"]{color:var(--navy-ink)}
.n{position:absolute;top:1px;left:calc(50% + 5px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.rail .n{top:4px;left:34px;border:2px solid var(--rail)}

/* 목록 공통 */
.grouphead{padding:13px 16px 6px;font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--ink-3);text-transform:uppercase;display:flex;align-items:center;gap:7px}
.grouphead::after{content:"";flex:1;height:1px;background:var(--line-2)}
.person{display:flex;gap:11px;align-items:center;padding:9px 16px;width:100%;text-align:left}
.person:hover{background:var(--surface-2)}
.person .av{width:36px;height:36px;border-radius:50%;font-size:12px}
.pinfo{flex:1;min-width:0}
.pinfo b{display:block;font-size:13.5px;font-weight:500}
.pinfo span{font-size:11.5px;color:var(--ink-3)}
.pstat{font-size:11px;font-family:var(--mono);padding:2px 7px;border-radius:5px;background:var(--surface-2);color:var(--ink-3);flex:none}
.pstat.on{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.frow{display:flex;gap:11px;align-items:center;padding:9px 16px;width:100%;text-align:left;border-bottom:1px solid var(--line-2)}
.frow:hover{background:var(--surface-2)}
.frow.active{background:var(--wash)}
.frow.active .fmeta b{color:var(--navy-ink)}

/* ── 자료함 타일(큰 아이콘) + 넓은 화면 오른쪽 판 (2026-09-16 탐색기식) ── */
.ftiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:4px;padding:6px 10px 10px}
.ftile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px 8px;border-radius:10px;text-align:center;min-width:0;border:1px solid transparent}
.ftile:hover{background:var(--surface-2)}
.ftile.active{background:var(--wash);border-color:color-mix(in srgb,var(--navy) 25%,transparent)}
.ftile .ficon.dir{width:64px;height:54px}
.ftile .ficon.dir svg{width:64px;height:52px}
.ftile .ficon:not(.dir){width:40px;height:48px;font-size:10px;margin:4px 0 2px}
.ftile .fname{font-size:12.5px;line-height:1.3;color:var(--ink);word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.ftile .fsub{font-size:10.5px;color:var(--ink-3);font-family:var(--mono)}
.fpane{display:none;flex:2;min-width:0;flex-direction:column;background:var(--surface)}
.fpane .fphead{flex:none;border-bottom:1px solid var(--line);padding:8px 8px 4px}
.fpane .fphead .crumbs{font-size:14px;padding:8px 12px 6px}
.fpane .fphead .crumbs button{font-weight:600}
.fpane .fphead .syncbar{margin:0 12px 8px}
.fpane .fpbody{padding:8px 10px 20px}
.fpane .ftiles{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:6px}
.fpane .ftiles.files{margin-top:6px;border-top:1px solid var(--line-2);padding-top:12px}
.fpane .ftile .ficon.dir{width:80px;height:68px}
.fpane .ftile .ficon.dir svg{width:80px;height:66px}
.fpane .ftile .ficon:not(.dir){width:48px;height:58px;font-size:11px}
.fpane .ftile .fname{font-size:13px}
.fpane .empty{padding:60px 20px;text-align:center}
.rowbtn{flex:none;font-size:11px;font-family:var(--mono);padding:4px 9px;border-radius:6px;border:1px solid var(--line);color:var(--ink-2)}
.rowbtn:hover{border-color:var(--navy);color:var(--navy-ink)}
.rowbtn.danger:hover{border-color:var(--red);color:var(--red)}
/* 자료함 머리 — 알림 줄과 권한 칩 (2026-09-16 원장님 "글자체 좀 예쁘게") */
.syncbar{display:flex;align-items:center;gap:8px;margin:0 16px 9px;padding:8px 12px;border-radius:10px;
  background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok);
  font-size:12.5px;font-weight:600;letter-spacing:-.1px}
.syncbar.off{background:var(--surface-2);color:var(--ink-3)}
.dotlive{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.permbar{display:flex;flex-wrap:wrap;gap:6px;padding:11px 16px 4px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;letter-spacing:-.1px;
  padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface);
  line-height:1.5;transition:background .12s ease,border-color .12s ease}
.pill.you{border-color:color-mix(in srgb,var(--navy) 45%,transparent);
  background:var(--wash);color:var(--navy-ink)}
.pill.act{border-color:color-mix(in srgb,var(--navy) 45%,transparent);color:var(--navy-ink);background:var(--surface);cursor:pointer}
.pill.act:hover{background:var(--wash);border-color:var(--navy)}
/* 자료함 읽고 쓰기 설정 (2026-09-16) */
.sheetbox.permsheet{width:min(560px,calc(100vw - 16px))}
.permlist{max-height:min(62vh,560px);overflow-y:auto;margin:4px 0 6px;border-top:1px solid var(--line-2)}
.permlist .grouphead{padding:10px 4px 4px}
.permrow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line-2)}
.permrow .pinfo{flex:1;min-width:0}
.permcks{display:flex;gap:6px;flex:none}
.permck{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;cursor:pointer;user-select:none}
.permck input{width:16px;height:16px;accent-color:var(--navy);margin:0}
.permck:has(input:checked){border-color:var(--navy);background:var(--wash);color:var(--navy-ink)}
.permck.off{opacity:.45;cursor:default}
.crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:8px 16px;font-size:12px;color:var(--ink-2)}
.crumbs button{color:var(--navy-ink)}
.crumbs .sepc{color:var(--ink-3)}
.morerow{display:flex;gap:12px;align-items:center;padding:13px 16px;width:100%;text-align:left;border-bottom:1px solid var(--line-2);font-size:13.5px}
.morerow:hover{background:var(--surface-2)}
.morerow.danger b{color:var(--red)}
.morerow svg{width:19px;height:19px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.morerow .arw{margin-left:auto;color:var(--ink-3);font-size:15px}
.mecard{display:flex;gap:12px;align-items:center;padding:16px}
.mecard .av{width:48px;height:48px;border-radius:50%;font-size:15px}
.mecard b{display:block;font-size:16px;font-weight:600}
.mecard span{font-size:12px;color:var(--ink-3)}

.panel{display:none;flex-direction:column;height:100%;min-height:0}
.panel.on{display:flex}

/* ══ 팝업 ════════════════════════════════════════════ */
.sheet{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(15,19,25,.45)}
.sheet.top{z-index:80}
.sheetbox{width:100%;max-width:400px;max-height:86dvh;overflow-y:auto;background:var(--surface);border-radius:16px;padding:20px;box-shadow:var(--shadow)}
.sheetbox h3{margin:0 0 4px;font-size:17px;font-weight:600}
.sheetbox .sub{margin:0 0 16px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.picklist{max-height:280px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;margin-bottom:14px}
/* 구성원 관리 창 — 넓고 높게, 목록이 화면을 다 씁니다 (2026-09-16 원장님) */
.sheetbox.memsheet{max-width:720px;max-height:94dvh;display:flex;flex-direction:column}
.sheetbox.memsheet .memlist{flex:1;min-height:240px;max-height:none;overflow-y:auto}
.sheetbox.memsheet .picklist:not(.memlist){max-height:160px}
@container app (min-width: 900px){ .sheetbox.memsheet{max-width:860px} }
.pick{display:flex;gap:10px;align-items:center;padding:9px 12px;width:100%;text-align:left;border-bottom:1px solid var(--line-2)}
.pick:hover{background:var(--surface-2)}
.pick .av{width:30px;height:30px;border-radius:50%;font-size:11px}
.cb{width:19px;height:19px;border-radius:6px;border:1.8px solid var(--line);flex:none;display:grid;place-items:center}
.cb svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.pick[aria-pressed="true"] .cb{background:var(--navy);border-color:var(--navy)}
.pick[aria-pressed="true"] .cb svg{opacity:1;stroke:var(--on-navy)}
.sheetact{display:flex;gap:8px;margin-top:4px}
.sheetact .btn{flex:1}
.codebox{font-family:var(--mono);font-size:22px;font-weight:500;letter-spacing:.06em;text-align:center;padding:16px;background:var(--wash);color:var(--navy-ink);border-radius:11px;margin-bottom:14px;user-select:all}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(72px + env(safe-area-inset-bottom));z-index:80;background:var(--charcoal);color:#fff;font-size:13px;padding:9px 16px;border-radius:22px;max-width:90vw;text-align:center;box-shadow:var(--shadow)}

/* ── 부드러운 열고 닫기 (2026-09-15 원장님 요청) ──────
   짧고(0.14~0.2초) 작게만 움직입니다. 팝업은 살짝 커지며 떠오르고, 닫을 때는 반대로.
   폰에서 방을 열면 오른쪽에서 밀려 들어오고, 목록으로 돌아오면 왼쪽에서 살짝. 그림·이모티콘 자체는 움직이지 않습니다. */
@keyframes ywFadeIn{from{opacity:0}to{opacity:1}}
@keyframes ywFadeOut{from{opacity:1}to{opacity:0}}
@keyframes ywPopIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ywPopOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes ywSlideIn{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes ywSlideBack{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes ywRise{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.sheet{animation:ywFadeIn .16s ease-out}
.sheet .sheetbox{animation:ywPopIn .2s cubic-bezier(.2,.8,.3,1)}
.sheet.out{animation:ywFadeOut .15s ease-in forwards;pointer-events:none}
.sheet.out .sheetbox{animation:ywPopOut .15s ease-in forwards}
.toast{animation:ywRise .22s cubic-bezier(.2,.8,.3,1)}
.toast.act{display:flex;align-items:center;gap:12px;padding:7px 8px 7px 16px}
.toastbtn{flex:none;background:rgba(255,255,255,.16);color:#fff;font-weight:600;font-size:13px;padding:6px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.35)}
.toastbtn:hover{background:rgba(255,255,255,.28)}
.panel.on{animation:ywFadeIn .14s ease-out}
.pluspad:not([hidden]){animation:ywPopIn .16s ease-out}
/* 채팅 화면 열고 닫기 — 폰: 오른쪽에서 스르르 들어오고, 닫을 땐 오른쪽으로 스르르 나감.
   뒤의 목록은 가만히 있습니다(닫은 뒤 목록이 한 번 더 움직이던 것 없앰, 2026-09-24 원장님 "빠르지만 부드러운 모션") */
@keyframes ywChatIn{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}
@keyframes ywChatOut{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}
@keyframes ywChatSwap{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@container app (max-width:599.98px){
  .app[data-open="chat"] .chat{animation:ywChatIn .28s cubic-bezier(.16,1,.3,1);box-shadow:-10px 0 22px rgba(0,0,0,.10);will-change:transform;backface-visibility:hidden}
  .app .chat.closing{display:flex!important;animation:ywChatOut .24s cubic-bezier(.4,0,.2,1) forwards!important;pointer-events:none;position:absolute;inset:0;z-index:5;box-shadow:-10px 0 22px rgba(0,0,0,.10);will-change:transform;backface-visibility:hidden}
  .app.opening .chat{position:absolute;inset:0;z-index:5}
  .app:has(.chat.closing),.app.opening{position:relative}
  .app:has(.chat.closing) .list,.app:has(.chat.closing) .mhead,.app:has(.chat.closing) .tabs,
  .app.opening .list,.app.opening .mhead,.app.opening .tabs{display:flex!important}   /* 열고 닫는 동안 뒤에 목록이 그대로 보이게 */
}
@container app (min-width:600px){
  .app .chat.swap .msgs,.app .chat.swap .roomhead,.app .chat.swap .chead{animation:ywChatSwap .22s ease-out}
}

/* ── 접힘(폰): 한 화면씩 ─────────────────────────── */
.app[data-open="chat"] .list,
.app[data-open="chat"] .mhead,
.app[data-open="chat"] .tabs{display:none}
.app[data-open="chat"] .chat{display:flex}
.app[data-open="chat"] .back{display:grid}

/* ── 폴더블 펼침 · 태블릿: 2단 ───────────────────── */
@container app (min-width:600px){
  .mhead,.tabs{display:none!important}
  .lhead{display:flex}
  .rail{display:flex}
  .list{flex:none;width:300px;border-right:1px solid var(--line);display:flex!important}
  .chat{display:flex!important;flex:1}
  .back{display:none!important}
  .bubblerow{max-width:74%}
  /* 자료함 탭에서는 오른쪽에 채팅 대신 폴더 내용 판 */
  .app[data-tab="files"] .chat{display:none!important}
  .app[data-tab="files"] .fpane{display:flex}
}
/* ── PC: 넓게 ────────────────────────────────────── */
@container app (min-width:1080px){
  .list{width:330px}
  .msgs{padding:20px 22px 10px}
  .composer{padding:11px 18px}
  .chead{padding:13px 18px}
  .bubblerow{max-width:620px}
}
/* ── 실제 폴더블 힌지 ────────────────────────────── */
@media (horizontal-viewport-segments:2){
  .app .list{width:calc(env(viewport-segment-right 0 0) - env(viewport-segment-left 0 0) - 74px)}
}

/* ── 읽음 표시 (v1.2) ─────────────────────────────────── */
.readmark{font-size:10.5px;line-height:1.2;color:var(--red);font-weight:600;white-space:nowrap;padding-bottom:2px;font-variant-numeric:tabular-nums;background:none;border:0}
.readmark.done{color:var(--ink-3);font-weight:500}
/* 내 글 : 읽음 표시를 시간 위에 — 폭을 미리 잡아 두어 읽음 표시가 생기거나 바뀔 때 긴 글이 출렁이지 않게 (2026-10-11) */
.bmeta{display:flex;flex-direction:column;align-items:flex-end;flex:none;min-width:50px}
.bmeta .readmark,.bmeta .stamp{padding-bottom:0}
.bmeta .stamp{padding-bottom:2px}
.readmark.ghost{visibility:hidden}
html.airoom .bubblerow.me .bmeta{display:none}
button.readmark{cursor:pointer}
button.readmark:hover{text-decoration:underline}

/* ── 켜고 끄는 스위치 (v1.2) ──────────────────────────── */
.swch{flex:none;width:40px;height:23px;border-radius:12px;background:var(--line);position:relative;transition:background .15s}
.swch::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.swch[data-on="on"]{background:var(--navy)}
.swch[data-on="on"]::after{transform:translateX(17px)}

/* ── 알림 꺼진 방 표시 (v1.2) ─────────────────────────── */
.muteicon{font-size:11px;color:var(--ink-3);margin-left:4px}

/* ── 승인 대기 화면 (v1.3) ────────────────────────────── */
.waitcard{border:1px solid var(--line);border-radius:14px;padding:22px 18px;text-align:center;background:var(--surface);margin:6px 0 16px}
.waitcard b{display:block;font-size:15px;margin-bottom:8px}
.waitcard p{font-size:12.5px;color:var(--ink-2);line-height:1.7}
.waitcard .waitnote{margin-top:12px;font-size:11.5px;color:var(--ink-3)}
.waitdot{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.waitdot span{width:7px;height:7px;border-radius:50%;background:var(--navy);opacity:.3;animation:wd 1.2s infinite}
.waitdot span:nth-child(2){animation-delay:.2s}
.waitdot span:nth-child(3){animation-delay:.4s}
@keyframes wd{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
#waitScreen .btn.ghost{margin-top:8px}

/* ── 안내 메시지 (OO 님이 들어왔습니다) ──────────────── */
.sysmsg{align-self:center;font-size:11.5px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line-2);border-radius:11px;padding:5px 12px;margin:4px 0;max-width:88%;text-align:center}

/* ── PDF·이미지 보기 (v1.3) ───────────────────────────── */
.viewer{position:fixed;inset:0;z-index:75;background:var(--surface);display:flex;flex-direction:column}
.vhead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface);flex:none;padding-top:max(10px,env(safe-area-inset-top))}
.vhead b{flex:1;min-width:0;font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbody{flex:1;min-height:0;background:#2b2b2b;display:flex;align-items:center;justify-content:center}
.vcomm{flex:none;background:var(--surface);border-top:1px solid var(--line);display:flex;flex-direction:column;max-height:42dvh}
.vcomm:not(.open) .vclist{display:none}
/* 영상 댓글 — 재생 지점 딱지 (2026-09-16 인강 댓글) */
.vcatbtn{align-self:flex-start;margin:0 12px 2px;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-3)}
.vcatbtn.on{border-color:var(--navy);background:var(--wash);color:var(--navy-ink)}
.vcomm:not(.open) .vcatbtn{display:none}
.vcat{margin-left:6px;padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:700;font-family:var(--mono);
  border:1px solid var(--navy);background:var(--wash);color:var(--navy-ink);line-height:1.6}
.vcat:hover{background:var(--navy);color:var(--on-navy)}
.vchead{display:flex;align-items:center;gap:8px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--ink-2);width:100%;text-align:left}
.vchead .vcarrow{margin-left:auto;transition:transform .15s}
.vcomm:not(.open) .vcarrow{transform:rotate(180deg)}
.vclist{flex:1;min-height:0;overflow-y:auto;padding:4px 12px 8px;display:flex;flex-direction:column;gap:8px}
.vclist .empty{padding:8px 0;font-size:12.5px}
.vcitem{display:flex;gap:8px;align-items:flex-start;position:relative}
.vcitem .av{flex:none}
.vcbody{min-width:0;flex:1}
.vcmeta{display:flex;gap:6px;align-items:baseline;font-size:12px;color:var(--ink-3)}
.vcmeta b{color:var(--ink);font-size:12.5px}
.vctext{font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word;background:var(--you-bg);color:var(--you-ink);border-radius:4px 12px 12px 12px;padding:6px 10px;display:inline-block;max-width:100%}
.vcitem.me .vctext{background:var(--me-bg);color:var(--me-ink)}
.vcsti{width:96px;height:96px;display:block;margin-top:2px}
.vcsti .stiimg{width:100%;height:100%;object-fit:contain}
.vcdel{flex:none;font-size:11px;color:var(--ink-3);padding:2px 6px;align-self:flex-start}
.vcdel:hover{color:var(--red)}
.vcrow{display:flex;align-items:center;gap:6px;padding:6px 10px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2)}
.vcrow input{flex:1;min-width:0;padding:9px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:14px}
.vcrow input:focus{outline:none;border-color:var(--navy)}
.vcrow .ctool{flex:none}
.vbody iframe{width:100%;height:100%;border:0;background:#fff}
.vbody img{max-width:100%;max-height:100%;object-fit:contain}
.vfail{color:#ddd;text-align:center;padding:30px;font-size:13px;line-height:1.8}

/* ── 새 버전 안내 띠 (v1.3) ───────────────────────────── */
.updbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55;background:var(--navy);color:var(--on-navy);border-radius:12px;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.updbar span{flex:1}
.updbar button{color:var(--on-navy);font-weight:600;font-size:13px;background:rgba(255,255,255,.16);border-radius:8px;padding:5px 10px}
.updbar button:last-child{background:none;padding:5px 4px;font-weight:400;opacity:.8}
@media (min-width:600px){ .updbar{left:auto;right:18px;bottom:18px;max-width:380px} }

/* ── 업데이트 소식 (v1.3) ─────────────────────────────── */
.relnote{border-bottom:1px solid var(--line-2);padding:16px 16px 18px}
.relhead{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.relver{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--navy);background:var(--surface-2);border-radius:6px;padding:2px 7px}
.reltime{font-size:11px;color:var(--ink-3);font-family:var(--mono)}
.relnew{font-size:10.5px;font-weight:600;color:#fff;background:var(--red);border-radius:5px;padding:2px 6px}
.reltitle{font-size:14px;font-weight:600;margin:6px 0 10px}
.relitem{display:flex;gap:8px;font-size:12.5px;line-height:1.65;color:var(--ink-2);margin-bottom:7px}
.reltag{flex:none;font-size:10.5px;font-weight:600;border-radius:5px;padding:1px 6px;margin-top:2px;height:17px;line-height:15px}
.reltag.new{color:#1c5c34;background:#dff3e6}
.reltag.fix{color:#6b4a12;background:#fdefd3}
.reltag.imp{color:#1d3f6b;background:#dde8f7}

/* ── 권한 토글 줄 (v1.3) ──────────────────────────────── */
.permrow{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line-2);font-size:12.5px}
.permrow .pinfo{flex:1}
.pendbadge{font-size:10.5px;font-weight:600;color:#fff;background:var(--red);border-radius:5px;padding:2px 6px;margin-left:6px}
.permtag{font-size:10.5px;border-radius:5px;padding:2px 6px;background:var(--surface-2);color:var(--ink-3)}
.permtag.on{background:#dff3e6;color:#1c5c34}

/* ══════════════════════════════════════════════════════
   v1.5 — 입력창 · 할일 · 투표 · 설정 · 잠금
   ══════════════════════════════════════════════════════ */

/* ── 입력창: 글 쓰는 칸 위, 아이콘 줄 아래 ─────────────── */
.composer{display:block;padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
.composer textarea{
  width:100%;max-height:132px;min-height:26px;padding:6px 4px;border:none;background:none;
  color:var(--ink);font:inherit;font-size:15px;resize:none;display:block;
}
.composer textarea::placeholder{color:var(--ink-3)}
.ctools{display:flex;align-items:center;gap:14px;padding:6px 4px 0;border-top:1px solid var(--line-2);margin-top:4px}
.ctools .csp{flex:1}
.ctool{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);flex:none}
.ctool svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ctool[aria-pressed="true"]{color:var(--navy-ink)}
.ctool[aria-pressed="true"] svg{stroke-width:1.9}
/* + 가 ✕ 로 바뀐 모습 — 동그라미 테두리가 생깁니다 */
.ctool#plusBtn[aria-pressed="true"]{box-shadow:inset 0 0 0 1.6px var(--navy-ink);border-radius:50%}
.ctool#plusBtn[aria-pressed="true"] svg{transform:rotate(45deg);transition:transform .16s}
.ctool#plusBtn svg{transition:transform .16s}

/* ── + 판 ──────────────────────────────────────────────── */
.pluspad{
  flex:none;background:var(--surface);border-top:1px solid var(--line);
  padding:10px 12px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;
}
.plusgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 4px}
.plusitem{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);font-weight:500}
.pcircle{width:54px;height:54px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center}
.pcircle svg{width:25px;height:25px;stroke:var(--ink-2);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.plusitem:active .pcircle{background:var(--surface-3)}
@container app (min-width: 900px){ .plusgrid{grid-template-columns:repeat(6,1fr)} }

/* ── @호출 목록 ────────────────────────────────────────── */
.mentionpad{
  flex:none;background:var(--surface);border-top:1px solid var(--line);
  max-height:264px;display:flex;flex-direction:column;
}
.mentionhead{padding:9px 14px 5px;font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.01em}
.mentionlist{overflow-y:auto;padding:0 6px 8px}
.mrow{width:100%;display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:11px;text-align:left}
.mrow:hover,.mrow[aria-selected="true"]{background:var(--wash)}
.mrow .av{width:34px;height:34px;border-radius:10px;font-size:12px}
.mrow .mall{background:var(--red)}
.minfo{min-width:0;flex:1}
.minfo b{display:block;font-size:14px;font-weight:600}
.minfo span{display:block;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 말풍선 안에서 @이름 부분 */
/* @이름 태그 — 파란 글씨 (2026-09-15 원장님 지시). 내가 불린 태그는 연한 파란 바탕까지 */
.mtag{color:var(--tag,#1A73E8);font-weight:700}
.mtag.isme{background:rgba(26,115,232,.13);border-radius:6px;padding:0 4px}
.bub.me .mtag,.bubblerow.me .mtag{color:#8EC5FF}
.bub.me .mtag.isme,.bubblerow.me .mtag.isme{background:rgba(142,197,255,.22)}
.bub.called{box-shadow:inset 0 0 0 1.5px var(--navy)}

/* ── 모든 대화 검색 결과 (2026-09-15) ─────────────────── */
.pick.srow{align-items:flex-start}
.pick.srow .pinfo b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick.srow .snip{display:block;white-space:normal;line-height:1.4;word-break:break-all}
.pick.srow .snip mark{background:#FFE58A;color:var(--ink);border-radius:3px;padding:0 1px}
.pick.srow .rtime{flex:none;font-size:11px;color:var(--ink-3);margin-top:2px}
:root[data-theme="dark"] .pick.srow .snip mark{background:#8A6D00;color:#fff}

/* ── 사진 넘겨보기 (2026-09-16) ──────────────────────── */
.vhead b small{display:block;font-weight:400;font-size:11px;color:var(--ink-3);margin-top:1px}
.vbody.galmode{background:#111;display:block;padding:0}
.gal{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.galtrack{display:flex;height:100%;width:100%;will-change:transform}
.galslide{flex:none;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 0 118px}
.galslide img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-drag:none}
.galslide img{transform-origin:center center;will-change:transform}
.gal.zoomed{touch-action:none}
.gal.zoomed .galarrow{display:none}
.galstrip{position:absolute;left:0;right:0;bottom:58px;display:flex;gap:6px;padding:6px 10px;overflow-x:auto;scrollbar-width:none;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.galstrip::-webkit-scrollbar{display:none}
.galthumb{flex:none;width:46px;height:46px;border-radius:8px;overflow:hidden;border:2px solid transparent;opacity:.6;padding:0;background:#222;transition:opacity .15s,border-color .15s}
.galthumb img{width:100%;height:100%;object-fit:cover;display:block}
.galthumb.on{opacity:1;border-color:#fff}
.galcount{position:absolute;top:8px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;font-family:var(--mono);background:rgba(0,0,0,.45);padding:3px 10px;border-radius:999px}
.galbar{position:absolute;left:0;right:0;bottom:0;height:58px;display:flex;justify-content:space-around;align-items:center;background:rgba(0,0,0,.72);padding-bottom:env(safe-area-inset-bottom)}
.galbtn{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:10.5px;padding:4px 10px}
.galbtn svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.galarrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:56px;color:#fff;font-size:34px;background:rgba(0,0,0,.25);border-radius:10px;display:none}
.galarrow.left{left:8px}.galarrow.right{right:8px}
@media (hover:hover){ .galarrow{display:grid;place-items:center} }

/* ── 사진 보내기 창 (2026-09-16) ─────────────────────── */
/* ── 사진 판 · 편집 화면 — 카카오톡 구조 (2026-09-16 원장님) ─────────────── */
.ppsec{display:flex;flex-direction:column;gap:8px}
.pphead{display:flex;align-items:center;gap:8px;font-size:15px}
.pphead .csp{flex:1}
.pphead .btn{width:auto;padding:7px 16px;font-size:13.5px;border-radius:999px}
.pphead .btn:disabled{background:var(--surface-2);border-color:var(--surface-2);color:var(--ink-3);opacity:1}
.ppstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0;scrollbar-width:thin}
.ppcell{position:relative;flex:none;width:124px;height:124px;border-radius:14px;overflow:hidden;background:var(--surface-2);border:0;padding:0}
.ppcell img{width:100%;height:100%;object-fit:cover;display:block}
.ppcell.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#8e8e93;font-size:12px;color:#fff}
.ppcell.tool svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.galck{position:absolute;top:7px;right:7px;width:26px;height:26px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.25);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center}
.ppcell.on .galck,.galcell.on .galck,.phvpick.on .galck{background:var(--red);border-color:var(--red)}
.galcell.on::after{content:"";position:absolute;inset:0;border:3px solid var(--red);pointer-events:none}
.galx{position:absolute;left:7px;bottom:7px;width:24px;height:24px;border-radius:6px;background:rgba(0,0,0,.55);display:grid;place-items:center}
.galx svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.galselstrip{display:flex;gap:8px;padding:10px 12px;overflow-x:auto;border-bottom:1px solid var(--line)}
.galselthumb{position:relative;flex:none;width:60px;height:60px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.galselthumb img{width:100%;height:100%;object-fit:cover;display:block}
.galselx{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:10px;display:grid;place-items:center}
.galcell.tool{display:grid;place-items:center;background:#8e8e93}
.galcell.tool svg{width:44px;height:44px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.phicon.dark{color:var(--ink)}
.galpick .galpickhead .btn.ppsend{border-radius:999px}
.galpick .galpickhead .btn.ppsend:disabled{background:var(--surface-2);border-color:var(--surface-2);color:var(--ink-3);opacity:1}
/* 크게 보기 */
.sheetbox.phview{background:#000;color:#fff}
.phvbody{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.phvimg{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.phvpick{position:absolute;top:10px;right:12px;width:40px;height:40px;padding:0;background:transparent}
.phvpick .galck{position:static;width:32px;height:32px;font-size:14px;margin:4px auto}
.phvnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:56px;color:#fff;font-size:34px;background:rgba(0,0,0,.35);border-radius:8px;display:grid;place-items:center}
.phvnav.prev{left:6px}.phvnav.next{right:6px}
@media (pointer:coarse){.phvnav{display:none}}
.phvfoot{flex:none;padding:8px 12px calc(10px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.phvcap{width:100%;padding:10px 12px;border-radius:10px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:14px}
.phvcap::placeholder{color:rgba(255,255,255,.5)}
.phvtools{display:flex;justify-content:space-around}
.phvtools .phtool{padding:8px 14px}
.phvtools .phtool svg{width:26px;height:26px}
.phview .phtop .phdone,.phview .phtop .ppsend{width:auto;padding:7px 16px;font-size:13.5px;border-radius:999px}
.galfoot{display:none}
/* 화면 가득 팝업 (전체보기 · 편집 화면) */
.sheet.full{padding:0;place-items:stretch}
.sheetbox.fullpage{max-width:none;max-height:none;height:100dvh;border-radius:0;padding:0;display:flex;flex-direction:column;overflow:hidden}
.galpick .galpickhead{display:flex;align-items:center;gap:8px;margin:0;padding:10px 12px;border-bottom:1px solid var(--line)}
.galpick .galpickhead h3{flex:1;margin:0;font-size:15px;font-weight:600}
.galpick .galpickhead .btn{padding:7px 14px;font-size:13px}
.galpick .galgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;align-items:start;gap:3px;overflow-y:auto;align-content:start;padding:3px}
.galcell{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:var(--surface-2);cursor:pointer}
.galcell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.galfoot{display:flex;align-items:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.galfoot .segbtn{padding:7px 14px;font-size:13px}
@container app (min-width: 700px){ .galpick .galgrid{grid-template-columns:repeat(5,1fr)} .ppcell{width:100px;height:100px} }
/* 편집 화면 (어두운 바탕) */
.sheetbox.phedit{background:#15181d;color:#fff}
.phtop{display:flex;align-items:center;gap:8px;padding:8px 12px}
.phicon{width:36px;height:36px;border-radius:50%;color:#fff;font-size:18px;display:grid;place-items:center}
.phicon:hover{background:rgba(255,255,255,.1)}
.phpos{flex:1;text-align:center;font-size:14px;color:rgba(255,255,255,.85)}
.phdone{width:auto;padding:7px 16px;font-size:13.5px;background:var(--red);border-color:var(--red)}
.phcanvaswrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000}
.phcanvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;touch-action:none}
.phopts{flex:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;min-height:44px;border-top:1px solid rgba(255,255,255,.08)}
.phhint{margin:0;font-size:12px;color:rgba(255,255,255,.6)}
.phcolor{width:26px;height:26px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.phcolor.on{border-color:#15181d;box-shadow:0 0 0 2px #fff}
.segbtn.dark{background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.segbtn.dark.on{background:#fff;color:#15181d}
.phstitabs{display:flex;gap:6px;overflow-x:auto;width:100%;padding-bottom:4px}
.phstitabs .segbtn{flex:none;font-size:12px;padding:5px 10px}
.phstigrid{display:flex;gap:4px;overflow-x:auto;width:100%;padding:2px 0}
.phsti{flex:none;width:60px;height:60px;padding:4px;border-radius:10px;background:rgba(255,255,255,.08)}
.phsti .stiwrap{width:100%;height:100%;display:block}
.phsti .stiimg{width:100%;height:100%;object-fit:contain;animation:none !important}
.phtextrow{display:flex;gap:6px;width:100%;align-items:center}
.phtextin{flex:1;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:14px}
.phtextrow .btn{padding:8px 14px;font-size:13px}
.phtools{display:flex;gap:6px;align-items:center;width:100%}
.phbar{flex:none;display:flex;justify-content:space-around;padding:6px 4px calc(8px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08)}
.phtool{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 8px;border-radius:10px;color:rgba(255,255,255,.75);font-size:11px}
.phtool svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.phtool.on{color:#fff;background:rgba(255,255,255,.14)}

/* ── AI (v1.9) ─────────────────────────────────────────── */
.av.ai{background:linear-gradient(135deg,#243553,#3E5A8C);padding:8px}
.av.ai svg{width:100%;height:100%;display:block;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bub.aibub{white-space:pre-wrap;border-left:3px solid #3E5A8C;background:color-mix(in srgb,#3E5A8C 7%,var(--surface))}
.bub.aibub b{font-weight:700}
.bub.aibub .aifoot{margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);font-size:11px;color:var(--ink-3);font-family:var(--mono);white-space:normal}
.pcircle.ai{background:linear-gradient(135deg,#243553,#3E5A8C);color:#fff}
.aipics{display:flex;gap:8px;padding:6px 0 10px;overflow-x:auto}
.aipic{flex:none;width:84px;height:84px;border-radius:10px;overflow:hidden;border:2px solid var(--line);opacity:.55;padding:0;background:var(--surface-2)}
.aipic img{width:100%;height:100%;object-fit:cover;display:block}
.aipic.on{opacity:1;border-color:var(--navy);box-shadow:0 0 0 2px color-mix(in srgb,var(--navy) 30%,transparent)}
.aitasks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px}
.aitask{padding:12px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);font-size:13.5px;font-weight:500}
.aitask:hover{border-color:var(--navy);background:var(--wash)}
.aitask:disabled{opacity:.5}

/* ── 채팅방 상단 고정 ──────────────────────────────────── */
.room{position:relative}
.pinmark{
  position:absolute;left:6px;top:6px;width:17px;height:17px;border-radius:50%;
  background:#FFC83D;color:#322E2B;display:grid;place-items:center;font-size:9px;
  box-shadow:0 0 0 2px var(--surface);z-index:2;
}
.room.pinned{background:var(--surface-2)}
/* 고정한 방 순서 바꾸기 손잡이 */
.dragh{flex:none;align-self:center;padding:8px 2px 8px 6px;margin-right:-6px;color:var(--ink-3);font-size:15px;letter-spacing:-3px;line-height:1;
  cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.dragh:active{cursor:grabbing}
.room.dragging{opacity:.85;background:var(--surface);box-shadow:var(--shadow);z-index:2;position:relative}

/* ── 할일 ──────────────────────────────────────────────── */
.segbar{display:flex;gap:6px;padding:8px 12px 4px}
.segbar button{
  flex:1;padding:7px 4px;border-radius:9px;background:var(--surface-2);color:var(--ink-2);
  font-size:12.5px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:5px;
}
.segbar button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
/* 할 일 지점별 보기 (2026-09-16) */
.bchips{display:flex;gap:6px;flex-wrap:wrap;padding:2px 12px 0}
.bchip{font-size:12px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--surface)}
.bchip.on{background:var(--wash);border-color:var(--navy);color:var(--navy-ink);font-weight:600}
.taskhint{margin:6px 12px 0;font-size:12px;line-height:1.5;color:var(--ink-3)}
/* 할 일 만들기 두 단추 — 머리줄 오른쪽, 예전 + 자리 (2026-09-16 원장님) */
.tmk{flex:none;display:inline-flex;align-items:center;gap:5px;padding:7px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface-2);color:var(--ink)}
.tmk svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* 동료에게가 먼저·남색, 나 자신에게는 옆의 보조 단추 (2026-09-29 원장님) */
.tmk.other{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
/* 게시판 꾸미기 — 아이콘만 있으면 아무도 모릅니다 (2026-09-16 원장님) */
.tmk.skin{background:transparent;color:var(--ink-3)}
.lhead .tmk{padding:6px 9px;font-size:12px}
.lhead .tmk svg{width:15px;height:15px}
@media (max-width:360px){ .tmk.skin span{display:inline} .tmk.skin{padding:7px 9px} }
.tmk:active{transform:translateY(1px)}
@media (max-width:360px){ .tmk span{display:none} .tmk{padding:8px 10px} }
.mhead .tmk{padding:6px 10px;font-size:12px}
.mhead .tmk svg{width:15px;height:15px}
.segn{font-size:11px;font-weight:700;opacity:.85}
.donetoggle{display:flex;align-items:center;gap:7px;padding:4px 14px 8px;font-size:12.5px;color:var(--ink-3)}
.donetoggle input{width:15px;height:15px;accent-color:var(--navy)}

.taskcard{
  display:flex;gap:11px;align-items:flex-start;padding:12px 13px;margin:0 10px 8px;
  background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow-sm);
  text-align:left;width:calc(100% - 20px);
}
.taskcard.overdue{border-color:var(--red)}
.tchk{
  flex:none;width:21px;height:21px;border-radius:50%;border:1.8px solid var(--line);
  display:grid;place-items:center;margin-top:1px;color:transparent;font-size:12px;font-weight:700;
}
.tchk.on{background:var(--ok);border-color:var(--ok);color:#fff}
.tmain{min-width:0;flex:1}
.ttitle{font-size:14.5px;font-weight:500;word-break:break-word}
.taskcard.done .ttitle{text-decoration:line-through;color:var(--ink-3)}
.tmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.tchip{font-size:11px;padding:2px 7px;border-radius:7px;background:var(--surface-2);color:var(--ink-2);font-weight:500}
.tchip.due{background:var(--wash);color:var(--navy-ink)}
.tchip.late{background:var(--red);color:#fff}
.tchip.who{background:var(--surface-3)}
.tnote{font-size:12.5px;color:var(--ink-2);margin-top:5px;white-space:pre-wrap}

/* 마감기한 고르기 */
.duerow{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 2px}
.duerow button{padding:7px 12px;border-radius:9px;background:var(--surface-2);font-size:13px;color:var(--ink-2);font-weight:500}
.duerow button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.assigned{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.atag{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;background:var(--wash);font-size:12px;color:var(--navy-ink);font-weight:500}
.atag button{color:var(--navy-ink);font-size:13px;line-height:1}

/* ── 투표 ──────────────────────────────────────────────── */
.pollcard{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;max-width:330px;box-shadow:var(--shadow-sm);text-align:left;
}
.polltop{display:flex;align-items:center;gap:6px;margin-bottom:2px}
.polltop .pi{font-size:13px}
.polltop b{font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.pollq{font-size:15px;font-weight:600;margin:2px 0 10px;word-break:break-word}
.popt{width:100%;text-align:left;position:relative;padding:9px 11px;border-radius:10px;background:var(--surface-2);margin-bottom:6px;overflow:hidden}
.popt .pbar{position:absolute;inset:0 auto 0 0;background:var(--wash);z-index:0;transition:width .25s}
.popt .ptxt{position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-size:13.5px}
.popt .pnum{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-2)}
.popt.picked{box-shadow:inset 0 0 0 1.6px var(--navy)}
.popt .pmark{width:17px;height:17px;border-radius:50%;border:1.6px solid var(--line);flex:none;display:grid;place-items:center;font-size:10px;color:transparent;background:var(--surface)}
.popt.picked .pmark{background:var(--navy);border-color:var(--navy);color:#fff}
.pollfoot{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.pollfoot .grow{flex:1}
.pollbtn{padding:5px 11px;border-radius:8px;background:var(--navy);color:var(--on-navy);font-size:12px;font-weight:600}
.pollbtn.ghost{background:var(--surface-2);color:var(--ink-2)}
.pollclosed{color:var(--red);font-weight:600}
.voters{font-size:11px;color:var(--ink-3);margin-top:-2px;margin-bottom:6px;padding-left:11px}

/* 녹음 중 표시 */
.recbar{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--surface-2);border-radius:12px;margin:4px 0}
.recdot{width:11px;height:11px;border-radius:50%;background:var(--red);animation:recpulse 1s infinite}
@keyframes recpulse{0%,100%{opacity:1}50%{opacity:.25}}
.rectime{font-family:var(--mono);font-size:15px;font-weight:600}

/* ── 설정 화면 ───────────────────────────────────────────
   겹치는 순서: 앱 < 설정(60) < 팝업(70) < 알림 띠 < 잠금(90) */
.settings{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.settings[hidden]{display:none!important}
.shead{
  flex:none;display:flex;align-items:center;gap:6px;padding:calc(9px + env(safe-area-inset-top)) 10px 9px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.shead b{font-size:16px;font-weight:600}
.sbody{flex:1;display:flex;min-height:0}
.snav{
  flex:none;display:flex;gap:4px;overflow-x:auto;padding:8px 10px;background:var(--surface);
  border-bottom:1px solid var(--line);
}
.snav button{
  display:flex;align-items:center;gap:5px;padding:7px 11px;border-radius:9px;
  background:var(--surface-2);color:var(--ink-2);font-size:12.5px;font-weight:500;white-space:nowrap;
}
.snav button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.sicon{font-size:13px}
.spane{flex:1;overflow-y:auto;padding:14px 12px 40px}
@media (min-width: 760px){
  .sbody{flex-direction:row}
  .snav{flex-direction:column;width:180px;border-bottom:none;border-right:1px solid var(--line);overflow-y:auto}
  .snav button{justify-content:flex-start}
}
@media (max-width: 759px){ .sbody{flex-direction:column} }

.setgrp{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden}
.setgrp>h4{margin:0;padding:12px 14px 8px;font-size:11.5px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.setrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-top:1px solid var(--line-2);width:100%;text-align:left}
.setgrp>h4+.setrow{border-top:none}
.setgrp>.setrow:first-child{border-top:none}
.sinfo{min-width:0;flex:1}
.sinfo b{display:block;font-size:14px;font-weight:500}
.sinfo span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;line-height:1.45}
.selbox{
  flex:none;padding:7px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);font:inherit;font-size:13px;max-width:46%;
}
.setbtn{flex:none;padding:7px 13px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2);font-size:13px;font-weight:500}
.setbtn.warn{color:var(--red);border-color:var(--red);background:none;font-weight:600}
.setpath{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);word-break:break-all}
.radiorow{display:flex;flex-direction:column;gap:0}
.radio{display:flex;align-items:center;gap:10px;padding:11px 14px;border-top:1px solid var(--line-2);font-size:14px}
.radio.fontpick .sinfo b{font-family:inherit;font-size:15px}
/* 손글씨·둥근 글씨체는 살짝 크게 */
body.bigfont{font-size:15.5px}
body.bigfont .bub{font-size:15px}
.radio input{width:17px;height:17px;accent-color:var(--navy)}
.profcard{display:flex;align-items:center;gap:13px;padding:16px 14px}
.profcard .av{width:58px;height:58px;border-radius:18px;font-size:19px}
.profmain b{display:block;font-size:17px;font-weight:600}
.profmain span{display:block;font-size:12.5px;color:var(--ink-3)}

/* ── 잠금 화면 ─────────────────────────────────────────── */
/* ══ 보이스톡 통화 화면 (2026-09-16) ══════════════════════════════════ */
.callscreen{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,#243553,#1a2740 55%,#141d2f);color:#fff;
  padding:calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 28px)}
.callbox{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:340px;text-align:center}
.callav{margin-bottom:6px}
.callav .av{width:112px;height:112px;font-size:34px;border-radius:50%;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.callav .av.big{width:112px;height:112px}
.callname{font-size:23px;font-weight:700;letter-spacing:-.2px}
.callstate{font-size:14px;color:rgba(255,255,255,.72)}
.calltime{font-family:var(--mono);font-size:17px;font-weight:700;color:rgba(255,255,255,.92);letter-spacing:.5px}
.callnet{font-size:11.5px;color:rgba(255,255,255,.5);margin-top:-2px}
.callacts{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.callbtn{min-width:104px;padding:14px 20px;border-radius:999px;border:none;font-size:15px;font-weight:700;
  background:rgba(255,255,255,.14);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.callbtn:hover{background:rgba(255,255,255,.22)}
.callbtn.yes{background:#2e9c5a}.callbtn.yes:hover{background:#268a4e}
.callbtn.no{background:var(--red)}.callbtn.no:hover{background:#a92428}
.callbtn.on{background:#fff;color:var(--navy-ink)}
.callbtn.ghost{background:rgba(255,255,255,.12)}
.callscreen[hidden]{display:none!important}
@media (max-width:380px){ .callbtn{min-width:92px;padding:13px 16px;font-size:14px} .callav .av{width:96px;height:96px;font-size:30px} }

.lockscreen{
  position:fixed;inset:0;z-index:90;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:24px;
}
.lockscreen[hidden]{display:none!important}
.lockscreen .logo{width:66px;height:66px}
.lockscreen b{font-size:17px}
.lockscreen p{margin:0;font-size:13px;color:var(--ink-3)}
.pindots{display:flex;gap:14px;margin:8px 0 14px}
.pindots span{width:13px;height:13px;border-radius:50%;background:var(--line);transition:background .12s}
.pindots span.on{background:var(--navy)}
.pindots.bad span{background:var(--red)}
.pinpad{display:grid;grid-template-columns:repeat(3,68px);gap:12px}
.pinpad button{
  height:60px;border-radius:16px;background:var(--surface);border:1px solid var(--line);
  font-size:21px;font-weight:500;box-shadow:var(--shadow-sm);
}
.pinpad button.ghost{background:none;border:none;box-shadow:none;font-size:13px;color:var(--ink-2)}
/* 키보드로 칠 때 눌린 티가 나게 (2026-09-16 원장님: 노트북에서 키보드로 비번) */
.pinpad button.kpress{background:var(--navy);color:var(--on-navy);transform:scale(.94);transition:transform .08s ease}

/* ── 하단 탭 5개 ───────────────────────────────────────── */
.tabs button{font-size:9.5px}
.tabs button svg{width:20px;height:20px}

/* ── 화면 배율 (컴퓨터용) ──────────────────────────────────
   화면 전체를 그대로 키웁니다. 높이는 배율로 나눠 두어야
   아래쪽이 화면 밖으로 밀려나지 않습니다. */
body[data-zoom="120"]{--zoomf:1.2}
body[data-zoom="150"]{--zoomf:1.5}
body[data-zoom="120"] .app,body[data-zoom="150"] .app,
body[data-zoom="120"] .settings,body[data-zoom="150"] .settings,
body[data-zoom="120"] #sheetHost,body[data-zoom="150"] #sheetHost{zoom:var(--zoomf)}
body[data-zoom="120"] .app,body[data-zoom="150"] .app{height:calc(100dvh / var(--zoomf))}

/* ── v1.5.1 · 초대 복사·공유 ───────────────────────────── */
.copyrow{display:flex;gap:8px;margin:10px 0 8px}
.copyrow .btn{flex:1;padding:11px 10px;font-size:14px}
.invitemsg{
  background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;font-size:12.5px;line-height:1.65;color:var(--ink-2);
  white-space:pre-wrap;word-break:break-all;user-select:text;-webkit-user-select:text;
  max-height:210px;overflow-y:auto;
}
.coderow{
  display:flex;align-items:center;gap:8px;padding:9px 11px;margin-bottom:6px;
  background:var(--surface-2);border-radius:11px;
}
.coderow .pinfo{flex:1;min-width:0}
.coderow .pinfo b{font-family:var(--mono);font-size:14px;letter-spacing:.04em}
.coderow .rowbtn{flex:none;padding:6px 11px;border-radius:8px;background:var(--surface);
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);font-weight:500}

/* ══════════════════════════════════════════════════════
   v1.6 — 입력창 · 답장 · 뷰어 · 설정 사이드바 · 효과
   ══════════════════════════════════════════════════════ */

/* ── 입력창: 손잡이로 높이 조절 ────────────────────────── */
.composer{padding-top:0}
.grip{
  height:14px;display:grid;place-items:center;cursor:ns-resize;touch-action:none;
  margin:0 -10px 2px;
}
.grip span{
  display:block;width:38px;height:4px;border-radius:3px;background:var(--line);
  transition:background .15s,width .15s;
}
.grip:hover span,.grip:active span{background:var(--ink-3);width:52px}
.grip:focus-visible span{background:var(--navy)}

/* 글 쓰는 칸 + 그 옆 전송 버튼 */
.crow{display:flex;align-items:flex-end;gap:9px}
.crow textarea{flex:1;min-width:0}
.crow .send{margin-bottom:2px}
.composer textarea{
  max-height:none;                       /* 높이는 손잡이로 정합니다 */
  overflow-y:auto;
}
.ctools .csp{flex:1}

/* ── 답장 미리보기 줄 ──────────────────────────────────── */
.replybar{
  flex:none;display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--surface);border-top:1px solid var(--line);
}
.replybar .rline{width:3px;align-self:stretch;border-radius:2px;background:var(--navy);flex:none}
.replybar .rinfo{flex:1;min-width:0}
.replybar .rinfo b{display:block;font-size:12px;color:var(--navy-ink);font-weight:600}
.replybar .rinfo span{
  display:block;font-size:12.5px;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 말풍선 안의 인용 */
.quote{
  display:flex;gap:8px;margin:-2px 0 6px;padding:6px 9px;border-radius:9px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);cursor:pointer;
}
.bubblerow.me .quote{background:#ffffff26}
.quote .qline{width:3px;border-radius:2px;background:var(--navy);flex:none}
.bubblerow.me .quote .qline{background:#ffffff99}
.quote .qbody{min-width:0}
.quote b{display:block;font-size:11.5px;font-weight:600;opacity:.85}
.quote span{display:block;font-size:12px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 새 메시지가 올라오는 효과 ─────────────────────────── */
@keyframes msgIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}
.bubblerow.fresh{animation:msgIn .24s cubic-bezier(.22,1,.36,1)}
.bubblerow.fresh .bub,.bubblerow.fresh .filecard,.bubblerow.fresh .pollcard{
  animation:msgIn .3s cubic-bezier(.22,1,.36,1);
}
/* 잠깐 반짝 — 내가 보낸 게 도착했다는 느낌 */
@keyframes msgPop{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--navy) 35%,transparent)}
  100%{box-shadow:0 0 0 12px transparent}}
.bubblerow.fresh.me .bub{animation:msgIn .3s cubic-bezier(.22,1,.36,1),msgPop .6s ease-out}

/* ── 영상 보기 ─────────────────────────────────────────── */
.vplayer{width:100%;max-height:calc(100dvh - 190px);background:#000;border-radius:10px;display:block}
.vspeed{
  display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:12px 10px 4px;
}
.vspeed button{
  padding:7px 13px;border-radius:9px;background:var(--surface-2);color:var(--ink-2);
  font-size:13px;font-weight:600;font-family:var(--mono);
}
.vspeed button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}

/* ── 내장 PDF 뷰어 ─────────────────────────────────────── */
.pdfwrap{width:100%;height:100%;overflow:auto;background:var(--surface-3);padding:10px 0 60px}
.pdfpage{display:block;margin:0 auto 12px;box-shadow:var(--shadow);background:#fff;max-width:100%}
.pdfbar{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:3;
  display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:26px;
  background:var(--charcoal);color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.pdfbar button{color:#fff;padding:6px 11px;border-radius:18px;font-size:13px;font-weight:600}
.pdfbar button:disabled{opacity:.35}
.pdfbar span{font-size:12.5px;font-family:var(--mono);padding:0 6px;opacity:.9;white-space:nowrap}

/* ── 설정: 좁은 화면에서도 왼쪽 사이드바 ───────────────── */
@media (max-width: 759px){
  .sbody{flex-direction:row}
  .snav{
    flex-direction:column;width:104px;flex:none;overflow-y:auto;overflow-x:hidden;
    border-bottom:none;border-right:1px solid var(--line);padding:8px 7px;gap:3px;
  }
  .snav button{
    justify-content:flex-start;padding:9px 9px;font-size:12px;gap:6px;
    white-space:normal;line-height:1.3;text-align:left;
  }
  .spane{padding:12px 10px 40px}
  .setrow{gap:9px;padding:11px 12px}
  .selbox{max-width:52%}
}
@media (max-width: 359px){
  .snav{width:60px}
  .snav button{flex-direction:column;gap:2px;font-size:10px;text-align:center;justify-content:center}
}
.ficon.vid{--fc:#5B3A8C}
.ficon.aud{--fc:#2F6F7A}

/* ── 이모티콘 (v1.6) ───────────────────────────────────── */
.emotabs{display:flex;gap:6px;padding:0 2px 9px;overflow-x:auto}
.emotabs button{
  flex:none;padding:6px 13px;border-radius:9px;background:var(--surface-2);
  color:var(--ink-2);font-size:12.5px;font-weight:600;white-space:nowrap;
}
.emotabs button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.emotabs .tabsti{display:flex;align-items:center;gap:5px}
.emotabs .tabsti svg{width:19px;height:19px;flex:none}
.emotabs .tabsti .stiwrap{width:19px;height:19px;flex:none}
/* 이모티콘 종류 고르기 + 단추 */
.emotabs .tabplus{display:flex;align-items:center;gap:4px;background:var(--surface-3);color:var(--navy-ink)}
.emotabs .tabplus .plusmark{font-size:15px;font-weight:800;line-height:1}

/* 이모티콘 종류 고르기 시트 */
.setpick{display:flex;flex-direction:column;gap:8px;margin:6px 0 2px;max-height:50vh;overflow-y:auto}
.setrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;
  background:var(--surface-2);text-align:left;width:100%}
.setrow:hover{background:var(--surface-3)}
.setpick .setrow{padding:6px 8px 6px 6px;gap:8px}
.setpick .setgo{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;padding:4px 6px;border-radius:10px;color:inherit}
.setpick .setrow.off .setgo{opacity:.45;filter:grayscale(.6)}
.setpick .swch{cursor:pointer}
.setrow .setcover{width:40px;height:40px;flex:none}
.setrow .setinfo{display:flex;flex-direction:column;gap:1px;min-width:0}
.setrow .setinfo b{font-size:14px;font-weight:600;color:var(--ink)}
.setrow .setinfo span{font-size:11.5px;color:var(--ink-3)}

/* 타자 칠 때 뜨는 이모티콘 추천줄 */
.composer{position:relative}
.stisug{position:absolute;left:0;right:0;bottom:100%;z-index:6;height:80px;box-sizing:border-box;
  display:flex;gap:8px;padding:8px 12px;overflow-x:auto;align-items:center;
  background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(6px);
  border-top:1px solid var(--line);box-shadow:0 -6px 14px rgba(24,32,52,.06);scrollbar-width:none}
.stisug::-webkit-scrollbar{display:none}
.stisug .sugsti{flex:none;width:64px;height:64px;border-radius:14px;padding:4px;
  background:var(--surface-2);display:grid;place-items:center}
.stisug .sugsti:hover{background:var(--surface-3)}
.stisug .sugsti .stiwrap{width:100%;height:100%}
.stisug .sugclose{flex:none;position:sticky;right:0;align-self:center;width:36px;height:36px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);font-size:15px;
  display:grid;place-items:center;box-shadow:-8px 0 8px var(--surface)}
.stisug .sugclose:hover{background:var(--surface-2)}
/* 붙여 둔 이모티콘 (보내기 전 미리보기) */
.stipend{display:flex;align-items:center;gap:10px;padding:8px 12px 4px;
  border-top:1px solid var(--line)}
.stipend .stiwrap{flex:none;width:84px;height:84px;border-radius:14px;background:var(--surface-2);padding:4px}
.stipend .pendhint{flex:1;min-width:0;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.stipend .pendclose{flex:none;width:32px;height:32px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);color:var(--ink-2);font-size:14px;display:grid;place-items:center}
.stipend .pendclose:hover{background:var(--surface-3)}

/* ══ 이모티콘 (v1.7) ═══════════════════════════════════════════
   그림은 stickers.js 안에 글자로 박혀 있고, 움직임은 아래 CSS 가
   만듭니다. 원본 GIF 와 보이는 모습이 같으면서 275배 작습니다. */
.stigrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-height:264px;overflow-y:auto;padding:2px}
@container app (min-width: 700px){ .stigrid{grid-template-columns:repeat(6,1fr)} }
.stigrid button{
  aspect-ratio:1;border-radius:14px;display:grid;place-items:center;padding:4px;
  background:var(--surface-2);position:relative;
}
.stigrid button:hover{background:var(--surface-3)}
.stiwrap{display:block;width:100%;height:100%;overflow:visible}
.stiimg{width:100%;height:100%;object-fit:contain;display:block;will-change:transform}
.stiempty{background:var(--surface-3);border-radius:12px}
/* 그림을 못 읽었을 때 대신 보여 주는 칸 */
.stiempty::after{content:"이모티콘";display:grid;place-items:center;height:100%;
  font-size:10px;color:var(--ink-3)}

/* 보낸 이모티콘 — 말풍선 없이 크게 */
.stimsg{width:132px;height:132px;display:block}
@keyframes stiPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.bubblerow.fresh .stimsg{animation:stiPop .34s cubic-bezier(.2,1.2,.4,1)}

/* 움직임 15가지 — 원본 GIF 와 같은 동작입니다.
   채팅방에서는 3번 움직이고 멈춥니다(눈이 피로하지 않게).
   이모티콘 고르는 판에서는 계속 움직입니다. */
.stimsg .stiimg{animation-iteration-count:3}
.stigrid .stiimg{animation-iteration-count:infinite}
.stiimg[class*="mo-"]{animation-duration:.84s;animation-timing-function:ease-in-out;animation-fill-mode:both}
/* 2026-09-15 원장님 지시 "애니메이션은 일단 빼자" — 예전 움직임(흔들림·튀기)은 전부 멈춥니다. 그림은 그대로 보입니다. */
.stiimg[class*="mo-"]{animation:none !important;transform:none !important}
.mo-bounce{animation-name:moBounce}
.mo-shake{animation-name:moShake;animation-duration:.5s}
.mo-nod{animation-name:moNod}
.mo-swing{animation-name:moSwing}
.mo-pulse{animation-name:moPulse}
.mo-jump{animation-name:moJump;animation-duration:.9s}
.mo-spin{animation-name:moSpin;animation-duration:1.1s;animation-timing-function:ease}
.mo-zoom{animation-name:moZoom}
.mo-float{animation-name:moFloat;animation-duration:2.2s}
.mo-tilt{animation-name:moTilt;animation-duration:1.4s}
.mo-pop{animation-name:moPop;animation-duration:.7s}
.mo-cheer{animation-name:moCheer;animation-duration:.8s}
.mo-hello{animation-name:moHello;animation-duration:1s}
.mo-focus{animation-name:moFocus;animation-duration:1.8s}
.mo-celebrate{animation-name:moCelebrate;animation-duration:1s}

@keyframes moBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-11%)}}
@keyframes moShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3.5%)}40%{transform:translateX(3.5%)}60%{transform:translateX(-2.5%)}80%{transform:translateX(2.5%)}}
@keyframes moNod{0%,100%{transform:translateY(0) scaleY(1)}45%{transform:translateY(6%) scaleY(.94)}}
@keyframes moSwing{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes moPulse{0%,100%{transform:scale(1)}30%{transform:scale(1.09)}60%{transform:scale(.98)}}
@keyframes moJump{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:translateY(2%) scale(1.06,.94)}45%{transform:translateY(-24%) scale(.96,1.05)}75%{transform:translateY(2%) scale(1.05,.95)}}
@keyframes moSpin{0%{transform:perspective(420px) rotateY(0)}100%{transform:perspective(420px) rotateY(360deg)}}
@keyframes moZoom{0%{transform:scale(.84)}55%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes moFloat{0%,100%{transform:translateY(-4%)}50%{transform:translateY(4%)}}
@keyframes moTilt{0%,100%{transform:rotate(0)}30%,60%{transform:rotate(-11deg)}}
@keyframes moPop{0%{transform:scale(1)}30%{transform:scale(1.17)}55%{transform:scale(.93)}100%{transform:scale(1)}}
@keyframes moCheer{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-9%) rotate(-7deg)}75%{transform:translateY(-9%) rotate(7deg)}}
@keyframes moHello{0%,100%{transform:rotate(0)}20%{transform:rotate(13deg)}40%{transform:rotate(-9deg)}60%{transform:rotate(11deg)}80%{transform:rotate(-6deg)}}
@keyframes moFocus{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.05) translateY(-2%)}}
@keyframes moCelebrate{0%,100%{transform:translateY(0) rotate(0) scale(1)}20%{transform:translateY(-12%) rotate(-9deg) scale(1.05)}50%{transform:translateY(0) rotate(0) scale(1)}70%{transform:translateY(-12%) rotate(9deg) scale(1.05)}}
.mo-hello,.mo-swing,.mo-cheer{transform-origin:50% 88%}
.mo-tilt{transform-origin:50% 80%}

/* 움직임 고르는 작은 판 (이모티콘을 꾹 누르면 나옵니다) */
.mosheet{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:2px}
.mosheet button{padding:9px 4px;border-radius:10px;background:var(--surface-2);
  font-size:11.5px;font-weight:600;color:var(--ink-2)}
.mosheet button[aria-pressed="true"]{background:var(--navy);color:var(--on-navy)}
.mopreview{display:grid;place-items:center;height:120px;margin-bottom:10px}
.mopreview .stiwrap{width:110px;height:110px}

@media (prefers-reduced-motion: reduce){
  .stiimg[class*="mo-"]{animation:none}
}

/* ══ v1.7 추가 — 설정줄 스위치 · 사진 모아보기 · 캡처 미리보기 ══ */
/* 켜고 끄는 스위치 */
.sw{flex:none;width:38px;height:22px;border-radius:11px;background:var(--surface-3);
  position:relative;transition:background .18s}
.sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.22);transition:transform .18s}
.sw.on{background:var(--navy)}
.sw.on i{transform:translateX(16px)}
.lockmark{flex:none;font-size:11px;color:var(--ink-3);background:var(--surface-2);
  border-radius:6px;padding:2px 8px}

/* 설정 맨 위 사진 모아보기 */
.galhead{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:11px 2px 8px;font-size:13.5px}
.galhead b{font-weight:600}
.galhead span{font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.galstrip{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;
  border-bottom:1px solid var(--line)}
.galthumb{flex:none;width:66px;height:66px;border-radius:10px;overflow:hidden;
  background:var(--surface-3);line-height:0}
.galthumb img{width:100%;height:100%;object-fit:cover}
.galthumb.bad{background:var(--surface-3)}

/* 대화 캡처 미리보기 */
.captools{display:flex;flex-direction:column;gap:6px;margin:0 0 10px}
.capseg{display:flex;align-items:center;gap:8px}
.caplabel{flex:none;width:58px;font-size:12px;color:var(--ink-3)}
.segbtns{display:flex;gap:4px;flex-wrap:wrap}
.segbtn{padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:12px;color:var(--ink-2)}
.segbtn.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.pagelab{font-size:11px;color:var(--ink-3);padding:6px 8px 2px;font-family:var(--mono)}
.shotprev{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:10px;
  background:#fff;margin:6px 0 4px}
.shotprev img{width:100%;display:block}

/* 책갈피 줄 */
.daysep.bookmark i{background:color-mix(in srgb,var(--navy) 12%,var(--surface-3));color:var(--navy-ink);font-weight:600}

/* 입력창이 잠겼을 때 */
.composer.locked #input{opacity:.6}
.composer.locked .ctools{opacity:.45;pointer-events:none}

/* ══ 프로필 사진 (v1.7) ══════════════════════════════════════ */
.av{position:relative;overflow:hidden}
.avimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.av.haspic{color:transparent}

/* 사람 카드 — 이름은 길이에 따라 크기가 줄고 두 줄까지 갑니다 */
.pcard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 14px}
.pcard .av{width:92px;height:92px;font-size:30px;border-radius:28px}
.pcard .bigname{font-weight:700;letter-spacing:-.02em;text-align:center;line-height:1.25;
  max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:keep-all}
.pcard .bigname[data-len="s"]{font-size:22px}
.pcard .bigname[data-len="m"]{font-size:19px}
.pcard .bigname[data-len="l"]{font-size:16px}
.pcard .bigname[data-len="x"]{font-size:14px}
.pcard .psub{font-size:12.5px;color:var(--ink-3);text-align:center}
.pcard .pacts{display:flex;gap:8px;margin-top:4px}
.pcard .pacts button{padding:9px 16px;border-radius:11px;background:var(--surface-2);
  font-size:13px;font-weight:600;color:var(--ink-2)}
.pcard .pacts button.primary{background:var(--navy);color:var(--on-navy)}
.avpick{display:flex;gap:10px;align-items:center;margin:4px 0 10px}
.avpick .av{width:64px;height:64px;font-size:22px;border-radius:20px}
.avpick .avbtns{display:flex;flex-direction:column;gap:6px}
.avpick .avbtns button{padding:7px 12px;border-radius:9px;background:var(--surface-2);
  font-size:12.5px;color:var(--ink-2)}
.avbig{width:min(78vw,320px);height:min(78vw,320px);border-radius:24px;object-fit:cover;
  display:block;margin:0 auto;background:var(--surface-3)}

/* 채팅방에서 이름·사진을 누를 수 있다는 표시 */
.bubblerow .av,.mname{cursor:pointer}
.mname:hover{text-decoration:underline}

/* ══ 채팅방만 따로 띄운 창 (v1.7) ════════════════════════════
   설정 → 채팅 → "채팅방을 새 창으로 열기" 를 켜면, 컴퓨터에서
   목록과 대화가 다른 창으로 열립니다. 그 창에서는 목록·탭을 감춥니다. */
.app.solo .rail,
.app.solo .list,
.app.solo .tabs{display:none !important}
.app.solo .chat{grid-column:1 / -1}
.app.solo .back{display:none}
/* 사진만 띄운 창 (2026-09-18): 뒤의 채팅은 감추고 사진 보기만 */
.app.viewerwin .chat{visibility:hidden}
.app.viewerwin .viewer{z-index:80}
/* AI 답 안의 자료 단추 (2026-09-18 자료방 연동) */
.airef{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;max-width:100%;min-width:0;margin:6px 0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);text-align:left;cursor:pointer;color:var(--ink)}
.airef:hover{border-color:var(--navy)}
.airef .ficon{width:26px;height:32px;flex:none}
.airef .fmeta{min-width:0;flex:1;display:flex;flex-direction:column}
.airef .fmeta b{font-size:13.5px;word-break:break-all;line-height:1.3}
.airef .fmeta span{font-size:11.5px;color:var(--ink-3);word-break:break-all}
.airef .go{flex:none;font-size:12px;font-weight:700;color:var(--navy);white-space:nowrap}


/* ══ 대화 캡처 범위 고르기 (v1.7.1) ═══════════════════
   말풍선을 꾹 눌러 [캡처] 를 고르면 켜집니다.
   위아래로 끌면(드래그) 지나간 말풍선이 칠해집니다. */
#msgs.capmode{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:crosshair}
#msgs.capmode .bubblerow{transition:background .1s, box-shadow .1s}
#msgs.capmode .bubblerow.capsel{
  background:color-mix(in srgb,var(--navy) 13%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--navy) 26%,transparent);
  border-radius:12px}
.capbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 86px);
  z-index:60;display:flex;align-items:center;gap:12px;
  padding:9px 10px 9px 15px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  box-shadow:0 10px 28px rgba(0,0,0,.18);max-width:calc(100% - 24px)}
.capinfo{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.capinfo .capcnt{font-size:13px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.capinfo span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capact{display:flex;gap:7px;flex:none}
.capact .btn{padding:8px 13px;font-size:12.5px;border-radius:999px;min-width:0}
@media (max-width:380px){ .capinfo span{display:none} .capbar{gap:9px;padding-left:13px} }

/* 읽기 전용 칸 — 아이디처럼 보여만 주는 값 (v1.7.2) */
.roview{width:100%;padding:11px 13px;border-radius:10px;border:1px dashed var(--line);
  background:var(--surface-3);font-size:15px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pstat.duty{background:color-mix(in srgb,var(--navy) 10%,var(--surface-2));color:var(--navy-ink)}

/* 직책 목록 관리 (v1.8) */
.linkbtn{font-size:12.5px;font-weight:600;color:var(--navy);padding:2px 4px;border-radius:6px}
.linkbtn:hover{background:var(--surface-2)}
.linkbtn[hidden]{display:none!important}
.dutylist{display:flex;flex-direction:column;gap:8px;margin:4px 0 10px}
.dutyrow{display:flex;align-items:center;gap:6px}
.dutyrow input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);font-size:15px}
.dutyrow input:focus{outline:none;border-color:var(--navy);background:var(--surface)}
.dutyrow .iconbtn{font-size:14px;font-weight:700}
.dutyrow .iconbtn.danger{color:var(--red)}
.dutyrow .rankhint{flex:none;font-size:11px;color:var(--ink-3);white-space:nowrap}
.dutyadd{display:flex;gap:6px;margin-bottom:6px}
.dutyadd input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-2);font-size:15px}
.dutyadd input:focus{outline:none;border-color:var(--navy);background:var(--surface)}
.dutyadd .btn{flex:none;width:auto;padding:10px 16px}

/* 설치형 앱 새 판 안내 띠 (v1.7.3) */
.updbar{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:90;display:flex;align-items:center;gap:10px;
  padding:9px 10px 9px 14px;border-radius:999px;background:var(--navy);color:#fff;font-size:12.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.22);max-width:calc(100% - 24px)}
.updbar a{color:#fff;background:rgba(255,255,255,.18);border-radius:999px;padding:5px 11px;font-weight:600;text-decoration:none;white-space:nowrap}
.updbar button{background:none;border:0;color:#fff;font-size:18px;line-height:1;padding:0 4px;opacity:.8}

/* ══ 한글 문서 보기 (v1.8) ═══════════════════════════════════ */
.hwpdoc{
  max-width:820px;margin:0 auto;padding:22px 18px 60px;
  background:var(--surface);color:var(--ink);
  font-size:15px;line-height:1.85;word-break:break-word;
}
.hwpdoc .hwpp{margin:0 0 10px;white-space:pre-wrap}
.hwpdoc .hwpimg{display:block;max-width:100%;height:auto;margin:14px auto;border-radius:6px}
.hwptblwrap{overflow-x:auto;margin:14px 0}
.hwptbl{border-collapse:collapse;width:100%;font-size:14px}
.hwptbl td{
  border:1px solid var(--line);padding:7px 9px;vertical-align:top;
  line-height:1.6;min-width:54px;
}
.hwpdoc .hwpmore{
  margin-top:18px;padding:10px 12px;border-radius:10px;
  background:var(--surface-2);color:var(--ink-3);font-size:12.5px;line-height:1.7;
}
.hwpfail{display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:40px 20px;text-align:center;color:var(--ink-2)}
.hwpfail .sub{font-size:12.5px;color:var(--ink-3);margin:0}
.hwpfail .btn{width:auto;padding:11px 20px}

/* 글 문서(한글)를 볼 때는 가운데 정렬 대신 위에서부터 넘겨 봅니다 */
.vbody.docmode{
  display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#4b4b4b;
}
.vbody.docmode .hwpdoc{width:100%;max-width:820px;margin:0 auto;min-height:100%}

/* 영상·소리를 볼 때는 세로로 쌓고, 화면 폭에 맞춥니다 */
.vbody.mediamode{flex-direction:column;justify-content:center;align-items:stretch;padding:0 10px;gap:8px}
.vbody.mediamode .vplayer{width:100%;max-height:calc(100dvh - 220px);object-fit:contain}
.vbody.mediamode .vspeed{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0}
/* 영상 전체화면 단추 (2026-09-16 원장님) */
.vfsrow{margin-top:4px!important}
.vfs{padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);
  color:#fff;font-size:13.5px;font-weight:600;letter-spacing:-.2px}
.vfs:hover{background:rgba(255,255,255,.22)}
.vbody.mediamode .sub{color:#bdbdbd}
.tchip.gone{background:rgba(195,44,49,.10);color:var(--red);font-weight:600}

/* ── 시간표(구글 시트) 보기 (2026-09-16) ───────────────────────── */
.vbody.sheetsmode{display:block;padding:0;background:var(--bg);color:var(--ink);overflow:auto}
.sheets{padding:12px 14px 40px;max-width:1200px;margin:0 auto}
.shhead{margin-bottom:10px}
.shtabs{display:flex;gap:6px;flex-wrap:wrap}
.shtab{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);font-size:13px;font-weight:600;letter-spacing:-.01em}
.shtab.on{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.shtab.add{background:transparent;color:var(--ink-3);border-style:dashed}
.shbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px}
.shbar .sub{margin:0!important;font-size:12px}
/* 표에게 묻기 (2026-09-17) */
.shtips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.shtips .setbtn{font-size:12.5px;padding:6px 10px}
.shans{margin-top:12px;padding:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.shans .sub{margin:8px 0 0!important;font-size:11.5px}
.shanstext{white-space:pre-wrap;line-height:1.6;font-size:14.5px}
.shtable{overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface);
  max-height:calc(100dvh - 190px);-webkit-overflow-scrolling:touch}
.shgrid{border-collapse:collapse;font-size:13px;min-width:100%}
.shgrid th,.shgrid td{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  padding:7px 11px;text-align:left;vertical-align:middle;white-space:pre}
.shgrid th{position:sticky;top:0;z-index:2;background:var(--surface-2);font-weight:700;color:var(--ink)}
.shgrid td.first,.shgrid th.first{position:sticky;left:0;z-index:1;background:var(--surface-2);font-weight:600}
.shgrid th.first{z-index:3}
.shgrid tr:nth-child(even) td{background:rgba(127,127,127,.04)}
.shgrid tr:nth-child(even) td.first{background:var(--surface-2)}
.shempty{padding:44px 16px;text-align:center}
.shempty b{display:block;font-size:15px;margin-bottom:8px}
.shempty .sub{white-space:pre-line;line-height:1.7}

/* 더보기 묶음 이름 · 학습 탭 세그먼트 (2026-09-16) */
.morecap{margin:16px 16px 6px!important;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:-.01em}
.segbar.learnseg{margin:0 16px 8px}

/* 나만 보는 할 일 메모 (2026-09-16) */
.plock{font-size:12px;margin-right:4px;opacity:.75;line-height:1}
.privhint{margin-top:6px!important;font-size:12px;line-height:1.5}

/* 전체화면 — 영상과 단추를 함께 키웁니다 (2026-09-16) */
/* 진짜 전체화면이 안 되는 기기(안드로이드 앱 등)에서 화면을 가득 채우는 방식 (2026-09-17) */
.vbody.mediamode.fakefull{position:fixed!important;left:0;top:0;width:100vw;height:100dvh;z-index:220;background:#000;padding:12px 10px;gap:10px;justify-content:center;max-height:none}
.vbody.mediamode.fakefull .vplayer{max-height:calc(100dvh - 130px);border-radius:0}
html.fakefullon .tabs,html.fakefullon .vhead{display:none}
.vbody.mediamode:fullscreen{background:#000;padding:12px 10px;gap:10px;justify-content:center}
.vbody.mediamode:fullscreen .vplayer{max-height:calc(100dvh - 130px);border-radius:0}
.vbody.mediamode:-webkit-full-screen{background:#000}

/* 자료함 검색줄 · 검색 결과 · 책갈피 목록 (v1.8) */
.fsbar{width:calc(100% - 32px);text-align:left;cursor:pointer;padding:10px 12px}
.fsbar span{color:var(--ink-3);font-size:14px}
.fsearch{max-height:55vh;overflow-y:auto;margin-top:6px}
.fsearch .frow{width:100%}
.bmlist{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow-y:auto;margin:6px 0}
.bmrow{display:flex;align-items:center;gap:6px}
.bmgo{flex:1;min-width:0;text-align:left;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.bmgo:hover{background:var(--surface-3)}
.bmgo b{display:block;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmgo span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.bmrow .iconbtn.danger{color:var(--red)}

/* ══ 반응 고르기 판 (v1.8 — 카카오톡처럼) ═══════════════════════
   검색칸 · 최근 사용 · 종류별 묶음 · 아래 탭. 글자 반응은 알약, 이모티콘 반응은 작은 그림. */
.sheetbox.rpick{padding:14px 0 0;max-height:78dvh;display:flex;flex-direction:column;overflow:hidden}
.rsearch{display:flex;align-items:center;gap:8px;margin:0 14px 10px;padding:0 12px;height:42px;border-radius:21px;background:var(--surface-2)}
.rsearch svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;flex:none}
.rsearch input{flex:1;background:none;border:0;padding:0;font-size:14px;min-width:0;outline:none}
.rbody{flex:1;overflow-y:auto;padding:0 14px 10px;scroll-behavior:smooth;overscroll-behavior:contain}
.rsec h4{margin:12px 2px 6px;font-size:12px;font-weight:600;color:var(--ink-3)}
.rsec:first-child h4{margin-top:2px}
.rgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.rcell{aspect-ratio:1;border-radius:12px;display:grid;place-items:center;padding:4px;min-width:0}
.rcell:hover{background:var(--surface-2)}
.rcell:active{transform:scale(.92)}
.remo{font-size:22px;line-height:1}
.remo.big{font-size:27px}
.rtext{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.5;letter-spacing:-.02em;
  background:color-mix(in srgb,var(--red) 12%,var(--surface));color:var(--red);border:1px solid color-mix(in srgb,var(--red) 30%,transparent);white-space:nowrap}
.rtext.big{font-size:12.5px;padding:5px 9px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.rcell.text{padding:2px}
.rgrid.flow{display:flex;flex-wrap:wrap;gap:6px}
.rgrid.flow .rcell{aspect-ratio:auto;padding:2px}
.rgrid.flow .rtext.big{max-width:none}
.rsti{width:22px;height:22px;object-fit:contain;display:block}
.rsti.big{width:100%;height:100%}
.react .rsti{margin:-2px 0}
.react .rtext{padding:0 4px;font-size:11px;border:0;background:none}
.react .remo{font-size:13px}
.quickreact .rsti{width:24px;height:24px}
.quickreact .rtext{font-size:11px;padding:1px 6px}
.grouphead .rsti{width:20px;height:20px}
.rtabs{flex:none;display:flex;justify-content:space-around;align-items:center;gap:0;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.rtabs button{flex:1;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--ink-3)}
.rtabs button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rtabs button[aria-pressed="true"]{background:var(--surface-2);color:var(--navy-ink)}
.rbody .empty{padding:24px 0;text-align:center;color:var(--ink-3);font-size:13px}
@container app (min-width:700px){ .rgrid{grid-template-columns:repeat(8,1fr)} }


/* ══ 책갈피 ▲▼ (v1.8) ═══════════════════════════════ */
.bmnav{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;border-radius:22px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);border:1px solid var(--line);box-shadow:var(--shadow-sm);backdrop-filter:blur(6px)}
.bmnav .bmbtn{display:flex;flex-direction:column;align-items:center;gap:1px;width:36px;height:40px;justify-content:center;border-radius:18px}
.bmnav .bmbtn svg{width:18px;height:18px;fill:var(--navy);stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round}
.bmnav .bmpos{font-family:var(--mono);font-size:10.5px;color:var(--navy-ink);font-weight:600;line-height:1}
/* 사진·파일 모아보기 (2026-09-16) — 사진 격자 + 선택 받기, 파일 목록 */
.rftabs{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line-2)}
.rftab{padding:6px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.rftab.on{background:var(--navy);color:var(--on-navy);border-color:var(--navy)}
.roomfiles .rflist{flex:1;overflow-y:auto;padding:4px 8px}
.roomfiles .galpickhead h3{white-space:nowrap}
.roomfiles .galpickhead .btn,.roomfiles .galfoot .btn{flex:none;width:auto;padding:7px 16px;font-size:13px}
.roomfiles .galselcnt{white-space:nowrap;font-size:13px;color:var(--ink-2)}
.roomfiles .galfoot{gap:10px}
.roomfiles .galcell .galck[hidden]{display:none}
.roomfiles .galcell.on .galck{background:var(--red);border-color:#fff}

/* ══ 할 일 = 포스트잇 (v1.8) ═════════════════════════════
   색 6가지. 글자는 항상 어두운 색(포스트잇은 원래 밝은 종이니까). */
/* 게시판 느낌 — 칸마다 압정 머리글, 포스트잇은 끌어서 자리 바꾸기 (2026-09-16 원장님) */
.boardsec{margin:0 0 6px}
.boardhead{display:flex;align-items:center;gap:9px;padding:12px 14px 6px}
.boardhead .bpin{flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#f4736d,#c32c31 62%,#8d1f23);
  box-shadow:0 2px 3px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.55)}
.boardhead .bht{flex:1;min-width:0;line-height:1.25}
.boardhead .bht b{display:block;font-size:14px;font-weight:700;color:var(--ink)}
.boardhead .bht span{font-size:11.5px;color:var(--ink-3)}
.boardsec{border-radius:16px}
.boardhead .bcount{flex:none;font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--navy-ink);background:var(--wash);border-radius:999px;padding:2px 9px}
.postits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px;padding:20px 12px 22px;margin:0 6px;border-radius:14px;
  border:1px solid var(--line-2);box-shadow:inset 0 2px 10px rgba(0,0,0,.10)}
/* 게시판 바탕 고르기 (2026-09-16 원장님) — 그림 파일 없이 CSS 로만 그립니다 */
.postits[data-skin="cork"],.skinsw[data-skin="cork"]{
  background-color:#c48a50;
  /* 실제 코르크판 질감 그림 (10-02 원장님 「좀 더 진짜 같은 느낌」) — 이음매 없는 768px 그림을 384px 로 겹쳐 깔아 선명하게 */
  background-image:radial-gradient(ellipse at 50% 40%,rgba(255,236,205,.10),rgba(60,32,10,.16) 100%),url('/cork.webp');
  background-size:100% 100%,384px 384px;border-color:#7a4a22;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.06),inset 0 3px 14px rgba(40,20,5,.30)}
.postits[data-skin="green"],.skinsw[data-skin="green"]{
  background-color:#2f5d4a;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    radial-gradient(circle at 30% 40%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(160deg,#356a54,#27503f);border-color:#1f3d31}
.postits[data-skin="wood"],.skinsw[data-skin="wood"]{
  background-color:#a9763f;
  background-image:repeating-linear-gradient(90deg,rgba(90,55,25,.20) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(90deg,rgba(255,230,190,.12) 0 1px,transparent 1px 15px),
    linear-gradient(120deg,#b98449,#95632f);border-color:#6f4722}
.postits[data-skin="linen"],.skinsw[data-skin="linen"]{
  background-color:#d8d5cd;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px),
    linear-gradient(#e2dfd7,#cfcbc2);border-color:#b7b3a9}
.postits[data-skin="white"],.skinsw[data-skin="white"]{
  background:linear-gradient(var(--surface),var(--bg));border-color:var(--line-2);box-shadow:none}
/* 게시판 바탕 고르기 창 */
.skinpick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 4px}
.skincell{display:flex;flex-direction:column;gap:6px;align-items:center;padding:6px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.skincell.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--wash)}
.skinsw{position:relative;width:100%;aspect-ratio:1.25;border-radius:9px;overflow:hidden;border:1px solid rgba(0,0,0,.18)}
.skinnote{position:absolute;width:34%;height:42%;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.skinnote.c-yellow{left:12%;top:18%;background:#FFF3A8;transform:rotate(-4deg)}
.skinnote.c-blue{right:12%;bottom:16%;background:#D5E8FF;transform:rotate(5deg)}
.skinlabel{font-size:11.5px;color:var(--ink-2);text-align:center;line-height:1.3}
.postits[data-skin="photo"]{background-size:cover;background-position:center;border-color:rgba(0,0,0,.25)}
.skinsw.skinphoto{display:grid;place-items:center;background-size:cover;background-position:center;background-color:var(--surface-2);color:var(--ink-3);font-size:20px}
.skinrow{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
.skinrow b{font-size:13px;font-weight:600;flex:none}
.skinrow input[type=range]{flex:1;accent-color:var(--navy)}
.skinval{font-family:var(--mono);font-size:12px;color:var(--ink-3);width:38px;text-align:right}
.colorpick{display:flex;gap:8px;margin:6px 0 2px}
.colcell{width:36px;height:36px;border-radius:9px;border:1px solid rgba(0,0,0,.15);background:var(--pi,#FFF3A8);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.colcell.c-red{--pi:#FFD9D9}.colcell.c-orange{--pi:#FFE2BE}.colcell.c-yellow{--pi:#FFF3A8}
.colcell.c-green{--pi:#D8F5D0}.colcell.c-blue{--pi:#D5E8FF}.colcell.c-purple{--pi:#E8DDFF}
.colcell.on{outline:2px solid var(--navy);outline-offset:2px}
.postit{touch-action:manipulation}
.postit.dragging{z-index:9;cursor:grabbing;box-shadow:0 10px 24px rgba(0,0,0,.28);opacity:.96}
/* 포스트잇이 4장 이상이면 줄 맞추기를 풀고 아무 자리에나 (2026-09-16 원장님 "자유로운 느낌으로") */
.postits.free{display:block;position:relative;padding:0;min-height:190px;overflow:hidden}
.postits.free .postit{position:absolute;margin:0;touch-action:none;cursor:grab;transition:none}
.postits.free.laid .postit{transition:left .14s ease,top .14s ease}
.postits.free .postit.dragging{transition:none;cursor:grabbing;transform:rotate(1.4deg) scale(1.04);z-index:20;
  box-shadow:0 14px 30px rgba(0,0,0,.34)}
.postits.free.laid .postit:hover{transform:rotate(0deg);transition:transform .16s ease,left .14s ease,top .14s ease}
.btidy{flex:none;font-size:11.5px;font-weight:600;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.btidy:hover{background:var(--wash);border-color:var(--navy);color:var(--navy-ink)}
body.carddrag{user-select:none;-webkit-user-select:none}
body.carddrag .postit:not(.dragging){transition:transform .12s ease}
/* 줄 수는 게시판 자체 너비로 정함 — 앱 창이 넓어도 게시판이 좁으면 포스트잇이 길쭉해지지 않게 (원장님 10-02) */
.postit{position:relative;display:flex;flex-direction:column;min-height:152px;padding:14px 12px 10px;border-radius:2px;
  color:#2b2723;word-break:break-word;
  background-color:var(--pi,#FFF3A8);
  background-image:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%),
    linear-gradient(to top,rgba(0,0,0,.06),rgba(0,0,0,0) 22%);
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.18),inset 0 -14px 16px -14px rgba(0,0,0,.12);
  transform:rotate(-1.1deg)}
/* 붙인 모양이 조금씩 다르게 — 진짜로 손으로 붙인 느낌 */
.postit:nth-child(3n+1){transform:rotate(-1.6deg)}
.postit:nth-child(3n+2){transform:rotate(1.2deg)}
.postit:nth-child(3n){transform:rotate(-.3deg)}
.postit:nth-child(5n){transform:rotate(2deg)}
.postit:hover{transform:rotate(0deg) translateY(-2px);transition:transform .16s ease}
/* 압정으로 꽂아 둔 느낌 (2026-09-16 원장님) */
.postit::before{content:"";position:absolute;left:50%;top:-7px;width:15px;height:15px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff8a84,#c32c31 60%,#8d1f23);
  box-shadow:0 2px 4px rgba(0,0,0,.32),inset 0 1px 1px rgba(255,255,255,.6);z-index:1}
.postit::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:7px;transform:translateX(-50%) rotate(8deg);
  background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,0));border-radius:2px}
.postit.done::after{opacity:.5}
.postit.c-red{--pi:#FFD9D9}.postit.c-orange{--pi:#FFE2BE}.postit.c-yellow{--pi:#FFF3A8}
.postit.c-green{--pi:#D8F5D0}.postit.c-blue{--pi:#D5E8FF}.postit.c-purple{--pi:#E8DDFF}
.postit.overdue{outline:2px solid var(--red);outline-offset:-2px}
.postit.done{opacity:.72}
.phead{display:block;width:100%;text-align:left;padding:0 0 6px;border-bottom:1px dashed rgba(0,0,0,.18);margin-bottom:6px;color:inherit}
.phead b{font-size:14px;font-weight:700;line-height:1.35;display:block}
.postit.done .phead b{text-decoration:line-through;opacity:.6}
.pitems{list-style:none;margin:0;padding:0;counter-reset:pi;display:flex;flex-direction:column;gap:3px;flex:1}
.pitems li{counter-increment:pi}
.pitems label{display:flex;align-items:flex-start;gap:6px;cursor:pointer;color:inherit}
.pitems label::before{content:counter(pi) ".";flex:none;font-weight:700;font-size:13px;line-height:1.45;min-width:16px;opacity:.75}
.pitems .ptext{flex:1;font-size:13px;line-height:1.45;transition:opacity .2s}
.pitems input[type=checkbox]{flex:none;appearance:none;width:19px;height:19px;margin:1px 0 0;border-radius:5px;border:1.8px solid rgba(0,0,0,.35);background:rgba(255,255,255,.6);display:grid;place-items:center;cursor:pointer}
.pitems input[type=checkbox]::after{content:"";width:10px;height:6px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:translateY(-1px) rotate(-45deg);opacity:0}
.pitems input[type=checkbox]:checked{background:var(--ok);border-color:var(--ok)}
.pitems input[type=checkbox]:checked::after{opacity:1}
.pitems input[type=checkbox]:disabled{opacity:.45;cursor:default}
.pitems li.ok .ptext{text-decoration:line-through;text-decoration-thickness:2px;opacity:.38}
.pnote{font-size:11.5px;opacity:.7;margin-top:6px;white-space:pre-wrap}
.pconfirm{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;margin-top:8px;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.7);border:1.5px solid var(--ok);color:#1f4d3a;text-align:left}
.pconfirm .pcb{grid-row:1/3;width:20px;height:20px;border-radius:6px;border:2px solid var(--ok);background:#fff}
.pconfirm b{font-size:12.5px}
.pconfirm span:last-child{font-size:10.5px;opacity:.75}
.pconfirm:hover{background:#fff}
.pwait{margin-top:8px;font-size:11px;font-weight:600;color:#1f4d3a;background:rgba(255,255,255,.55);border-radius:8px;padding:5px 8px}
.pfoot{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;padding-top:6px;border-top:1px dashed rgba(0,0,0,.14)}
.postit .tchip{background:rgba(255,255,255,.55);color:#3a3531;font-size:10.5px}
.postit .tchip.late{background:var(--red);color:#fff}
.postit .tchip.due{background:rgba(255,255,255,.8)}
.pstamp{position:absolute;right:10px;top:8px;font-size:11px;font-weight:800;color:var(--ok);border:2px solid var(--ok);border-radius:4px;padding:1px 5px;transform:rotate(-12deg);opacity:.8}
.subpos{border:1px dashed var(--line);border-radius:12px;padding:10px 12px 12px;margin:0 0 12px;background:var(--surface-2)}
.subpos .sub{margin:0 0 10px;font-weight:600;color:var(--ink-2)}
.subpos .btn{width:100%;margin-top:4px}
.swatches{display:flex;gap:10px;margin:2px 0 14px}
.swatch{width:34px;height:34px;border-radius:6px;border:2px solid rgba(0,0,0,.12);background:var(--pi);box-shadow:0 2px 4px rgba(0,0,0,.12)}
.swatch.c-red{--pi:#FFD9D9}.swatch.c-orange{--pi:#FFE2BE}.swatch.c-yellow{--pi:#FFF3A8}
.swatch.c-green{--pi:#D8F5D0}.swatch.c-blue{--pi:#D5E8FF}.swatch.c-purple{--pi:#E8DDFF}
.swatch[aria-pressed="true"]{border-color:var(--navy);transform:scale(1.12);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--navy)}

/* ── 문제은행 (v1.9 1단계, 2026-09-16) ─────────────────────────── */
.vbody.bankmode{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg);padding:12px 12px 40px}
.bank{max-width:960px;margin:0 auto;text-align:left}
.vbody.bankmode{text-align:left}
.bankbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bankbar select,.bankbar input{padding:8px 10px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:13px;color:var(--ink)}
.bankbar input{flex:1;min-width:150px}
.bankacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.bankacts .btn{padding:9px 14px;font-size:13.5px}
.bankhint{font-size:11.5px;color:var(--ink-3)}
.bankcount{padding-top:10px}
.banklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.bkcard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px;display:flex;flex-direction:column;gap:7px;min-width:0}
.pchead{display:flex;align-items:center;gap:8px}
.pchead b{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--navy-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcstar{font-size:11px;color:#E0A100;letter-spacing:-1px;flex:none}
.pcmeta{display:flex;flex-wrap:wrap;gap:4px}
.pcmeta span{font-size:10.5px;color:var(--ink-3);background:var(--surface-2);border-radius:999px;padding:2px 7px}
.pcimg{max-height:180px;width:auto;max-width:100%;object-fit:contain;border-radius:8px;background:var(--surface-2);cursor:zoom-in;align-self:flex-start}
.pcbody{font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-height:7.8em;overflow:hidden}
.pcchoices{font-size:12.5px;color:var(--ink-2);white-space:pre-wrap}
.pcans{align-self:flex-start;font-size:12px;color:var(--navy-ink);background:var(--wash);border-radius:999px;padding:4px 10px;text-align:left;white-space:pre-wrap}
.pcans.open{border-radius:10px;background:var(--surface-2);color:var(--ink)}
.pcfoot{display:flex;gap:6px;align-items:center;margin-top:2px}
.pcby{margin-left:auto;font-size:11px;color:var(--ink-3)}
.sheetbox.bankedit{max-width:520px}
.sheetbox.bankedit .field select,.sheetbox.bankedit .field textarea,.field select,.field textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);font-size:14.5px;color:var(--ink)}
.field textarea{resize:vertical;min-height:70px;line-height:1.5}
.bankpic{margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.bankpic img{max-height:220px;max-width:100%;object-fit:contain;border-radius:10px;background:var(--surface-2);align-self:flex-start}
.basketlist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;margin:6px 0 10px}
.brow2{display:flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:10px;padding:6px 8px}
.brow2>b{width:22px;text-align:center;font-size:12.5px;color:var(--navy-ink);flex:none}
.brow2 .btxt{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow2 input{width:52px;padding:5px 6px;border-radius:7px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;text-align:center}
.brow2 .segbtn{padding:4px 7px}
/* 종이 */
.av.roompic{background:var(--surface-2);border:1px solid var(--line)}
.vbody.printmode{background:#5a5a5a}
.vbody.printmode .bankacts .btn.ghost{background:#fff;color:var(--navy);border-color:#fff}
.vbody.printmode .bankhint{color:#ddd}
.paper{background:#fff;color:#111;width:100%;max-width:794px;margin:0 auto 16px;padding:38px 42px;box-shadow:0 4px 18px rgba(0,0,0,.35);font-family:var(--sans);font-size:14px;line-height:1.6;min-height:400px}
.phead{display:flex;align-items:center;gap:14px;border-bottom:2px solid #243553;padding-bottom:10px;margin-bottom:14px}
.plogo{width:44px;height:44px;flex:none}
.ptitle{flex:1;min-width:0}
.ptitle b{display:block;font-size:19px;font-weight:700;color:#243553}
.ptitle span{font-size:12px;color:#555}
.pblank{font-size:12px;color:#333;text-align:right;line-height:1.7;flex:none}
.pnote{font-size:12.5px;color:#444;border:1px dashed #bbb;border-radius:6px;padding:6px 10px;margin:0 0 12px}
.pcols{display:block}
.pcols.two{column-count:2;column-gap:28px}
.pq{break-inside:avoid;margin-bottom:18px}
.pqh{display:flex;gap:6px;align-items:baseline}
.pqh b{font-size:15px;color:#243553}
.pqh i{font-style:normal;font-size:11.5px;color:#666}
.pqbody{white-space:pre-wrap;word-break:break-word;margin:4px 0}
.pqimg{max-width:100%;max-height:340px;display:block;margin:6px 0}
.pqch{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;margin-top:4px}
.pqspace{height:110px;border-bottom:1px solid #ddd}
.pqans{font-size:13px;color:#333;margin-top:6px}
.paper h4{margin:0 0 10px;font-size:16px;color:#243553}
.paper.answers table{width:100%;border-collapse:collapse;font-size:13px}
.paper.answers td{border:1px solid #ccc;padding:5px 8px;vertical-align:top;white-space:pre-wrap}
.paper.answers td:first-child{width:36px;text-align:center;font-weight:600}
.paper.answers td:nth-child(2){width:120px;font-weight:600}
.omrgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 30px}
.omrrow{display:flex;gap:10px;align-items:center;font-size:14px}
.omrrow b{width:26px;text-align:right}
.omrrow span{width:22px;height:22px;border:1px solid #333;border-radius:50%;display:grid;place-items:center;font-size:11px}
.omrrow .omrline{width:auto;height:auto;border:0;border-radius:0}
@media print{
  body *{visibility:hidden !important}
  #viewer,#viewer *{visibility:visible !important}
  #viewer{position:static !important;background:#fff !important}
  .vhead,.bankacts{display:none !important}
  .vbody.printmode{background:#fff !important;padding:0 !important;overflow:visible !important}
  .paper{box-shadow:none !important;margin:0 !important;max-width:none !important;padding:10mm 12mm !important;page-break-after:always}
  .paper:last-child{page-break-after:auto}
}

/* ══ 수업 진도 (2026-09-16 원장님) ═══════════════════════ */
.sheetbox.progsheet{width:min(720px,100vw)}
.progsheet .sub{padding:0 14px;margin:8px 0 4px}
.progsheet .picklist{padding:0 8px}
.pgbar{position:absolute;left:12px;right:12px;bottom:6px;height:3px;border-radius:3px;background:var(--line-2);overflow:hidden}
.pgfill{height:100%;background:var(--navy);border-radius:3px;transition:width .25s}
.picklist .pick{position:relative;padding-bottom:14px}
.unitlist{padding:4px 8px 16px}
.unitsec{margin-bottom:10px;border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.unitrow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-2);background:var(--surface)}
.unitrow:last-child{border-bottom:0}
.unitrow.big{background:var(--surface-2)}
.unitrow.big .uinfo b{font-size:14px;font-weight:700}
.unitrow .umark{flex:none;width:24px;height:24px;border-radius:8px;border:1.8px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff}
.unitrow.on .umark{background:var(--navy);border-color:var(--navy)}
.unitrow.on .uinfo b{color:var(--navy-ink)}
.uinfo{min-width:0;flex:1}
.uinfo b{display:block;font-size:13.5px;font-weight:600;line-height:1.35}
.uinfo .usub{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.tocbtns{display:flex;gap:8px;padding:2px 14px 0}
.tocbtns .btn{flex:1;font-size:12.5px;padding:9px 10px}
.tocarea{width:100%;min-height:200px;font-family:var(--mono);font-size:12.5px;line-height:1.6;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);resize:vertical}
.progsheet .pinfo span{display:block;line-height:1.5}
/* 비밀번호 찾기 (2026-09-16) */
.linkbtn{display:block;width:100%;margin-top:10px;padding:6px;font-size:12.5px;color:var(--ink-3);text-align:center}
.linkbtn:hover{color:var(--navy-ink);text-decoration:underline}
.pwreq{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line-2)}
.pwreq .pinfo{flex:1;min-width:0}
.pwreq .btn{flex:none;padding:8px 12px;font-size:12.5px;width:auto}
.temppw{margin:10px 0 4px;padding:16px;border-radius:12px;background:var(--wash);border:1px solid var(--navy);
  font-family:var(--mono);font-size:22px;font-weight:700;letter-spacing:.08em;text-align:center;color:var(--navy-ink);user-select:all}

/* ── AI 풀이 카드 (2026-09-17) ───────────────────────────── */
.bub.aibub.cardbub{white-space:normal;padding:8px;max-width:min(92vw,520px)}
.solvecard{border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--line);min-height:120px}
.solvecard img{display:block;width:100%;height:auto;cursor:zoom-in}
.aitext{white-space:pre-wrap;padding:10px 8px 4px;font-size:14px}
.cardtools{display:flex;gap:6px;padding:8px 2px 0}
.cardtool{font-size:12px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-2);cursor:pointer}
.cardtool:hover{border-color:var(--navy);color:var(--navy-ink)}
.sheetbox.cardview{display:flex;flex-direction:column;background:#111;color:#fff;padding:0}
.cvhead{display:flex;align-items:center;gap:8px;padding:10px 12px;flex:none}
.cvback{background:none;border:0;color:#fff;font-size:22px;padding:4px 10px;cursor:pointer}
.cvtitle{font-weight:700}
.cvbody{flex:1;overflow:auto;padding:0 8px}
.cvbody img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
.cvfoot{display:flex;gap:8px;justify-content:flex-end;padding:10px 12px;flex:none;border-top:1px solid rgba(255,255,255,.12)}

/* ── 영상 전체화면 — 유튜브처럼 (2026-09-22 원장님) ─────────────────────── */
.vwrap{position:relative;width:100%}
.vwrap .vplayer{width:100%}
.vfsbtn{position:absolute;right:10px;bottom:56px;width:40px;height:40px;border-radius:9px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;z-index:3}
.vfsbtn svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
video::-webkit-media-controls-fullscreen-button{display:none!important}
/* 전체화면(진짜·가득 채우기 공통) */
.vbody.mediamode.vfull{padding:0!important;gap:0!important;justify-content:center;background:#000}
.vbody.mediamode.vfull .vwrap{height:100%;display:flex;align-items:center}
.vbody.mediamode.vfull .vplayer{max-height:100%!important;height:100%;border-radius:0}
.vbody.mediamode.vfull .vspeed{position:absolute;left:0;right:0;bottom:58px;z-index:4;flex-wrap:nowrap;
  justify-content:center;gap:6px;padding:8px 64px 8px 10px;margin:0;overflow-x:auto;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  transform:translateY(40px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .28s}
.vbody.mediamode.vfull.ctlshow .vspeed{transform:translateY(0);opacity:1;pointer-events:auto}
.vbody.mediamode.vfull .vspeed button{background:rgba(255,255,255,.16);color:#fff;padding:7px 11px}
.vbody.mediamode.vfull .vspeed button[aria-pressed="true"]{background:#fff;color:#111}
.vbody.mediamode.vfull .vfsbtn{bottom:64px;right:12px;opacity:0;transition:opacity .28s;z-index:5}
.vbody.mediamode.vfull.ctlshow .vfsbtn{opacity:1}
.vbody.mediamode.fakefull{height:100dvh}
/* 세로로 든 폰(화면을 못 돌리는 앱) — 영상 판을 90° 돌려 가로로 */
.vbody.mediamode.fakefull.vrot{top:0;left:100vw;width:100dvh;height:100vw;transform-origin:top left;transform:rotate(90deg)}

/* ── 캡처 자르기 — 미리 놓인 네모 칸 (2026-09-22) ── */
.cropouter{text-align:center;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:8px;line-height:0}
.cropstage{position:relative;display:inline-block;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.cropimg{display:block;max-width:100%;max-height:60vh;width:auto;height:auto}
.croprect{position:absolute;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 9999px rgba(20,28,48,.5);cursor:move;touch-action:none;box-sizing:border-box}
.croprect::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.45) 33.3%,rgba(255,255,255,.45) 33.6%,transparent 33.7%,transparent 66.5%,rgba(255,255,255,.45) 66.6%,rgba(255,255,255,.45) 66.9%,transparent 67%),
  linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.45) 33.3%,rgba(255,255,255,.45) 33.6%,transparent 33.7%,transparent 66.5%,rgba(255,255,255,.45) 66.6%,rgba(255,255,255,.45) 66.9%,transparent 67%);pointer-events:none}
.crophandle{position:absolute;width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 1px 4px rgba(0,0,0,.45);z-index:2;touch-action:none}
.crophandle.nw,.crophandle.ne,.crophandle.sw,.crophandle.se{margin:0}
.crophandle.nw{left:-14px;top:-14px;cursor:nwse-resize}.crophandle.ne{right:-14px;top:-14px;cursor:nesw-resize}
.crophandle.sw{left:-14px;bottom:-14px;cursor:nesw-resize}.crophandle.se{right:-14px;bottom:-14px;cursor:nwse-resize}

/* ＋ → 캡처 고르기 (2026-09-22) */
.capchoose{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 4px}
.capchoose .capopt:nth-child(3){grid-column:1/-1;flex-direction:row;justify-content:center;padding:12px}
.capchoose .capopt:nth-child(3) svg{width:24px;height:24px}
.capopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;border-radius:14px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);text-align:center}
.capopt svg{width:34px;height:34px;fill:none;stroke:var(--navy);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.capopt b{font-size:15px}.capopt span{font-size:12px;color:var(--ink-3);line-height:1.4}

/* 화면 캡처 — 지금 화면 위에 네모 칸 (2026-09-22) */
.capov{position:fixed;inset:0;z-index:400;touch-action:none}
.capov .capovrect{position:fixed;box-shadow:0 0 0 9999px rgba(20,28,48,.45)}
.capovtip{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 14px);transform:translateX(-50%);
  background:rgba(0,0,0,.72);color:#fff;font-size:12.5px;padding:7px 12px;border-radius:999px;white-space:nowrap;pointer-events:none}
.capovbar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;justify-content:center;
  padding:12px 14px calc(env(safe-area-inset-bottom,0px) + 14px);background:rgba(0,0,0,.55)}
.capovbar .btn{width:auto;min-width:0;padding-left:12px;padding-right:12px;font-size:13.5px}
.capovbar{flex-wrap:wrap}

/* ── Y-AI비서 방: ChatGPT for Kakao 모양 (2026-09-22 원장님) ── */
html.airoom .msgs{--roombg:var(--surface);gap:18px;padding:18px 16px 10px}
html.airoom .bubblerow.airow{justify-content:flex-start;max-width:100%}
html.airoom .bubblerow.airow .mbody{max-width:100%;width:100%}
html.airoom .bubblerow.airow .brow{display:block}
html.airoom .bubblerow.airow .bub.aibub{background:transparent;border:0;border-radius:0;box-shadow:none;padding:2px 2px 0;max-width:100%;font-size:16px;line-height:1.65;color:var(--ink)}
html.airoom .bubblerow.airow .bub.aibub.cardbub{padding:0}
html.airoom .bubblerow.airow .stamp{display:none}
html.airoom .bubblerow.me .bub{background:var(--line-2,#F0F0F0);color:var(--ink);border:0;border-radius:22px;padding:11px 18px;font-size:16px;box-shadow:none}
html.airoom .bubblerow.me .stamp,html.airoom .bubblerow.me .readmark{display:none}
.aiacts{display:flex;gap:6px;margin-top:8px}
.aiact{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:none;color:var(--ink-2)}
.aiact svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.aiact:hover{background:var(--line-2)}
.aiact.on{color:var(--navy)}
.aiact.on svg{fill:color-mix(in srgb,var(--navy) 22%,transparent)}
html.airoom .composer{border-top:0;background:var(--surface);padding:6px 12px calc(10px + env(safe-area-inset-bottom))}
html.airoom .composer .grip{display:none}
html.airoom .composer .crow,html.airoom .composer .ctools{background:var(--surface);border:1px solid var(--line)}
html.airoom .composer .crow{border-bottom:0;border-radius:26px 26px 0 0;padding:12px 16px 2px}
html.airoom .composer .ctools{border-top:0;border-radius:0 0 26px 26px;margin-top:0;padding:4px 10px 10px;box-shadow:0 4px 10px rgba(0,0,0,.05)}
html.airoom .composer textarea{font-size:16px}
html.airoom #mentionBtn,html.airoom #emojiBtn{display:none}
html.airoom .composer .crow .send{position:absolute;right:22px;bottom:calc(20px + env(safe-area-inset-bottom));width:42px;height:42px;background:var(--line-2);}
html.airoom .composer .crow .send svg{stroke:var(--ink-2)}
html.airoom .composer .crow .send:not(:disabled){background:var(--navy)}
html.airoom .composer .crow .send:not(:disabled) svg{stroke:var(--on-navy)}
html.airoom .composer{position:relative}
html.airoom .composer .ctools{min-height:46px}

/* ── 문제은행 단추 — 첫 화면 로고 옆 (2026-09-26 원장님: Y-Work 주력 프로그램) ── */
.mhead b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mhead .msp{flex:1}
.bankbtn{flex:none;display:inline-flex;align-items:center;gap:5px;padding:6px 12px 6px 10px;border-radius:999px;border:0;background:#2F6BD8;color:#fff;font:inherit;font-size:13px;font-weight:700;letter-spacing:-.01em;cursor:pointer;box-shadow:0 1px 3px rgba(47,107,216,.35)}
.bankbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bankbtn:hover{background:#2459BC}
.bankbtn:active{transform:scale(.97)}

/* 자료함 뒤로·앞으로 단추 (2026-09-28) */
.crumbs .nasnav{display:inline-flex;gap:4px;margin-right:6px}
.crumbs .nasnav button{width:30px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--navy-ink);font-size:18px;line-height:1;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 0 2px;cursor:pointer}
.crumbs .nasnav button:hover:not(:disabled){background:var(--surface-2)}
.crumbs .nasnav button:disabled{opacity:.35;cursor:default}

/* 학습 → 문제은행 목록 (2026-09-28) */
.lbhead{display:flex;align-items:center;gap:8px;margin:0 16px 10px;flex-wrap:wrap}
.lbseg{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:3px;gap:2px;margin-right:auto}
.lbseg button{border:0;background:transparent;border-radius:7px;padding:6px 14px;font-size:13px;color:var(--ink-2);cursor:pointer}
.lbseg button[aria-pressed=true]{background:var(--surface);color:var(--navy-ink);font-weight:700;box-shadow:var(--shadow-sm)}
.lbmk,.lbop{border:1px solid var(--navy);border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer}
.lbmk{background:var(--navy);color:var(--on-navy)}
.lbop{background:var(--surface);color:var(--navy-ink)}
.lbrow{cursor:default}
.lbrow .fmeta span{font-family:inherit}
.lbacts{display:flex;gap:6px;flex:none}
.lbbtn{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:5px 11px;font-size:12.5px;cursor:pointer}
.lbbtn.pri{background:var(--navy);border-color:var(--navy);color:var(--on-navy);font-weight:700}
.lbbtn:disabled{opacity:.5;cursor:default}
.lbside{margin:24px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);max-width:420px}
.lbside b{font-size:15px;color:var(--navy-ink)}
.lbside p{font-size:13px;color:var(--ink-2);line-height:1.7;margin:8px 0 14px}

/* 할일 머리줄 — 「할일」 제목이 단추에 밀려 잘리지 않게 (2026-09-29 원장님 「할일 글자가 짤림」)
   글씨 크게 보기(폰 설정)에서도 맞도록, 머리줄 실제 폭을 보고 단추 글씨를 차례로 숨김 */
.app[data-tab="tasks"] .mhead{container-type:inline-size}
.app[data-tab="tasks"] .mhead b{flex-shrink:0;overflow:visible}
@container (max-width:420px){ .mhead .tmk{gap:4px;padding:6px 9px} .mhead .tmk.skin span{display:none} .mhead .tmk.skin{padding:6px 8px} }
@container (max-width:345px){ .mhead .tmk.mine span{display:none} .mhead .tmk.mine{padding:6px 8px} }
@container (max-width:285px){ .mhead .tmk.other span{display:none} .mhead .tmk.other{padding:6px 8px} }

/* ── Y-AI비서 말풍선 꾸미기 (2026-10-04 원장님 「말풍선이나 이쁜 디자인으로」) ── */
.bub.aibub.airich{white-space:normal}
.bub.aibub{overflow-wrap:anywhere;min-width:0}   /* 긴 경로·이름이 말풍선을 화면 밖으로 밀지 않게 (2026-10-11) */
.airef .fmeta b,.airef .fmeta span{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}   /* 폴더 이름은 끝(날짜)까지 보이게 줄바꿈 */
.airich .ai-p{white-space:pre-wrap}
.airich .ai-p.gap{margin-top:8px}
.airich .ai-hr{border-top:1px dashed color-mix(in srgb,var(--navy) 25%,var(--line));margin:14px 2px}
.airich .ai-h{position:relative;font-weight:800;color:var(--navy-ink);margin:12px 0 4px;padding-left:12px;letter-spacing:-.01em}
.airich .ai-h:first-child{margin-top:0}
.airich .ai-h::before{content:"";position:absolute;left:1px;top:.32em;width:4px;height:.95em;background:var(--red);border-radius:2px;transform:skewX(-14deg)}
.airich .ai-li{position:relative;padding-left:15px;margin:3px 0;white-space:pre-wrap}
.airich .ai-li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--navy)}
.airich .ai-step{display:flex;gap:8px;align-items:flex-start;margin:5px 0;white-space:pre-wrap}
.airich .ai-stepno{flex:none;min-width:21px;height:21px;margin-top:.15em;border-radius:50%;border:1.5px solid var(--navy);color:var(--navy-ink);font-size:11.5px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.airich .ai-quote{background:var(--surface-2);border-left:3px solid color-mix(in srgb,var(--navy) 35%,var(--line));border-radius:8px;padding:8px 12px;margin:6px 0;color:var(--ink-2);white-space:pre-wrap}
.airich .ai-q{background:color-mix(in srgb,var(--navy) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--navy) 14%,var(--line));border-radius:14px;padding:12px 14px 13px;margin:10px 0}
.airich .ai-q:first-child{margin-top:2px}
.airich .ai-qhd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.airich .ai-qno{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);color:var(--on-navy,#fff);font-size:13px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums;box-shadow:0 1px 3px rgba(36,53,83,.25)}
.airich .ai-qt{font-weight:700;color:var(--navy-ink)}
.airich .ai-ans{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:5px 12px 5px 5px;border-radius:999px;background:color-mix(in srgb,var(--red) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--red) 30%,transparent)}
.airich .ai-anslb{background:var(--red);color:#fff;font-size:11.5px;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.02em}
.airich .ai-ansv{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
/* AI 비서 방: 이름줄 + 카드 말풍선 + 내 말풍선 남색 */
html.airoom .msgs{--roombg:color-mix(in srgb,var(--navy) 4%,var(--surface))}
.aiwho{display:flex;align-items:center;gap:7px;margin:0 0 6px 2px;font-size:13px}
.aiwho .av.ai.sm{width:26px;height:26px;min-width:26px;padding:5px;border-radius:9px;box-shadow:0 1px 3px rgba(36,53,83,.25)}
.aiwho b{color:var(--ink);font-weight:700}
.aiwho span{color:var(--ink-3);font-size:11px}
html.airoom .bubblerow.airow .bub.aibub{background:var(--surface);border:1px solid color-mix(in srgb,var(--navy) 12%,var(--line));border-radius:4px 20px 20px 20px;padding:14px 16px;box-shadow:0 2px 10px rgba(36,53,83,.07);font-size:15.5px;line-height:1.7;max-width:min(100%,680px)}
html.airoom .bubblerow.airow .bub.aibub.cardbub{padding:6px}
html.airoom .bubblerow.me .bub{background:var(--navy);color:var(--on-navy,#fff);border-radius:20px 20px 4px 20px;padding:11px 16px;box-shadow:0 2px 8px rgba(36,53,83,.18)}
html.airoom .bubblerow.me .bub a{color:inherit}
html.airoom .aiacts{margin-left:4px}
.airich .ai-qlb{font-size:12.5px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}
.airich .ai-q + .ai-hr,.airich .ai-hr + .ai-q{margin-top:0}
.airich .ai-q + .ai-hr{border-top-color:transparent;margin:4px 0}

/* ── 아이폰 앱 : 화면 가득 팝업 위쪽이 노치·상태표시줄에 가려지던 것 (2026-10-05 원장님 사진 — 사진 전체보기 [✕]·[전송] 가려짐) ──
   전체보기·사진 편집·크게 보기·파일함·진도 등 fullpage 팝업 모두 위쪽에 안전 여백. 안드로이드·PC 는 값이 0 이라 그대로 */
.sheetbox.fullpage{padding-top:env(safe-area-inset-top,0px)}
/* 아이폰 앱 : 맨 위 머리줄(학원 이름·로고)과 채팅방 머리줄도 노치 아래로 (2026-10-05) */
.mhead{padding-top:calc(12px + env(safe-area-inset-top,0px))}
.chead{padding-top:calc(11px + env(safe-area-inset-top,0px))}
/* 아이폰 앱 자판 (2026-10-05) : 앱 화면을 보이는 칸에 고정 (top·height 는 app.js keyboardFix 가 넣음) · 자판이 떠 있을 때는 아래 안전 여백 빼기 */
/* 아이폰 앱: 자판이 뜨면 앱 껍데기가 웹 화면을 자판 위까지 줄임 → 100dvh 는 늦게 따라와 아래 줄(+ 사진 @ ☺)이 자판에 가려짐 (2026-10-05)
   → 화면 높이를 「위·아래 0」 으로 웹뷰 크기에 바로 맞춤 */
html.iosapp .app{position:fixed;left:0;right:0;top:0;bottom:0;height:auto}
/* 아이폰 앱: 문서 자체는 스크롤되지 않게 (화면이 상태 표시줄 높이만큼 밀려 남던 것, 10-06) — 스크롤은 안쪽 목록들만 */
html.iosapp:has(#authScreen[hidden]),html.iosapp:has(#authScreen[hidden]) body{height:100%;overflow:hidden;overscroll-behavior:none}   /* 로그인 화면은 자판이 뜨면 스크롤해야 해서 뺌 */
html.iosapp .sheetbox.fullpage{height:100%}
html.kbopen .composer{padding-bottom:8px}
/* 아이폰 앱: 방 목록을 길게 누르면 글자 고르기·돋보기 대신 방 메뉴가 뜨게 (2026-10-05) */
html.iosapp #roomList button,html.iosapp #roomList .room{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* 아이폰 앱: 꾹 누르면 우리 메뉴가 뜬 뒤 아이폰이 손가락 밑 글자를 골라(파란 손잡이)·[복사하기·찾아보기·번역] 줄까지 띄움 (2026-10-05 원장님 사진)
   → 앱 전체에서 아이폰 글자 고르기·꾹 누르기 풍선을 끄고, 입력칸과 「골라 복사」 창에서만 켬 (카카오톡과 같은 방식) */
html.iosapp body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.iosapp input,html.iosapp textarea,html.iosapp [contenteditable="true"],html.iosapp .selectable,html.iosapp .selectable *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* 말풍선 속 주소 링크 (2026-10-05) */
.bub a.mlink,a.mlink{color:inherit;text-decoration:underline;text-underline-offset:2px;word-break:break-all;cursor:pointer}
/* 시간표 — 구글 시트 원본 모양 (2026-10-05) */
.shtable.orig{overflow:hidden;height:calc(100dvh - 190px);max-height:none;background:#fff;position:relative;display:flex;flex-direction:column}
.shtable.orig .shzoomwrap{flex:1;min-height:0;overflow:hidden;position:relative}
.shtable.orig .shframe{display:block;width:100%;height:100%;border:0;background:#fff;transform-origin:0 0}
.shzoom{position:absolute;right:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:rgba(36,53,83,.92);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.shzoom .setbtn{min-width:38px;height:34px;padding:0 10px;border-radius:999px;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:18px;line-height:1}
.shzoom .shzl{min-width:48px;text-align:center;color:#fff;font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer}
/* 보이스톡 기록 말풍선 (2026-10-05) — 카카오톡처럼 흰 카드 + 전화기 */
.callbub{display:flex;align-items:center;gap:12px;min-width:170px;max-width:260px;padding:12px 16px;border-radius:14px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14.5px;text-align:left;cursor:pointer;box-shadow:var(--shadow-1,0 1px 2px rgba(0,0,0,.06))}
.callbub .cbt{flex:1;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.callbub .cbic{position:relative;width:26px;height:26px;flex:none;display:grid;place-items:center}
.callbub .cbic svg{width:24px;height:24px;fill:currentColor}
.callbub.go .cbic{color:#1FA855}
.callbub.done .cbic{color:var(--ink)}
.callbub.miss .cbic{color:var(--ink-3)}
.callbub .cbic i{position:absolute;right:-4px;top:-5px;font-style:normal;font-size:11px;font-weight:800;color:var(--ink-3)}
.callbub:active{transform:scale(.98)}
.callbub .cbtx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.callbub .cbtime{font-size:12px;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
/* ── + 판 · 아래 탭 = B안 (2026-10-05 원장님 「2안으로, 로고 있는 Y-MATH 수학학원 탭은 그대로」) ──
   A안·C안은 13\1. Y-Work (구름)\디자인시안 에 보관 */
.pluspad{gap:16px}
.plusgrid{gap:18px 6px;padding:2px 2px 4px}
.plusitem{gap:8px;font-size:12px;letter-spacing:-.01em;color:var(--ink-2);font-weight:500;-webkit-tap-highlight-color:transparent}
.plusitem .pcircle{
  --tone:#5b6575; position:relative;
  width:56px;height:56px;border-radius:18px;
  background:var(--tone);
  background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 55%,#fff) 0%,var(--tone) 100%);
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  box-shadow:0 4px 10px color-mix(in srgb,var(--tone) 30%,transparent);
  transition:transform .12s ease, filter .12s ease;
}
.plusitem .pcircle svg{width:26px;height:26px;stroke:#fff;stroke-width:2;fill:none}
.plusitem .pcircle svg .dot{fill:#fff;stroke:none}
.plusitem:hover .pcircle{filter:brightness(1.05)}
.plusitem:active .pcircle{transform:scale(.93);filter:brightness(.95)}
.pcircle.t-green{--tone:#1E9E63}
.pcircle.t-blue{--tone:#2F6FDB}
.pcircle.t-red{--tone:#C32C31}
.pcircle.t-violet{--tone:#6A52D9}
.pcircle.t-teal{--tone:#0F8F9B}
.pcircle.t-amber{--tone:#D27A12}
.pcircle.t-pink{--tone:#C43E83}
.pcircle.t-slate{--tone:#46536A}
.plusitem .pcircle.ai{background:linear-gradient(145deg,#2E4470 0%,#243553 55%,#1A2740 100%);box-shadow:0 4px 12px rgba(36,53,83,.28)}
.plusitem .pcircle.ai .spark{display:none}
.ppcell.tool{background:color-mix(in srgb,#243553 9%,var(--surface));color:var(--navy-ink,#243553);font-weight:600;font-size:12.5px;gap:8px}
.ppcell.tool svg{stroke:currentColor;width:34px;height:34px;stroke-width:1.7}
.ppcell.tool:first-child{background:linear-gradient(145deg,#2E4470,#243553 60%,#1A2740);color:#fff;box-shadow:0 4px 14px rgba(36,53,83,.25)}
.ppcell.tool:active{transform:scale(.97)}

/* 아래 탭 B안 — 고른 탭 : 아이콘 꽉 채움 + 위에 남색 줄 · 이름 굵게 (로고 탭은 예전 그대로) */
.tabs{padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabs button:not(.orgtab){gap:3px;padding:2px 0 2px;font-size:10.5px;letter-spacing:-.02em;-webkit-tap-highlight-color:transparent}
.tabs button .ti{position:relative;display:grid;place-items:center;width:52px;height:30px;transition:transform .12s ease}
.tabs button:not(.orgtab) .ti svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabs button .ti svg .fl{fill:transparent}
.tabs button .ti svg .dt{fill:currentColor;stroke:none}
.tabs button:not(.orgtab)[aria-pressed="true"]{color:var(--navy-ink,#243553);font-weight:700}
.tabs button:not(.orgtab)[aria-pressed="true"] .ti svg{stroke-width:2}
.tabs button:not(.orgtab)[aria-pressed="true"] .ti svg .fl{fill:currentColor}
.tabs button:not(.orgtab)[aria-pressed="true"] .ti svg path:not(.fl){stroke:var(--surface)}
.tabs button:not(.orgtab)[aria-pressed="true"] .ti svg .dt{fill:var(--surface)}
.tabs button:not(.orgtab)[aria-pressed="true"] .ti::before{content:"";position:absolute;top:-7px;left:50%;width:22px;height:3px;border-radius:0 0 3px 3px;background:currentColor;transform:translateX(-50%)}
.tabs button:not(.orgtab):active .ti{transform:scale(.92)}
.tabs button.orgtab .ti{display:grid;place-items:center;width:auto;height:30px;background:none}
.tabs button.orgtab{gap:3px;padding:2px 0}
.tabs .n{top:-1px;left:calc(50% + 9px);border:2px solid var(--surface);height:18px;min-width:18px;border-radius:9px}
/* + 판 간격 (2026-10-05 원장님 「간격이 너무 큼」 — PC 처럼 넓은 화면에서 4칸이 끝까지 벌어지던 것)
   → 칸 너비를 76px 로 고정하고 왼쪽부터 채움 : 폰은 4칸, 넓은 화면은 더 많은 칸이 촘촘히 */
.plusgrid{gap:14px 6px}
@container app (min-width: 520px){ .plusgrid{grid-template-columns:repeat(auto-fill,80px);justify-content:start;gap:16px 12px} }
/* 입력칸 아래 도구 줄 (2026-10-05 원장님 「X 옆에도 이쁘게」) — B안과 맞춤
   + : 남색 동그라미에 흰 + (열리면 45° 돌아 ✕, 짙은 회색) · 나머지 : 둥근 네모, 누르면 남색 연한 바탕 */
.ctools{gap:6px;padding:8px 2px 0}
.ctool{width:36px;height:36px;border-radius:12px;color:var(--ink-2);transition:background .15s ease, color .15s ease, transform .1s ease;-webkit-tap-highlight-color:transparent}
.ctool svg{width:21px;height:21px;stroke-width:1.8}
.ctool:hover{background:var(--surface-2)}
.ctool:active{transform:scale(.92)}
.ctool[aria-pressed="true"]{color:var(--navy-ink,#243553);background:rgba(36,53,83,.10);background:color-mix(in srgb,var(--navy-ink,#243553) 11%,transparent)}
.ctool#plusBtn{border-radius:50%;width:34px;height:34px;margin-right:4px;color:#fff;
  background:linear-gradient(145deg,#2E4470,#243553 55%,#1A2740);box-shadow:0 3px 8px rgba(36,53,83,.28)}
.ctool#plusBtn svg{width:19px;height:19px;stroke-width:2.2}
.ctool#plusBtn:hover{filter:brightness(1.08)}
.ctool#plusBtn[aria-pressed="true"]{color:#fff;background:#4A4F57;box-shadow:none}
/* + 판 5칸 × 2줄 (2026-10-05 원장님 「캡처를 위로, 5개씩 두 줄」) — 사진·AI·파일·캡처·음성 / 투표·사다리·랜덤·선착순 */
.plusgrid{grid-template-columns:repeat(5,1fr);gap:14px 2px}
.plusitem .pcircle{width:52px;height:52px;border-radius:17px}
.plusitem .pcircle svg{width:24px;height:24px}
.plusitem{font-size:11.5px}
@container app (min-width: 520px){ .plusgrid{grid-template-columns:repeat(5,84px);justify-content:start;gap:16px 10px} .plusitem .pcircle{width:56px;height:56px;border-radius:18px} .plusitem{font-size:12px} }
/* 도구 줄 색 아이콘 (2026-10-05 원장님 「이미지나 스마일이나 이쁘게」) — 사진 초록 · @ 파랑 · 이모티콘 노란 얼굴 */
.ctool svg.duo{width:24px;height:24px;stroke-width:1.7;fill:none}
.ctool[aria-pressed="true"] svg.duo{stroke-width:1.9}
.ctool:has(svg.duo):hover{background:var(--surface-2)}
/* @ 단추 감춤 (2026-10-05 원장님 「@ 는 입력할 때 직접 쓰니 단추 없어도 됨」) — 글자 @ 를 치면 사람 목록은 그대로 뜸 */
#mentionBtn{display:none!important}
/* + 판의 「사진」 칸 감춤 (2026-10-05 원장님 「사진은 맨 위에 먼저 보이니 아래 버튼은 없어도 됨」) */
#pPhoto{display:none!important}
/* + 판의 「파일」 칸도 감춤 (2026-10-05 원장님 — 입력칸 아래 도구 줄에 파일 단추가 있음) */
#pFile{display:none!important}
/* 도구 줄 작은 타일 (2026-10-05 원장님 「X 옆 버튼도 세련되게」) — + 판 B안과 같은 그라데이션 타일을 작게 */
.ctools{gap:8px}
.ctool.t-green{--tone:#1E9E63}.ctool.t-blue{--tone:#2F6FDB}.ctool.t-amber{--tone:#E39A12}
.ctool:is(.t-green,.t-blue,.t-amber){width:34px;height:34px;border-radius:11px;color:#fff;
  background:var(--tone);background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 55%,#fff),var(--tone));
  box-shadow:0 2px 6px color-mix(in srgb,var(--tone) 28%,transparent)}
.ctool:is(.t-green,.t-blue,.t-amber):hover{filter:brightness(1.06);background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 55%,#fff),var(--tone))}
.ctool:is(.t-green,.t-blue,.t-amber) svg.mini{width:19px;height:19px;stroke:#fff;stroke-width:2;fill:none}
.ctool:is(.t-green,.t-blue,.t-amber)[aria-pressed="true"]{color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 55%,#fff),var(--tone));
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--tone) 45%,transparent)}
/* + 판 줄 나눔 (2026-10-05 원장님 「사다리타기·랜덤뽑기·선착순은 게임이라 같은 줄」)
   윗줄 : AI 풀이 · 캡처 · 음성채팅 · 투표 / 아랫줄(게임) : 사다리타기 · 랜덤뽑기 · 선착순 — 4칸 */
.plusgrid{grid-template-columns:repeat(4,1fr);gap:16px 4px}
#pLadder{grid-column-start:1}
.plusitem .pcircle{width:56px;height:56px;border-radius:18px}
.plusitem .pcircle svg{width:26px;height:26px}
.plusitem{font-size:12px}
@container app (min-width: 520px){ .plusgrid{grid-template-columns:repeat(4,88px);justify-content:start;gap:16px 10px} }

/* 도구 줄 아이콘 — 차분한 실물 느낌 (2026-10-05 원장님 「세련되지 않아… 어른스러워야」)
   사진 = 흰 인화지 액자 + 낮은 채도 풍경 / 파일 = 종이 + 회색 글줄(첫 줄만 남색) / 스마일 = 무광 겨자색, 이목구비 차콜 */
.ctool.g3d{width:38px;height:38px;border-radius:10px;padding:0;background:none;box-shadow:none;display:grid;place-items:center}
.ctool.g3d svg.d3{width:29px;height:29px;stroke:none;overflow:visible;filter:drop-shadow(0 .6px .8px rgba(27,36,64,.16))}
.ctool.g3d:hover{background:var(--surface-2)}
.ctool.g3d:active{transform:scale(.92)}
.ctool.g3d[aria-pressed="true"]{background:var(--surface-2)}
/* + 동그라미 작게 (2026-10-05 원장님 「1안으로 가고 동그라미 작게」) */
.ctool#plusBtn{width:28px;height:28px;margin:0 4px 0 3px;box-shadow:0 2px 5px rgba(36,53,83,.22)}
.ctool#plusBtn svg{width:15px;height:15px;stroke-width:2.3}
/* 앱 스토어 규정 (2026-10-06) — 차단·신고·계정 삭제 */
.blockedmsg{display:block;margin:6px auto;border:1px dashed var(--line);background:var(--surface-2);color:var(--ink-3);font:inherit;font-size:12.5px;border-radius:999px;padding:5px 14px;cursor:pointer}
.reportreasons{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.reportreasons .chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;border-radius:999px;padding:6px 12px;cursor:pointer}
.reportreasons .chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.chkrow{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);margin:8px 0}
.delnote{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.delnote ul{margin:6px 0 8px;padding-left:18px}.delnote li{margin:2px 0}
.pcard .pblock{display:block;margin:12px auto 0;color:var(--ink-3);font-size:12.5px}
.sheetbox.docsheet{max-width:680px;width:calc(100% - 24px)}
.docframe{display:block;width:100%;height:min(70vh,640px);border:1px solid var(--line);border-radius:12px;background:#fff}
.authlegal{text-align:center;font-size:12px;color:var(--ink-3);margin:10px 0 0}
.authlegal a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
/* 앱 심사용 계정 (2026-10-06) — 학원 자료 탭 감춤 */
html.reviewacct [data-go="files"]{display:none!important}

/* ── 대화 목록 한 줄 좁게 (원장님 10-06 「각방 위아래 폭 조금 좁게, 글자 조금 작게」 — 카카오워크 정도) ── */
#roomList .room{gap:12px;padding:12px 16px;align-items:center;border-bottom:0}  /* 10-06 「카카오워크처럼 여백」 — 줄 사이 선 없애고 위아래 여유 */
#roomList .room .av{width:38px;height:38px;border-radius:13px;font-size:11.5px}
#roomList .room .av.logo{padding:4px}
#roomList .rtop{gap:6px}
#roomList .rname{font-size:13.5px;font-weight:500}  /* 10-06 원장님 「직원명부처럼 진하기 빼고」 */
#roomList .rcount{font-size:11px}
#roomList .rprev{font-size:12px;margin-top:4px;line-height:1.35}
#roomList .rmeta{gap:3px;padding-top:0;align-self:flex-start;margin-top:2px}
#roomList .rtime{font-size:10.5px}
#roomList .badge{min-width:17px;height:17px;font-size:10.5px;border-radius:9px}
#roomList .pinmark{left:4px;top:3px;width:15px;height:15px;font-size:8px}
#roomList .dragh{padding:4px 2px 4px 6px}
/* 상단 고정 표시 — 왼쪽 노란 압정 대신 오른쪽 위 시간 옆 작은 빨간 압정 · 왼쪽 여백 넓힘 (원장님 10-06) */
#roomList .room{padding-left:20px}
#roomList .rmtop{display:flex;align-items:center;gap:5px}
#roomList .pinmini{width:12px;height:12px;display:inline-grid;place-items:center;color:var(--red,#C32C31);flex:none}
#roomList .pinmini svg{width:12px;height:12px;fill:currentColor}
/* 프로필 동그라미 통일 — 채팅 목록 · 단체방 · 대화창 머리 · 말풍선 옆 · 구성원 줄 모두 조직도처럼 동그랗게 (원장님 10-06) */
#roomList .room .av{border-radius:50%}
#roomList .room .av.logo{padding:5px}
.chead .cav .av.grp{border-radius:50%}
.bubblerow .av{border-radius:50%}
.mrow .av{border-radius:50%}

/* ── 채팅 목록 : 강사방 · 학생소통방 탭 + 작은 방 검색 (원장님 10-08) ── */
.rmtabs{display:flex;align-items:center;gap:8px;margin:0 16px 10px;min-height:36px}
.rtabset{display:flex;gap:4px;flex:1;min-width:0;background:var(--surface-2);border-radius:10px;padding:3px}
.rtab{flex:1;min-width:0;border:0;background:none;border-radius:8px;padding:7px 6px;font-size:13.5px;font-weight:500;
  color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;cursor:pointer}
.rtab.on{background:var(--surface);color:var(--navy-ink);font-weight:700;box-shadow:var(--shadow-sm)}
.rtab .rtn{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
.rfind{flex:1;min-width:0;display:flex;align-items:center;gap:7px;background:var(--surface-2);border-radius:10px;padding:0 10px;height:36px}
.rfind svg{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:1.8;flex:none}
.rfind input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:13.5px;color:var(--ink);outline:none}
.rfindbtn{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer}
.rfindbtn:hover{background:var(--surface-2)}
.rfindbtn svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:1.9;stroke-linecap:round}
.rfindbtn .ic-close{display:none}
.rmtabs.finding .rtabset{display:none}
.rmtabs.finding .ic-find{display:none}
.rmtabs.finding .ic-close{display:block}

/* 학습 › 학생 오답노트 (2026-10-09) */
.lbseg .lbnew{display:inline-block;min-width:16px;height:16px;line-height:16px;margin-left:5px;padding:0 4px;border-radius:8px;background:var(--red,#C32C31);color:#fff;font-size:10.5px;font-weight:700;text-align:center;vertical-align:1px}
.wrbar{display:flex;gap:6px;flex-wrap:wrap;padding:8px 2px 10px}
.wrchip{border:1px solid var(--line,#E4E0DA);background:var(--surface);color:var(--ink-2);border-radius:999px;padding:4px 11px;font-size:12px;cursor:pointer}
.wrchip[aria-pressed=true]{background:var(--navy,#243553);border-color:var(--navy,#243553);color:#fff;font-weight:700}
.wrrow .wrico{font-size:20px;width:34px;text-align:center;flex:none}
.wrrow.isnew{box-shadow:inset 3px 0 0 var(--red,#C32C31)}
.wrrow .wrcls{font-weight:500;color:var(--ink-3);font-size:12px}
.wrrow .wrnote,.wrrow .wrmiss{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;white-space:normal}
.wrrow .wrmiss{color:var(--red,#C32C31)}
.wrst{font-size:11.5px;border-radius:6px;padding:2px 8px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.wrst.st-new{background:#FBE9E9;color:#C32C31;font-weight:700}
.wrst.st-made{background:#E9EEF6;color:#243553}
.wrsel{font-size:12px;padding:4px 6px;border-radius:7px;border:1px solid var(--line,#E4E0DA);background:var(--surface);color:var(--ink)}

/* 강사방·학생소통방 탭 숨김 (2026-10-09) — 찾기 단추만 오른쪽에 */
.rmtabs.notabs .rtabset{display:none}
.rmtabs.notabs{justify-content:flex-end;min-height:30px;margin-bottom:6px}
.rmtabs.notabs.finding{justify-content:stretch}

/* 학습 › [PDF 올리기] (2026-10-09) */
.lbhead .lbup{border-color:var(--red);color:var(--red)}

/* ── 아이패드 앱 (넓은 화면 두 칸) : 왼쪽 세로 메뉴 로고·왼쪽 칸 제목(「Y-MATH 수학학원」)이 상태 표시줄(시각·배터리)과 겹치던 것 (2026-10-06 맥 세션 캡처, 10-09 고침)
   아이폰처럼 위쪽 안전 여백만큼 내림. PC·안드로이드·브라우저는 값이 0 이라 그대로 */
.rail{padding-top:calc(14px + env(safe-area-inset-top,0px))}
.lhead{padding-top:calc(14px + env(safe-area-inset-top,0px))}