/* ─────────────────────────────────────────────────────────────
   .g-pen — 글 본문 데모 항목의 CodePen 식 임베드 (blog-publish 「CodePen 식 임베드」)
   결과 | HTML | SCSS | CSS | JS | TSX 탭 + 복사 + 라이브 편집.
   결과 창은 기존 .g-item-demo 그대로라 base.html 의 데모 iframe 정책(600px 앞 1회 점등 ·
   화면 밖 정지 · 포스터 바닥)이 그대로 돈다 — 이 파일은 그 바깥 껍데기만 그린다.
   색은 style.css :root 토큰만 쓴다. 코드 창은 잉크 바닥 + 크림 글자 (17.4:1).
   글 페이지에서만 싣는다 (글머리.html).
   ───────────────────────────────────────────────────────────── */
.g-pen{
  --pen-code-bg:#17141a; --pen-code-fg:#fff9ef; --pen-gutter:#8b8499;
  --pen-t-com:#a9a2b5; --pen-t-str:#3ddc97; --pen-t-key:#ffd23f; --pen-t-num:#ff9ebb;
  --pen-t-tag:#6ec8ff; --pen-t-atr:#ffd23f; --pen-t-sel:#b9a0ff; --pen-t-pun:#c9c2d6;
  margin:18px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  overflow:hidden;max-width:100%;
}
@supports (corner-shape:squircle){.g-pen{corner-shape:squircle}}

/* 탭 줄 */
.g-pen__tabs{display:flex;gap:0;background:var(--cream);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.g-pen__tabs::-webkit-scrollbar{display:none}
.g-pen__tab{appearance:none;-webkit-appearance:none;border:0;border-bottom:2px solid transparent;background:transparent;
  padding:11px 14px;font:800 12px/1 var(--font-display);letter-spacing:.02em;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.g-pen__tab:hover{color:var(--ink)}
.g-pen__tab[aria-selected="true"]{color:var(--ink);background:var(--paper);border-bottom-color:var(--orange)}
.g-pen__tab:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

/* 패널 */
.g-pen__panels{position:relative;background:var(--paper)}
.g-pen__panel--result{padding:12px;position:relative}
.g-pen .g-item-demo{margin:0 auto;max-width:480px;width:100%}
.g-pen__panel--code{position:relative;background:var(--pen-code-bg)}
/* `.body pre`(0,1,1) 를 이기려고 클래스 둘로 쓴다 — 안 그러면 글 본문 코드블록 스타일(흰 바닥·여백·테두리)이 먹는다 */
.g-pen .g-pen__code{margin:0;padding:14px 16px;max-height:23em;overflow:auto;border:0;border-radius:0;
  background:var(--pen-code-bg);color:var(--pen-code-fg);font:12.5px/1.65 var(--font-mono);tab-size:2}
.g-pen .g-pen__code:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.g-pen .g-pen__code code{display:block;min-width:max-content;background:none;padding:0;border-radius:0;font:inherit;color:inherit}
.g-pen .g-pen__panel.is-open .g-pen__code{max-height:none}
.g-pen__panel--code:has(.g-pen__more) .g-pen__code{padding-bottom:46px}   /* 「전체 펼치기」가 코드를 가리지 않게 */
/* 줄 번호 — 토크나이저가 줄마다 .g-pen__l 을 씌운 뒤부터 보인다 (JS 없으면 코드 원문 그대로) */
.g-pen__code.is-lit code{counter-reset:pl}
.g-pen__l{display:block}
.g-pen__l::before{counter-increment:pl;content:counter(pl);position:sticky;left:0;z-index:1;
  display:inline-block;width:2.6em;margin-right:1em;padding-right:.7em;text-align:right;
  color:var(--pen-gutter);background:var(--pen-code-bg);user-select:none;-webkit-user-select:none}
.g-pen__t-com{color:var(--pen-t-com);font-style:italic}
.g-pen__t-str{color:var(--pen-t-str)}
.g-pen__t-key{color:var(--pen-t-key);font-weight:700}
.g-pen__t-num{color:var(--pen-t-num)}
.g-pen__t-tag{color:var(--pen-t-tag)}
.g-pen__t-atr{color:var(--pen-t-atr)}
.g-pen__t-sel{color:var(--pen-t-sel)}
.g-pen__t-pun{color:var(--pen-t-pun)}
.g-pen__more{position:absolute;right:10px;bottom:10px;z-index:2;appearance:none;-webkit-appearance:none;
  padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--pen-gutter);
  background:var(--pen-code-bg);color:var(--pen-code-fg);font:700 11px/1 var(--font-display);cursor:pointer}
.g-pen__more:hover{background:#2a2530}
.g-pen__panel--code:has(.g-pen__edit) .g-pen__more{display:none}   /* 편집 중엔 접기·펼치기가 뜻이 없다 */
.g-pen__more:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* 도구 줄 */
.g-pen__tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 12px;background:var(--cream);border-top:1px solid var(--line)}
.g-pen__btn{display:inline-block;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font:700 12px/1 var(--font-display);cursor:pointer;appearance:none;-webkit-appearance:none}
.g-pen__btn:hover{background:var(--ink);color:var(--cream);text-decoration:none}
.g-pen__btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.g-pen__btn[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.g-pen__btn--ghost{border-style:dashed}
.g-pen__say{font:700 12px/1.4 var(--font-mono);color:var(--brand-text);min-height:1em}

/* 캡션 — 측정값 + 우리 식 출처 줄 */
.g-pen__cap{margin:0;padding:9px 12px 11px;border-top:1px solid var(--line);background:var(--paper);
  display:flex;flex-wrap:wrap;gap:2px 12px;justify-content:space-between;
  font:11.5px/1.6 var(--font-mono);color:var(--muted)}
.g-pen__cap a{color:var(--brand-text);text-decoration:underline}
.g-pen .g-chips{margin:0;padding:0 12px 12px}

/* 라이브 편집 — 원본 iframe 은 두고 편집용 iframe 을 그 위에 겹친다 */
.g-pen__edit{display:block;width:100%;min-height:17em;max-height:26em;border:0;padding:14px 16px;
  background:var(--pen-code-bg);color:var(--pen-code-fg);font:12.5px/1.65 var(--font-mono);
  resize:vertical;tab-size:2;white-space:pre;overflow:auto}
.g-pen__edit:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.g-pen.is-edit .g-pen__panel--result{border-bottom:1px dashed var(--line)}
.g-item-demo .g-pen__live{position:absolute;left:50%;top:50%;width:480px;height:300px;max-width:none;
  border:0;background:var(--paper);opacity:1;pointer-events:auto;z-index:3;
  transform-origin:50% 50%;transform:translate(-50%,-50%) scale(var(--s,1))}

@media (max-width:520px){
  .g-pen__tab{padding:10px 11px;font-size:11.5px}
  .g-pen .g-pen__code,.g-pen__edit{font-size:12px;padding:12px 13px}
  .g-pen__l::before{width:2.2em;margin-right:.7em;padding-right:.5em}
  .g-pen__cap{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .g-pen__tab{transition:none}
}
@media print{
  .g-pen__tabs,.g-pen__tools,.g-pen__more{display:none!important}
  .g-pen .g-pen__code{max-height:none;overflow:visible}
}