/* ============================================================
   구글 AI 마스터 — 강좌 전용 모의 화면 스타일 (screens.js 짝)
   엔진의 브라우저 틀(.browser)은 실제 서비스를 흉내 내므로 테마와 관계없이 밝다.
   그래서 모형 안쪽도 .gm 에 둔 --m-* 토큰(밝게 고정)만 쓴다 → 다크 모드에서도 읽힌다.
   Flow 는 실제 서비스처럼 어두운 화면이라 .gm.fl 에서 토큰만 어둡게 바꾼다.
   브랜드 색은 아주 작은 포인트(--m-g*)로만 쓴다.
   ============================================================ */
.gm{
  --m-bg:#FFFFFF; --m-bg2:#F4F6F9; --m-bg3:#EDF1F5; --m-ink:#1F2937; --m-ink2:#4B5563; --m-ink3:#6B7280;
  --m-line:#DDE3EA; --m-navy:#132F4C; --m-soft:#E8EFF6; --m-acc:#0E7490; --m-acc-soft:#E0F2F7;
  --m-gblue:#1A73E8; --m-ggreen:#188038; --m-gyellow:#F9AB00; --m-gred:#D93025;
  position:relative;background:var(--m-bg);color:var(--m-ink);font-size:12px;line-height:1.5;min-height:340px
}
.gm p{margin:0 0 4px}
.gm-i{width:15px;height:15px;flex:none;vertical-align:-3px}
.gm-i.big{width:30px;height:30px;color:var(--m-ink3)}
.gm .ce-ico{width:14px;height:14px;flex:none;vertical-align:-2px}
.gm-sp,.gmn-sp{flex:1}
.gm-muted{color:var(--m-ink3)}
.gm-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;background:var(--m-navy);color:#fff;font-weight:700;white-space:nowrap;font-size:12px}
.gm-btn.ghost{background:var(--m-bg);color:var(--m-ink);border:1px solid var(--m-line);font-weight:600}
.gm-btn.sm{padding:4px 10px;font-size:11.5px}
.gm-btn.wide{justify-content:center;width:100%;margin:6px 0 8px}
.gm-field{border:1px solid var(--m-line);border-radius:8px;padding:7px 10px;background:var(--m-bg);color:var(--m-ink);min-height:32px;white-space:pre-wrap;display:flex;align-items:center;gap:6px}
.gm-field.tall{min-height:84px;align-items:flex-start}
.gm-field.dashed{border-style:dashed;color:var(--m-ink3)}
.gm-dim{position:absolute;inset:0;background:rgba(15,27,45,.38);display:grid;place-items:center;padding:14px;z-index:3}
.gm-dlg{width:min(100%,400px);background:var(--m-bg);border-radius:14px;padding:14px 16px;box-shadow:0 18px 40px rgba(15,27,45,.28);display:grid;gap:8px}
.gm-dh{display:flex;justify-content:space-between;align-items:center;font-size:13.5px}
.gm-dfoot{display:flex;align-items:center;gap:8px;margin-top:4px}

