/* 원본에서 복사됨 — 고치지 말고 AI_공용_프롬프트/공용_부품/collab/ 원본을 고친 뒤 node 복사.js */
/* 같이 만들기 (collab) — 화면 부품. 사이트의 색 변수(--bg·--panel·--line·--t1~3·--ac·--acInk)를 따르고, 없으면 어두운 기본값 */
.hc, .hc-pill {
  --hc-bg: var(--bg, #07080a); --hc-panel: var(--panel, #0f1215); --hc-panel2: var(--panel2, #151a1f);
  --hc-line: var(--line, #232931); --hc-line2: var(--line2, #2e353f);
  --hc-t1: var(--t1, #eef0f2); --hc-t2: var(--t2, #a9b0ba); --hc-t3: var(--t3, #8a929d);
  --hc-ac: var(--ac, #b8f35a); --hc-acTx: var(--acTx, var(--hc-ac)); --hc-acInk: var(--acInk, #142000); --hc-acBg: var(--acBg, rgba(184, 243, 90, .1));
  --hc-bad: var(--bad, #ff8a80); --hc-r: 8px;
}
.hc-i { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 머리띠 단추 */
.hc-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--hc-r); border: 1px solid var(--hc-line); background: none; color: var(--hc-t2); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.hc-pill:hover { color: var(--hc-t1); border-color: var(--hc-line2); }
.hc-pill-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hc-panel2); color: var(--hc-t1); font-size: 11px; line-height: 18px; text-align: center; }
.hc-pill-new::after { content: ''; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--hc-ac); box-shadow: 0 0 0 2px var(--hc-bg); }
@media (max-width: 520px) { .hc-pill { padding: 0 9px; } .hc-pill > span { display: none; } }

/* 버전 화면 */
html.hc-on, html.hc-on body { overflow: hidden; }
.hc { position: fixed; inset: 0; z-index: 2147483000; display: grid; grid-template-rows: auto 1fr auto; background: var(--hc-bg); color: var(--hc-t1); font-size: 14px; line-height: 1.5; }
.hc button { font: inherit; color: inherit; }
.hc-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: var(--hc-r); border: 1px solid var(--hc-line); background: none; color: var(--hc-t1); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.hc-btn:hover { border-color: var(--hc-line2); background: var(--hc-panel2); }
.hc-btn:disabled { opacity: .5; cursor: default; }
.hc-btn.hc-pri { background: var(--hc-ac); border-color: var(--hc-ac); color: var(--hc-acInk); }
.hc-btn.hc-pri:hover { filter: brightness(1.06); }
.hc-icon { width: 34px; padding: 0; justify-content: center; }
.hc :focus-visible { outline: 2px solid var(--hc-ac); outline-offset: 2px; }

.hc-bar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-bottom: 1px solid var(--hc-line); background: var(--hc-panel); min-width: 0; }
.hc-back { border-color: transparent; padding: 0 10px 0 6px; color: var(--hc-t2); }
.hc-back:hover { color: var(--hc-t1); }
.hc-tabs { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 2px; }
.hc-tabs::-webkit-scrollbar { display: none; }
.hc-tab { position: relative; flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 6px; border-radius: var(--hc-r); border: 1px solid transparent; background: none; color: var(--hc-t2); cursor: pointer; white-space: nowrap; }
.hc-tab:hover { background: var(--hc-panel2); color: var(--hc-t1); }
.hc-tab[aria-selected="true"] { background: var(--hc-panel2); border-color: var(--hc-line2); color: var(--hc-t1); }
.hc-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -9px; height: 2px; border-radius: 2px; background: var(--hc-ac); }
.hc-tab b { font-size: 13px; font-weight: 700; }
.hc-tab small { font-size: 11px; color: var(--hc-t3); }
.hc-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; background: var(--hc-line); color: var(--hc-t1); }
.hc-tab-me .hc-av { background: var(--hc-acBg); color: var(--hc-acTx); box-shadow: inset 0 0 0 1px var(--hc-ac); }
.hc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hc-ac); font-style: normal; }
.hc-tab-add { color: var(--hc-acTx); border: 1px dashed var(--hc-line2); padding: 0 12px; }
.hc-tab-add .hc-i { width: 14px; height: 14px; }
.hc-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.hc-seg { display: flex; padding: 2px; border-radius: var(--hc-r); border: 1px solid var(--hc-line); }
.hc-seg button { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--hc-t3); font-size: 12px; font-weight: 600; cursor: pointer; }
.hc-seg button[aria-pressed="true"] { background: var(--hc-panel2); color: var(--hc-t1); }

.hc-stage { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; background: var(--hc-bg); }
.hc-frame { width: 100%; height: 100%; }
.hc-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--hc-bg); }
.hc-phone:not(.hc-fill) .hc-stage { background: radial-gradient(60% 70% at 50% 40%, var(--hc-panel2), var(--hc-bg)); }
.hc-phone:not(.hc-fill) .hc-frame { flex: none; transform-origin: center; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px var(--hc-line2), 0 0 0 9px var(--hc-panel), 0 0 0 10px var(--hc-line2), 0 24px 60px rgba(0, 0, 0, .45); }
.hc-msg { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: var(--hc-r); background: var(--hc-panel); border: 1px solid var(--hc-line); color: var(--hc-t2); font-size: 13px; max-width: calc(100% - 32px); }

