/* 원본에서 복사됨 — 고치지 말고 AI_공용_프롬프트/공용_부품/hong-ai/ 원본을 고친 뒤 node 복사.js */
/* =====================================================================
   홍 AI 도우미 모양 — 모든 사이트 같은 모양 (규격 = 홍공부방 공부 도우미, 11_홍공부방 study.css·hs.css·design.css)
   원본: 개인 프로젝트/AI_공용_프롬프트/공용_부품/hong-ai/ — 고칠 땐 원본을 고치고 `node 복사.js`
   · 색은 .hai 안의 변수만 씀 → 어느 사이트에 붙여도 같은 색. 기본 = 홍공부방 다크, html[data-theme="light"]면 밝게
   · 패널을 어디에 둘지(오른쪽 붙이기·휴대폰 아래에서 올라옴·크기)는 사이트가 정함. 여기는 패널 안의 모양만
   ===================================================================== */
@property --hai-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.hai{--hai-bg:#0C0E13;--hai-s:#151820;--hai-s2:#1D212B;--hai-line:#282D39;--hai-ink:#F4F6FB;--hai-ink2:#CDD2DE;--hai-ink3:#9AA1B4;
  --hai-accent:#6366F1;--hai-accent-ink:#fff;--hai-gold:#7C83F7;--hai-gold-ink:#A5A8FA;--hai-cyan:#22D3EE;--hai-rose:rgba(229,72,77,.18);
  --hai-grad:linear-gradient(120deg,#8B5CF6,#3B82F6,#06B6D4);--hai-panel:linear-gradient(180deg,#121216,#0E0E12);--hai-mono:ui-monospace,'Cascadia Code',Consolas,'D2Coding',monospace;
  position:relative;display:flex;flex-direction:column;min-height:0;box-sizing:border-box;color:var(--hai-ink);font-size:14.5px;line-height:1.5;
  border:1.5px solid transparent;border-radius:18px;
  background:var(--hai-panel) padding-box,linear-gradient(160deg,rgba(139,92,246,.75),rgba(59,130,246,.35) 45%,rgba(6,182,212,.6)) border-box;
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 24px 60px -30px rgba(99,102,241,.55)}
html[data-theme="light"] .hai{--hai-bg:#FFFFFF;--hai-s:#FFFFFF;--hai-s2:#F1F2F7;--hai-line:#E2E4EC;--hai-ink:#14161C;--hai-ink2:#3A3F4C;--hai-ink3:#6B7180;
  --hai-gold-ink:#5B4FE8;--hai-cyan:#0E7490;--hai-rose:rgba(229,72,77,.12);--hai-panel:linear-gradient(180deg,#FFFFFF,#FAFAFD);box-shadow:0 18px 48px -28px rgba(79,70,229,.45)}
.hai *,.hai *::before,.hai *::after{box-sizing:border-box}
.hai button{font:inherit;cursor:pointer}
.hai .hai-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hai .hai-i.sm{width:16px;height:16px}

/* 머리: 무지개 동그라미 + 이름(무지개 글자) + 남은 한도 */
.hai-h{display:flex;align-items:center;gap:10px;padding:12px 12px 10px 16px;border-bottom:1px solid rgba(255,255,255,.06);border-radius:16px 16px 0 0;
  background:radial-gradient(420px 120px at 20% 0%,rgba(139,92,246,.16),transparent 70%)}
html[data-theme="light"] .hai-h{border-bottom-color:var(--hai-line)}
.hai-badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--hai-grad);color:#fff;flex:none;box-shadow:0 0 18px -2px rgba(99,102,241,.7)}
.hai-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.hai-tt>b{font-size:15px;background:var(--hai-grad);-webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
.hai-ib{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;color:var(--hai-ink2);background:none;border:0;flex:none;padding:0}
.hai-ib:hover{background:var(--hai-s2);color:var(--hai-ink)}
.hai-use{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:12px;color:var(--hai-ink3)}
.hai-use b{color:var(--hai-ink2);font-weight:700}
.hai-use em{font-style:normal;font-weight:800;color:var(--hai-ink)}
.hai-share{display:block;flex-basis:100%;font-style:normal;font-size:11px;font-weight:600;color:var(--hai-cyan);margin-bottom:1px}
.hai-n{white-space:nowrap}
.hai-bar{display:block;flex:1 0 100%;height:5px;border-radius:5px;background:var(--hai-s2);overflow:hidden;max-width:220px}
.hai-bar>i{display:block;height:100%;border-radius:5px;background:#22C55E}
.hai-bar.mid>i{background:#F59E0B}
.hai-bar.hi>i{background:#E5484D}
.hai-reset{flex-basis:100%;font-size:11px;line-height:1.45;color:var(--hai-ink3)}
.hai-reset b{font:inherit;font-weight:700;color:var(--hai-ink2)}

/* 대화 */
.hai-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin}
.hai-list>*{flex-shrink:0}   /* 말이 많아져도 구분선(overflow:hidden)이 납작해지지 않게 */
.hai-bub{max-width:82%;align-self:flex-start;display:flex;flex-direction:column;gap:3px;min-width:0}
.hai-bub.hai-me{align-self:flex-end;align-items:flex-end}
.hai-bt{background:var(--hai-s2);color:var(--hai-ink);padding:12px 16px;border-radius:4px 16px 16px 16px;font-size:14.5px;line-height:1.65;overflow-wrap:anywhere;min-width:0;max-width:100%}
.hai-me .hai-bt{background:var(--hai-accent);color:var(--hai-accent-ink);border-radius:16px 4px 16px 16px}
.hai-err .hai-bt{background:var(--hai-rose)}
.hai-bot:has(.hai-code) .hai-bt{width:100%}
.hai-bot:has(.hai-code){max-width:100%;align-self:stretch}
.hai-bt p{margin:0}
.hai-bt p+p{margin-top:8px}
.hai-bt ul,.hai-bt ol{margin:0 0 6px;padding-left:20px}
.hai-bt a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.hai-bt code{font-family:var(--hai-mono);font-size:12.5px;background:var(--hai-s);border-radius:5px;padding:1px 5px}
.hai-me .hai-bt code{background:rgba(255,255,255,.18)}
.hai-sug{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 0}
.hai-sug button{padding:7px 12px;border-radius:999px;border:1px solid var(--hai-line);font-size:13px;font-weight:600;color:var(--hai-ink2);background:var(--hai-bg);text-align:left}
.hai-sug button:hover{border-color:#6D6AF5;color:var(--hai-ink)}
.hai-sep{align-self:center;max-width:100%;font-size:11.5px;font-weight:700;color:var(--hai-ink3);padding:2px 10px;border:1px solid var(--hai-line);border-radius:999px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hai-typing{display:flex;gap:4px;align-items:center;min-height:22px}
.hai-typing i{width:7px;height:7px;border-radius:50%;background:var(--hai-ink3);animation:hai-dot 1s infinite ease-in-out}
.hai-typing i:nth-child(2){animation-delay:.15s}.hai-typing i:nth-child(3){animation-delay:.3s}
@keyframes hai-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.hai-pin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.hai-pin button{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--hai-gold-ink);background:none;border:1px solid color-mix(in srgb,var(--hai-gold) 45%,transparent);border-radius:999px;padding:3px 10px}
.hai-pin button:hover{background:color-mix(in srgb,var(--hai-gold) 12%,transparent)}
.hai-pin button.done{color:var(--hai-ink3);border-color:var(--hai-line)}
.hai-by{font-size:11px;font-weight:700;color:var(--hai-ink3);font-family:var(--hai-mono)}
.hai-qimg{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.hai-qimg img{max-width:120px;max-height:120px;border-radius:8px;display:block;object-fit:cover}
.hai-qn{display:inline-flex;gap:4px;align-items:center;margin-bottom:4px;font-size:12px;opacity:.85}

/* 마크다운 꾸밈 (홍공부방 노션식과 같게) */
.hai-md-h1{font-size:1.5em;line-height:1.35;margin:.5em 0 .2em!important}
.hai-md-h2{font-size:1.25em;line-height:1.4;margin:.45em 0 .15em!important}
.hai-md-h3{font-size:1.08em;margin:.35em 0 .1em!important}
.hai-md-h{font-weight:800}
.hai-md-h:first-child{margin-top:0!important}
.hai-md-q{margin:4px 0;padding:2px 0 2px 12px;border-left:3px solid var(--hai-ink);color:var(--hai-ink2)}
.hai-md-call{display:flex;gap:10px;margin:6px 0;padding:10px 12px;border-radius:8px;background:var(--hai-s)}
.hai-md-call>div{min-width:0}
.hai-md-hr{border:0;border-top:1px solid var(--hai-line);margin:10px 0}
.hai-md-chk{display:flex;align-items:flex-start;gap:8px;margin:1px 0}
.hai-md-chk input{flex:none;width:16px;height:16px;margin:.35em 0 0;accent-color:var(--hai-ink)}
.hai-md-chk.done>span{text-decoration:line-through;color:var(--hai-ink3)}
.hai-md-tog{margin:2px 0}
.hai-md-tog>summary{cursor:pointer;list-style:none;display:flex;gap:6px;align-items:flex-start}
.hai-md-tog>summary::-webkit-details-marker{display:none}
.hai-md-tog>summary::before{content:'▶';flex:none;font-size:.7em;line-height:2.5;color:var(--hai-ink3);transition:transform .15s}
.hai-md-tog[open]>summary::before{transform:rotate(90deg)}
.hai-md-togb{padding-left:20px}
.hai-md-hl{background:#FDE68A;color:#1A1A1A;border-radius:3px;padding:0 2px}
.hai-md-tbl{max-width:100%;overflow-x:auto;margin:6px 0}
.hai-md-tbl table{border-collapse:collapse;font-size:13px}
.hai-md-tbl th,.hai-md-tbl td{border:1px solid var(--hai-line);padding:5px 9px;text-align:left;vertical-align:top}
.hai-md-tbl th{background:var(--hai-s);font-weight:700}
/* 코드 상자 (언어 이름 + 복사, 색칠) */
.hai-code{margin:6px 0 10px;border-radius:12px;overflow:hidden;background:#1C1D1F;border:1px solid #2E3034;max-width:100%}
.hai-code-h{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px 5px 12px;background:#2A2724;color:#B9AF9F;font:600 11.5px/1.4 var(--hai-mono);text-transform:lowercase}
.hai-code-h button{border:1px solid #4A443D;background:none;color:#E8DFD0;border-radius:6px;padding:2px 9px;font-size:11.5px;font-weight:600}
.hai-code-h button:hover{background:#2E3034}
.hai-code pre{margin:0;padding:12px 14px;overflow-x:auto;scrollbar-width:thin}
.hai-bt .hai-code code{display:block;background:none;padding:0;border-radius:0;color:#EDE6DA;font:400 12.5px/1.6 var(--hai-mono);white-space:pre;tab-size:4}
.hai-c-cm{color:#8A8174;font-style:italic}
.hai-c-str{color:#98D982}
.hai-c-num{color:#F4B678}
.hai-c-kw{color:#E6B566;font-weight:600}
.hai-c-fn{color:#8EC5FF}

/* 답하는 AI 고르기 · 설명 · 지금 보는 곳 */
.hai-foot{flex:none}
.hai-eng{display:flex;align-items:center;gap:6px;padding:8px 12px 0;flex-wrap:wrap}
.hai-eng>small{font-size:12px;color:var(--hai-ink3);margin-right:2px}
.hai-eng button{display:inline-flex;align-items:baseline;gap:5px;font-size:12.5px;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid var(--hai-line);background:var(--hai-s);color:var(--hai-ink2)}
.hai-eng button small{font-size:10.5px;font-weight:600;opacity:.75}
.hai-eng button[aria-pressed="true"]{background:var(--hai-accent);border-color:var(--hai-accent);color:var(--hai-accent-ink);box-shadow:0 0 16px -4px rgba(99,102,241,.75)}
.hai-tip{margin:6px 12px 0;font-size:11.5px;line-height:1.5;color:var(--hai-ink3)}
.hai-tip b{color:var(--hai-ink2);font-weight:700}
.hai-see{display:flex;gap:6px;align-items:flex-start;margin:6px 12px 0;padding:6px 9px;border-radius:9px;font-size:11.5px;line-height:1.45;color:var(--hai-ink3);
  background:color-mix(in srgb,var(--hai-s2) 70%,transparent);border:1px solid var(--hai-line)}
.hai-see>span:last-child{flex:1;min-width:0;overflow-wrap:anywhere}
.hai-see b{color:var(--hai-ink2);font-weight:700}
.hai-see-ico{flex:none}
.hai-att{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 12px 0}
.hai-att[hidden]{display:none}
.hai-att small{font-size:11px;color:var(--hai-ink3)}
.hai-th{position:relative;width:56px;height:56px;border-radius:9px;overflow:hidden;border:1px solid var(--hai-line);flex:none}
.hai-th img{width:100%;height:100%;object-fit:cover;display:block}
.hai-th button{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.62);color:#fff}
.hai-th button .hai-i{width:12px;height:12px}

/* 입력 */
.hai-in{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;margin-top:8px;border-top:1px solid var(--hai-line);flex:none}
.hai-in textarea{flex:1;min-width:0;resize:none;min-height:42px;max-height:140px;padding:10px 14px;border-radius:21px;color:var(--hai-ink);font:inherit;font-size:14.5px;line-height:1.45;
  border:1.5px solid transparent;background:linear-gradient(var(--hai-s),var(--hai-s)) padding-box,var(--hai-grad) border-box}
.hai-in textarea:focus{outline:none;background:linear-gradient(var(--hai-bg),var(--hai-bg)) padding-box,var(--hai-grad) border-box;
  box-shadow:0 0 0 4px color-mix(in srgb,#6D6AF5 14%,transparent),0 8px 24px -12px color-mix(in srgb,#6D6AF5 45%,transparent)}
.hai-in textarea::placeholder{color:var(--hai-ink3)}
.hai-img{align-self:center;cursor:pointer}
.hai-img input{display:none}
.hai-img.off{opacity:.4;cursor:not-allowed}
.hai-img[hidden]{display:none}
.hai-send{width:40px;height:40px;border-radius:50%;background:var(--hai-accent);color:var(--hai-accent-ink);display:grid;place-items:center;flex:none;border:0;padding:0}
.hai-send:disabled{opacity:.45;cursor:default}

/* 답을 만드는 동안: 둘레에 보라→파랑→청록 빛이 돌고, 동그라미·이름·입력칸이 같이 빛남 (홍공부방과 같게) */
.hai.hai-busy{animation:hai-glow 4.5s ease-in-out infinite}
.hai.hai-busy::before{content:"";position:absolute;inset:-1.5px;z-index:5;pointer-events:none;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--hai-ang),#8B5CF6,#3B82F6,#06B6D4,#8B5CF6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:hai-spin 2s linear infinite}
.hai.hai-busy::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;animation:hai-inner 4.5s ease-in-out infinite}
.hai-busy .hai-badge{background:conic-gradient(from var(--hai-ang),#8B5CF6,#3B82F6,#06B6D4,#8B5CF6);animation:hai-spin 1.2s linear infinite,hai-pop .8s ease-in-out infinite alternate}
.hai-busy .hai-tt>b{background-image:linear-gradient(90deg,var(--hai-ink),#8B5CF6,#3B82F6,#06B6D4,var(--hai-ink));background-size:300% 100%;animation:hai-sweep 1.8s linear infinite}
.hai-busy .hai-typing i{background:linear-gradient(135deg,#8B5CF6,#06B6D4)}
.hai-busy .hai-in textarea{background:linear-gradient(var(--hai-s),var(--hai-s)) padding-box,conic-gradient(from var(--hai-ang),#8B5CF6,#3B82F6,#06B6D4,#8B5CF6) border-box;animation:hai-spin 2s linear infinite;box-shadow:0 0 24px -6px rgba(99,102,241,.6)}
@keyframes hai-spin{to{--hai-ang:360deg}}
@keyframes hai-sweep{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes hai-pop{to{transform:scale(1.12);box-shadow:0 0 16px 2px rgba(155,92,255,.6)}}
@keyframes hai-glow{0%,100%{box-shadow:0 0 28px -8px rgba(139,92,246,.6)}33%{box-shadow:0 0 34px -8px rgba(59,130,246,.6)}66%{box-shadow:0 0 28px -8px rgba(6,182,212,.55)}}
@keyframes hai-inner{0%,100%{box-shadow:inset 0 0 90px -30px rgba(139,92,246,.55)}33%{box-shadow:inset 0 0 110px -28px rgba(59,130,246,.55)}66%{box-shadow:inset 0 0 90px -30px rgba(6,182,212,.5)}}
@media (prefers-reduced-motion:reduce){.hai.hai-busy,.hai.hai-busy::before,.hai.hai-busy::after,.hai-busy .hai-badge,.hai-busy .hai-tt>b,.hai-busy .hai-in textarea{animation:none}}

/* 좁은 화면 */
@media (max-width:420px){
  .hai-list{padding:14px 12px;gap:14px}
  .hai-bub{max-width:90%}
  .hai-bt{padding:10px 13px}
  .hai-eng{gap:5px;padding:8px 10px 0}
  .hai-eng button{padding:4px 10px;font-size:12px}
  .hai-tip,.hai-see{margin-inline:10px}
}

/* 너비 조절 손잡이 — 패널 왼쪽 끝 (넓은 화면만). 끌면 <html>의 --hai-w가 바뀌고 사이트 CSS가 그 값으로 패널·본문 여백을 정함 */
.hai-grip{display:none}
@media (min-width:900px){
  .hai-grip{display:block;position:absolute;left:-2px;top:18px;bottom:18px;width:12px;z-index:3;cursor:ew-resize;touch-action:none;border-radius:6px;outline:none}
  .hai-grip::after{content:'';position:absolute;left:2px;top:50%;width:4px;height:44px;margin-top:-22px;border-radius:4px;background:var(--hai-line);opacity:0;transition:opacity .2s,background .2s}
  .hai:hover .hai-grip::after{opacity:1}
  .hai-grip:hover::after,.hai-grip:focus-visible::after,html.hai-resizing .hai-grip::after{opacity:1;background:var(--hai-accent)}
}
html.hai-resizing,html.hai-resizing *{cursor:ew-resize!important;user-select:none!important}
html.hai-resizing .hai{transition:none!important}   /* animation은 건드리지 않기 — 끄고 켜면 여는 움직임이 다시 돎 */