/* ---------- Gemini ---------- */
.gmn{display:flex;min-height:360px;background:var(--m-bg2)}
.gmn-rail{width:40px;flex:none;display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 0;color:var(--m-ink2)}
.gmn-logo{color:var(--m-gblue)}
.gmn-ri{display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.gmn-side{width:170px;flex:none;padding:10px 8px;display:flex;flex-direction:column;gap:3px;position:relative;border-right:1px solid var(--m-line);background:var(--m-bg2)}
.gmn-sb{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:999px;color:var(--m-ink)}
.gmn-sh{font-size:11px;color:var(--m-ink3);font-weight:600;margin:8px 0 3px}
.gmn-ci{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 8px;border-radius:999px;color:var(--m-ink2)}
.gmn-ci span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmn-ci.on{background:var(--m-soft);color:var(--m-ink);font-weight:600}
.gmn-more{display:grid;place-items:center;width:20px;height:20px;border-radius:50%}
.gmn-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative}
.gmn-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:18px 14px;background:radial-gradient(ellipse at 50% 60%, #DCEBFB 0%, var(--m-bg2) 62%)}
.gmn-hello{font-size:20px;color:var(--m-ink);letter-spacing:-.02em}
.gmn-wrap{position:relative;width:min(100%,420px)}
.gmn-box{background:var(--m-bg);border-radius:22px;padding:10px 12px;box-shadow:0 2px 10px rgba(15,27,45,.08);display:grid;gap:8px}
.gmn-text{white-space:pre-wrap;color:var(--m-ink);max-height:110px;overflow:hidden}
.gmn-ph{color:var(--m-ink3)}
.gmn-att{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--m-line);border-radius:10px;background:var(--m-bg2);width:max-content;max-width:100%}
.gmn-bar{display:flex;align-items:center;gap:6px}
.gmn-plus,.gmn-send,.gmn-mic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:var(--m-ink2)}
.gmn-send{background:var(--m-bg3)}
.gmn-send.on{background:#C7DDF8;color:var(--m-navy)}
.gmn-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:var(--m-soft);color:var(--m-navy);font-weight:600}
.gmn-model{color:var(--m-ink2);font-size:11.5px}
.gmn-pop{position:absolute;background:var(--m-bg);border-radius:12px;box-shadow:0 8px 24px rgba(15,27,45,.18);padding:6px;display:grid;gap:2px;z-index:4}
.gmn-pop>span{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;white-space:nowrap;color:var(--m-ink)}
.gmn-menu{left:10px;top:calc(100% + 6px);width:190px}
.gmn-sub{left:calc(100% + 6px);bottom:0;width:150px}
.gmn-caret{margin-left:auto;font-weight:400;color:var(--m-ink3)}
.gmn-sep{display:block;height:1px;background:var(--m-line);margin:3px 4px}
.gmn-ctx{left:118px;top:118px;width:120px}
.gmn-chat{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.gmn-main .gmn-chat + .gmn-wrap{margin:0 auto 12px}
.gmn-me{align-self:flex-end;max-width:78%;background:var(--m-bg3);border-radius:16px 16px 4px 16px;padding:8px 12px;white-space:pre-wrap}
.gmn-ai{display:flex;gap:8px;align-items:flex-start}
.gmn-av{color:var(--m-gblue);margin-top:2px}
.gmn-ans{background:var(--m-bg);border:1px solid var(--m-line);border-radius:12px;padding:9px 12px;flex:1;min-width:0}
.gmn-acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.gmn-act{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;color:var(--m-ink2);font-size:11px;border:1px solid var(--m-line)}
.gmn.is-cv .gmn-main{flex-direction:row}
.gmn-cv{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:10px;padding:10px;flex:1;min-width:0}
.gmn-cl{display:flex;flex-direction:column;gap:8px;min-width:0}
.gmn-cl .gmn-me{max-width:100%}
.gmn-mini{margin-top:auto;background:var(--m-bg);border-radius:16px;padding:8px 12px}
.gmn-cp{background:var(--m-bg);border-radius:14px;border:1px solid var(--m-line);display:flex;flex-direction:column;position:relative;min-width:0}
.gmn-ch{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--m-line)}
.gmn-ch b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gmn-seg{display:inline-flex;background:var(--m-bg3);border-radius:999px;padding:2px}
.gmn-seg span{padding:2px 8px;border-radius:999px;font-size:11px;color:var(--m-ink2)}
.gmn-seg span.on{background:var(--m-bg);color:var(--m-ink);font-weight:600}
.gmn-ib{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--m-ink2)}
.gmn-shm{right:8px;top:40px;width:150px}
.gmn-doc{padding:12px 14px;flex:1}
.gmn-doc h4{margin:0 0 8px;font-size:14px}
.gmn-app{max-width:260px;margin:4px auto;background:#EEF4FC;border-radius:12px;padding:12px;display:grid;gap:6px}
.gmn-app b{color:var(--m-navy);text-align:center}
.gmn-q{font-weight:600}
.gmn-opt{background:var(--m-bg);border:1px solid var(--m-line);border-radius:8px;padding:5px 8px}
.gmn-gems,.gmn-gedit{flex:1;padding:14px 16px;display:grid;gap:8px;align-content:start}
.gmn-gedit{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.gmn-form{display:grid;gap:6px;align-content:start}
.gmn-form label{font-size:11px;color:var(--m-ink3);font-weight:600;margin-top:2px}
.gmn-gh{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px}
.gmn-glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.gmn-gc{background:var(--m-bg);border:1px solid var(--m-line);border-radius:12px;padding:10px;display:grid;gap:4px}
.gmn-gi{color:var(--m-acc)}
.gmn-prev{background:var(--m-bg);border:1px solid var(--m-line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.gmn-prev .gmn-sh{margin:0}
.gmn-pv{flex:1;display:grid;place-items:center;text-align:center;min-height:120px}

/* ---------- NotebookLM ---------- */
.nlm{background:var(--m-bg2);display:flex;flex-direction:column}
.nlm-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--m-bg);border-bottom:1px solid var(--m-line)}
.nlm-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--m-ink);color:#fff}
.nlm-logo .gm-i{width:13px;height:13px}
.nlm-av{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#C9D5E2,#9FB3C8);flex:none}
.nlm-home{padding:14px 16px;display:grid;gap:10px}
.nlm-hh{display:flex;align-items:center;font-size:13.5px}
.nlm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.nlm-card{background:var(--m-bg);border:1px solid var(--m-line);border-radius:14px;padding:12px;min-height:96px;display:flex;flex-direction:column;gap:4px}
.nlm-card.new{align-items:center;justify-content:center;color:var(--m-ink2);border-style:dashed}
.nlm-ci{color:var(--m-acc)}
.nlm-cols{flex:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) minmax(0,1fr);gap:8px;padding:8px}
.nlm-pane{background:var(--m-bg);border:1px solid var(--m-line);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;min-width:0;min-height:300px}
.nlm-ph{font-weight:700;font-size:12.5px;padding-bottom:6px;border-bottom:1px solid var(--m-line);margin-bottom:6px}
.nlm-all{display:flex;justify-content:space-between;align-items:center;color:var(--m-ink3);font-size:11px;margin-bottom:4px}
.nlm-si{display:flex;align-items:center;gap:6px;padding:5px 4px;border-radius:6px}
.nlm-si span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nlm-cb{display:grid;place-items:center;width:14px;height:14px;border-radius:3px;border:1.5px solid var(--m-ink3);flex:none}
.nlm-cb.on{background:var(--m-navy);border-color:var(--m-navy);color:#fff}
.nlm-cb .gm-i{width:10px;height:10px}
.nlm-empty{padding:10px 2px;font-size:11.5px}
.nlm-cbody{flex:1;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.nlm-sum{display:grid;gap:2px;padding:4px 2px 8px;border-bottom:1px dashed var(--m-line)}
.nlm-me{align-self:flex-end;max-width:85%;background:var(--m-soft);border-radius:12px 12px 4px 12px;padding:6px 10px}
.nlm-ans{display:grid;gap:4px;justify-items:start}
.nlm-cite{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--m-bg3);color:var(--m-ink2);font-size:10px;font-weight:700;vertical-align:1px}
.nlm-hint{padding:8px 2px}
.nlm-emptymid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.nlm-input{display:flex;align-items:center;gap:6px;border:1px solid var(--m-line);border-radius:999px;padding:5px 6px 5px 12px;margin-top:8px}
.nlm-input .gm-muted{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nlm-cnt{font-size:10.5px;color:var(--m-ink3);white-space:nowrap}
.nlm-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px;margin-bottom:8px}
.nlm-tile{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:7px 6px;border:1px solid var(--m-line);border-radius:10px;background:var(--m-bg2);font-size:11px;font-weight:600;min-width:0}
.nlm-cols.focus-studio .nlm-studio{border-color:var(--m-acc)}
.nlm-gen{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:8px;background:var(--m-acc-soft);color:var(--m-ink);font-size:11px;margin-bottom:6px}
.nlm-spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--m-acc);border-right-color:transparent;flex:none}
.nlm-player{display:flex;align-items:center;gap:6px;padding:7px 8px;border-radius:8px;background:var(--m-soft);margin-bottom:6px}
.nlm-wave{flex:1;height:10px;background:repeating-linear-gradient(90deg,var(--m-navy) 0 2px,transparent 2px 5px);opacity:.55;border-radius:2px}
.nlm-note{display:flex;align-items:center;gap:6px;padding:6px 4px;border-bottom:1px solid var(--m-line)}
.nlm-studio .gm-btn.wide{margin-top:auto}
.nlm-drop{border:1.5px dashed var(--m-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.nlm-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.nlm-opt{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--m-line);border-radius:10px;font-weight:600}
.nlm-ppl{display:flex;align-items:center;gap:8px;padding:2px}
.nlm-acc{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;background:var(--m-bg2)}

/* ---------- Workspace (Docs · Slides · Gmail) ---------- */
.ws{background:var(--m-bg2);display:flex;flex-direction:column}
.ws-top{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--m-bg)}
.ws-app{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:#fff;flex:none}
.ws-app.dc{background:var(--m-gblue)} .ws-app.sl{background:var(--m-gyellow)} .ws-app.ml{background:var(--m-gred)}
.ws-app .gm-i{width:14px;height:14px}
.ws-gem{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--m-gblue);background:var(--m-soft)}
.ws-search{flex:0 1 200px;display:flex;align-items:center;gap:6px;background:var(--m-bg3);border-radius:999px;padding:5px 10px;color:var(--m-ink3)}
.ws-menu{padding:2px 14px 6px;background:var(--m-bg);color:var(--m-ink2);font-size:11px;word-spacing:6px;border-bottom:1px solid var(--m-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-body{flex:1;display:grid;grid-template-columns:1fr;gap:10px;padding:10px;min-height:290px}
.ws-body.with-panel{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
.ws-body.with-panel:has(.ws-thumbs){grid-template-columns:44px minmax(0,1fr) minmax(0,.9fr)}
.ws-body.mail{grid-template-columns:110px minmax(0,1fr)}
.ws-body.mail.with-panel{grid-template-columns:110px minmax(0,1fr) minmax(0,.8fr)}
.ws-page{background:var(--m-bg);border:1px solid var(--m-line);border-radius:4px;padding:18px 20px;min-width:0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ws-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:var(--m-soft);color:var(--m-navy);font-weight:600;border:1px solid #C9D9EA}
.ws-help{width:100%;border:1px solid var(--m-line);border-radius:12px;padding:8px;box-shadow:0 6px 18px rgba(15,27,45,.1);display:grid;gap:6px}
.ws-hb{display:flex;align-items:center;gap:8px;width:100%;margin-top:4px}
.ws-draft{width:100%;background:var(--m-bg2);border-left:3px solid var(--m-gblue);border-radius:6px;padding:8px 10px}
.ws-panel{background:var(--m-bg);border:1px solid var(--m-line);border-radius:14px;padding:8px 10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.ws-ph{display:flex;align-items:center;gap:6px;color:var(--m-ink)}
.ws-ph .gm-i{color:var(--m-gblue)}
.ws-pb{flex:1;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ws-resp{background:var(--m-bg2);border-radius:8px;padding:7px 9px;width:100%}
.ws-pin{display:flex;align-items:center;gap:6px;border:1px solid var(--m-line);border-radius:14px;padding:6px 6px 6px 10px}
.ws-pin>span:first-child{flex:1;min-width:0;white-space:pre-wrap}
.ws-thumbs{display:flex;flex-direction:column;gap:6px}
.ws-thumbs i{display:block;height:26px;border:1px solid var(--m-line);border-radius:3px;background:var(--m-bg)}
.ws-thumbs i.on{border:2px solid var(--m-gyellow)}
.ws-slide{display:grid;place-items:center;min-width:0}
.ws-sl{width:100%;aspect-ratio:16/9;background:var(--m-bg);border:1px solid var(--m-line);border-radius:4px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.ws-sl b{font-size:15px;color:var(--m-navy);letter-spacing:-.02em}
.ws-slot{height:100%;min-height:70px;border:1.5px dashed var(--m-line);border-radius:6px;display:grid;place-items:center}
.ws-slot .ws-img{width:100%;height:100%}
.ws-tabs{display:flex;gap:4px}
.ws-tabs span{padding:3px 9px;border-radius:999px;font-size:11px;color:var(--m-ink2);border:1px solid var(--m-line)}
.ws-tabs span.on{background:var(--m-soft);color:var(--m-navy);font-weight:600;border-color:#C9D9EA}
.ws-imgs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;width:100%}
.ws-img{aspect-ratio:4/3;border-radius:6px;display:grid;place-items:center;color:rgba(255,255,255,.9)}
.ws-img.g0{background:linear-gradient(135deg,#9CC3E6,#5B8DB8)} .ws-img.g1{background:linear-gradient(135deg,#A7D7C5,#4E9A7F)} .ws-img.g2{background:linear-gradient(135deg,#F3D9A4,#C99A45)}
.ws-nav{display:flex;flex-direction:column;gap:4px}
.ws-nav span{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:999px;color:var(--m-ink2);white-space:nowrap}
.ws-nav span.on{background:#FCE8E6;color:var(--m-ink);font-weight:600}
.ws-nav .gm-btn{color:#fff;margin-bottom:4px}
.ws-mail{background:var(--m-bg);border-radius:12px;padding:12px 14px;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ws-mail h4{margin:0;font-size:13.5px;letter-spacing:-.01em}
.ws-sum{width:100%;background:#EEF4FC;border-radius:10px;padding:8px 10px;border:1px solid #C9D9EA}
.ws-mtext{color:var(--m-ink2)}
.ws-reply{width:100%;border:1px solid var(--m-line);border-radius:10px;padding:8px 10px;display:grid;gap:6px;justify-items:start}
.ws-rtext{width:100%}

/* ---------- Google Flow (어두운 화면을 흉내 냄 — 토큰만 바꾼다) ---------- */
.gm.fl{--m-bg:#101418; --m-bg2:#181D23; --m-bg3:#232A32; --m-ink:#EEF2F6; --m-ink2:#C3CCD6; --m-ink3:#8C98A6; --m-line:#2E3742;
  background:var(--m-bg);color:var(--m-ink);display:flex;flex-direction:column}
.fl-top{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--m-line)}
.fl-top b{font-size:14px;letter-spacing:-.01em}
.fl-cr{display:inline-flex;align-items:center;gap:5px;color:var(--m-ink3);font-size:11px}
.fl-home{padding:14px 16px;display:grid;gap:10px}
.fl-hero{display:grid;gap:6px;justify-items:start;padding:16px;border-radius:14px;background:linear-gradient(135deg,#1C2733,#14202B);border:1px solid var(--m-line)}
.fl-hero b{font-size:16px}
.fl-hero>span:not(.fl-btn){color:var(--m-ink2)}
.fl-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:#EEF2F6;color:#101418;font-weight:700;margin-top:4px}
.fl-sh{font-size:11px;color:var(--m-ink3);font-weight:600}
.fl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.fl-card{display:grid;gap:6px;color:var(--m-ink2)}
.fl-th{aspect-ratio:16/9;border-radius:10px;background:var(--m-bg3);display:grid;place-items:center;color:var(--m-ink3)}
.fl-work{flex:1;display:flex;flex-direction:column;gap:10px;padding:12px 14px;min-height:300px}
.fl-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--m-ink3);text-align:center}
.fl-empty .gm-i.big{color:var(--m-ink3)}
.fl-clips{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start}
.fl-clip{position:relative;aspect-ratio:16/9;border-radius:10px;display:grid;place-items:center}
.fl-clip.c0{background:linear-gradient(160deg,#3B6E99 0%,#9CC3E6 55%,#DCEBFB 100%)}
.fl-clip.c1{background:linear-gradient(160deg,#2E5A4D 0%,#7FB8A4 60%,#D8EFE6 100%)}
.fl-play{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(16,20,24,.6);color:#fff}
.fl-ctl{position:absolute;right:6px;top:6px;display:flex;gap:4px}
.fl-ib{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(16,20,24,.72);color:#EEF2F6}
.fl-pbox{background:var(--m-bg2);border:1px solid var(--m-line);border-radius:16px;padding:10px 12px;display:grid;gap:8px}
.fl-ptext{white-space:pre-wrap;color:var(--m-ink);max-height:90px;overflow:hidden}
.fl-ph{color:var(--m-ink3)}
.fl-pbar{display:flex;align-items:center;gap:8px}
.fl-sel{padding:4px 10px;border-radius:999px;background:var(--m-bg3);color:var(--m-ink2);font-size:11.5px}
.fl-pbar .fl-ib{background:var(--m-bg3)}
.fl-send{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#EEF2F6;color:#101418}

/* ---------- 개념 그림용 표 (테마를 따른다 — 엔진 토큰 사용) ---------- */
.gam-tbl{width:100%;border-collapse:collapse;font-size:12px;color:var(--ink)}
.gam-tbl th,.gam-tbl td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.gam-tbl th{background:var(--surface-2);color:var(--ink);font-weight:700}
.gam-tbl td{color:var(--ink-2)}
.gam-tbl td b{color:var(--ink)}
.gam-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.gam-rules .dg-box{text-align:left;min-width:0}
.gam-bad{border-color:var(--danger) !important;background:var(--danger-soft) !important}
.gam-good{border-color:var(--ok) !important;background:var(--ok-soft) !important}

/* ---------- 좁은 화면 ---------- */
@media (max-width:640px){
  .gmn-side{display:none}
  .gmn-cv,.gmn-gedit,.nlm-cols,.ws-body.with-panel,.ws-body.mail,.ws-body.mail.with-panel,.ws-body.with-panel:has(.ws-thumbs){grid-template-columns:minmax(0,1fr)}
  .ws-thumbs,.ws-nav{display:none}
  .nlm-pane{min-height:0}
  .gam-rules{grid-template-columns:1fr}
  .gmn-sub{left:auto;right:0;bottom:auto;top:calc(100% + 4px)}
}

/* 메뉴가 열린 화면은 입력창을 위로 올려 아래 메뉴가 잘리지 않게 */
.gmn-center.has-menu{justify-content:flex-start;padding-top:36px;min-height:430px}
/* 커서 재생 뒤(.hl.clicked)에도 채움 버튼의 바탕색을 지켜 글자가 사라지지 않게 */
.gm .gm-btn.hl.clicked{background-color:var(--m-navy) !important}
.gm .gm-btn.ghost.hl.clicked,.gm .gmn-send.hl.clicked{background-color:var(--m-soft) !important}
.gm .fl-btn.hl.clicked,.gm .fl-send.hl.clicked{background-color:#EEF2F6 !important}
.gm .fl-ib.hl.clicked{background-color:rgba(16,20,24,.72) !important}