.hc-foot { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 14px; border-top: 1px solid var(--hc-line); background: var(--hc-panel); color: var(--hc-t3); font-size: 12px; min-width: 0; }
.hc-info { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-info b { color: var(--hc-t1); font-weight: 600; }
.hc-fresh { height: 28px; color: var(--hc-acTx); border-color: var(--hc-ac); background: var(--hc-acBg); }
.hc-err { display: inline-flex; align-items: center; gap: 5px; color: var(--hc-bad); }

.hc-menu { position: absolute; top: 52px; right: 12px; z-index: 3; min-width: 220px; padding: 6px; border-radius: 10px; border: 1px solid var(--hc-line2); background: var(--hc-panel); box-shadow: 0 16px 40px rgba(0, 0, 0, .4); }
.hc-menu button { display: flex; width: 100%; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--hc-t1); font-size: 13px; text-align: left; cursor: pointer; }
.hc-menu button:hover, .hc-menu button:focus-visible { background: var(--hc-panel2); outline: none; }
.hc-menu .hc-i { color: var(--hc-t3); }

.hc-modal { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); }
.hc-card { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: 14px; border: 1px solid var(--hc-line2); background: var(--hc-panel); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.hc-card h2 { margin: 0 36px 8px 0; font-size: 18px; line-height: 1.35; letter-spacing: -.01em; }
.hc-x { position: absolute; top: 14px; right: 14px; border-color: transparent; }
.hc-sub { margin: 0 0 16px; color: var(--hc-t2); font-size: 14px; }
.hc-sub b { color: var(--hc-t1); }
.hc-sum { margin: 0 0 8px; color: var(--hc-t2); font-size: 13px; }
.hc-sum b { color: var(--hc-t1); }
.hc-diff, .hc-hist, .hc-steps { margin: 0 0 16px; padding: 0; list-style: none; }
.hc-diff li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hc-line); font-size: 13px; color: var(--hc-t2); min-width: 0; }
.hc-diff li span { flex: none; width: 34px; font-size: 11px; font-weight: 700; }
.hc-diff code { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hc-t1); }
.hc-mod span { color: var(--gold, #ffd43b); } .hc-add span { color: var(--hc-acTx); } .hc-del span { color: var(--hc-bad); }
.hc-note { margin: 0 0 8px; font-size: 13px; color: var(--hc-t2); }
.hc-note code { font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12px; }
.hc-dim { color: var(--hc-t3); }
.hc-link { border: 0; padding: 0; background: none; color: var(--hc-t2); text-decoration: underline; cursor: pointer; font-size: inherit; }
.hc-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.hc-hist li { display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: 'n m b' 'n t b'; column-gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hc-line); }
.hc-hist li > b { grid-area: n; font-size: 13px; color: var(--hc-t3); font-variant-numeric: tabular-nums; }
.hc-hist li > span { grid-area: m; font-size: 13px; overflow-wrap: anywhere; }
.hc-hist li > span em { color: var(--hc-t3); font-style: normal; }
.hc-hist li > small { grid-area: t; font-size: 11px; color: var(--hc-t3); }
.hc-hist li > .hc-btn { grid-area: b; height: 30px; }
.hc-steps { counter-reset: hc; }
.hc-steps > li { counter-increment: hc; position: relative; padding: 0 0 16px 34px; font-size: 14px; }
.hc-steps > li::before { content: counter(hc); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--hc-panel2); border: 1px solid var(--hc-line2); font-size: 12px; font-weight: 700; }
.hc-steps > li > .hc-btn, .hc-steps [data-keyslot] { margin-top: 8px; }
.hc-steps > li > .hc-btn { display: flex; }
.hc-code { display: flex; align-items: flex-start; gap: 8px; margin: 8px 0; padding: 10px 10px 10px 12px; border-radius: var(--hc-r); border: 1px solid var(--hc-line); background: var(--hc-bg); }
.hc-code code { flex: 1; min-width: 0; font-family: var(--mono, ui-monospace, Consolas, monospace); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; color: var(--hc-t1); }
.hc-code .hc-btn { height: 28px; padding: 0 9px; font-size: 12px; }

.hc-toast { position: absolute; left: 50%; bottom: 56px; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 8px 8px 16px; border-radius: 10px; border: 1px solid var(--hc-line2); background: var(--hc-panel2); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); font-size: 13px; }
.hc-toast:not(:has(button)) { padding-right: 16px; }

/* 좁은 화면: 위 줄 = 돌아가기 + 도구, 아래 줄 = 버전 탭 */
@media (max-width: 760px) {
  .hc-bar { flex-wrap: wrap; gap: 6px; padding: 6px 8px 0; }
  .hc-back span { display: none; }
  .hc-back { padding: 0 6px; }
  .hc-tools { margin-left: auto; gap: 6px; }
  .hc-tabs { order: 3; flex-basis: 100%; padding: 2px 2px 8px; }
  .hc-tab[aria-selected="true"]::after { bottom: -8px; }
  .hc-seg button span { display: none; }
  .hc-seg button { padding: 0 8px; }
  .hc-foot { padding: 4px 10px; }
  .hc-card { padding: 20px 16px; }
}
@media (max-width: 560px) { .hc-seg { display: none; } }   /* 폰에선 늘 폰 크기 */
@media (max-width: 380px) { .hc-main span { font-size: 12px; } .hc-main { padding: 0 10px; } }
@media (prefers-reduced-motion: no-preference) {
  .hc-toast, .hc-card { animation: hc-in .16s ease-out; }
  @keyframes hc-in { from { opacity: 0; transform: translateY(6px); } }
  .hc-toast { animation-name: hc-in-t; }
  @keyframes hc-in-t { from { opacity: 0; transform: translate(-50%, 6px); } }
}