06ファイル名が付いた窓の頭

<main class="stage">
  <div class="fw is-demo" id="fw">
    <div class="fw__head">
      <span class="fw__dots" aria-hidden="true">
        <span class="fw__dot fw__dot--1"></span>
        <span class="fw__dot fw__dot--2"></span>
        <span class="fw__dot fw__dot--3"></span>
      </span>
      <span class="fw__title">
        <span class="fw__icon" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="M208 88h-56V32Z" opacity=".2"/><path d="M181.66 146.34a8 8 0 0 1 0 11.32l-24 24a8 8 0 0 1-11.32-11.32L164.69 152l-18.35-18.34a8 8 0 0 1 11.32-11.32Zm-72-24a8 8 0 0 0-11.32 0l-24 24a8 8 0 0 0 0 11.32l24 24a8 8 0 0 0 11.32-11.32L91.31 152l18.35-18.34a8 8 0 0 0 0-11.32M216 88v128a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V40a16 16 0 0 1 16-16h96a8 8 0 0 1 5.66 2.34l56 56A8 8 0 0 1 216 88m-56-8h28.69L160 51.31Zm40 136V96h-48a8 8 0 0 1-8-8V40H56v176z"/></g></svg></span>
        <span class="fw__filenameSlot">
          <span class="fw__filename" id="fw-title">index.html</span>
          <span class="fw__filenameDemo fw__filenameDemo--1" aria-hidden="true">index.html</span>
          <span class="fw__filenameDemo fw__filenameDemo--2" aria-hidden="true">style.css</span>
        </span>
      </span>
    </div>
    <div class="fw__tabs" role="tablist" aria-labelledby="fw-title">
      <span class="fw__ptr" id="fw-ptr" aria-hidden="true"></span>
      <button class="fw__tab fw__tab--1" id="fw-tab1" type="button" role="tab" aria-selected="true" aria-controls="fw-panel1" tabindex="0">index.html</button>
      <button class="fw__tab fw__tab--2" id="fw-tab2" type="button" role="tab" aria-selected="false" aria-controls="fw-panel2" tabindex="-1">style.css</button>
    </div>
    <div class="fw__body">
      <pre class="fw__panel fw__panel--1 is-active" id="fw-panel1" role="tabpanel" aria-labelledby="fw-tab1" aria-hidden="false"><code><span class="c">&lt;</span><span class="k">section</span> class=<span class="s">"card"</span><span class="c">&gt;</span>
  <span class="c">&lt;</span><span class="k">h2</span><span class="c">&gt;</span>Hello<span class="c">&lt;/</span><span class="k">h2</span><span class="c">&gt;</span>
  <span class="c">&lt;</span><span class="k">p</span><span class="c">&gt;</span>Ship it.<span class="c">&lt;/</span><span class="k">p</span><span class="c">&gt;</span>
  <span class="c">&lt;</span><span class="k">button</span><span class="c">&gt;</span>Go<span class="c">&lt;/</span><span class="k">button</span><span class="c">&gt;</span>
<span class="c">&lt;/</span><span class="k">section</span><span class="c">&gt;</span></code></pre>
      <pre class="fw__panel fw__panel--2" id="fw-panel2" role="tabpanel" aria-labelledby="fw-tab2" aria-hidden="true"><code><span class="k">.card</span> <span class="c">{</span>
  padding: <span class="n">16px</span><span class="c">;</span>
  border-radius: <span class="n">12px</span><span class="c">;</span>
  box-shadow: <span class="n">0 2px 8px</span><span class="c">;</span>
<span class="c">}</span></code></pre>
    </div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-yellow);

// 구문 색 — 어두운 패널
$syn-key: $stage-orange;
$syn-str: $stage-yellow;
$syn-num: $subject-sky;
$syn-dim: rgba($subject-cream, .72);
$syn-txt: $subject-cream;

$tab-on-bg:    rgba(255, 247, 230, .14);
$tab-off-bg:   rgba(255, 247, 230, 0);
$tab-on-fg:    $subject-cream;
$tab-off-fg:   rgba(255, 247, 230, .5);

.fw {
  box-sizing: border-box;
  position: relative;
  width: 288px;
  max-width: 100%;
  border-radius: $r-card;
  overflow: hidden;
  box-shadow: $shadow-raised;
  background: $stage-ink;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.fw__head {
  display: flex;
  align-items: center;
  gap: $sp-2;
  height: 28px;
  padding: 0 $sp-3;
}
.fw__dots { display: inline-flex; align-items: center; gap: $sp-1; flex: 0 0 auto; }
.fw__dot { width: 8px; height: 8px; border-radius: 50%; }
.fw__dot--1 { background: $error; }
.fw__dot--2 { background: $stage-yellow; }
.fw__dot--3 { background: $subject-mint; }

.fw__title { display: inline-flex; align-items: center; gap: $sp-1; min-width: 0; color: rgba(255, 247, 230, .7); }
.fw__icon { display: inline-flex; flex: 0 0 auto; }
.fw__icon svg { display: block; }
// 머리 파일 이름 자리 — 실제(.fw__filename, JS 가 textContent 를 바꾼다)와
// 데모 전용 두 겹(.fw__filenameDemo)을 겹쳐 둔다. 데모 루프에서는 탭 컷과 같은
// 18%/84% 에 steps(1,end) 로 교체(크로스페이드 금지), 사람이 클릭하면 is-demo 가
// 빠지고 .fw__filename 만 보이며 그 textContent 가 갈아 끼워진다.
.fw__filenameSlot { position: relative; display: inline-block; min-width: 0; }
.fw__filename,
.fw__filenameDemo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.fw__filenameDemo {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.fw.is-demo .fw__filename { opacity: 0; }

.fw__tabs {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: $sp-1;
  padding: 0 $sp-3;
  background: rgba(0, 0, 0, .22);
}
.fw__ptr {
  position: absolute;
  left: 44px;
  top: 4px;
  // 다른 항목과 같은 포인터 링 — 속이 찬 파란 점은 화면의 UI 부품처럼 읽힌다 (poster 육안 실측)
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: $stage-ink;
  border: 2px solid $subject-cream;
  box-shadow: $shadow-press;
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) scale(1);
}
.fw__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 $sp-3;
  border: 0;
  border-radius: $r-xs;
  background: $tab-off-bg;
  color: $tab-off-fg;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transform: translateY(0);
}
.fw__tab:focus-visible { outline: 2px solid $color; outline-offset: -2px; }
.fw__tab[aria-selected="true"] {
  background: $tab-on-bg;
  color: $tab-on-fg;
  transform: translateY(-2px);
}

.fw__body { position: relative; height: 114px; overflow: hidden; }
.fw__panel {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  margin: 0;
  padding: $sp-3;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 18px;
  color: $syn-txt;
  white-space: pre;
  opacity: 0;
  visibility: hidden;
}
.fw__panel.is-active { opacity: 1; visibility: visible; }
.fw__panel .k { color: $syn-key; }
.fw__panel .s { color: $syn-str; }
.fw__panel .n { color: $syn-num; }
.fw__panel .c { color: $syn-dim; }

// ── 자동 루프 (2s) ────────────────────────────────────
// 0~16% 포인터가 두 번째 탭으로 · 18% 컷: 탭 전환 + 코드 컷 교체 · 18~30% 새 탭이 붙으며 점 3개가 차례 팝
// 34~66% 포인터 복귀 · 84% 컷: 첫 탭으로 복귀 · 84~100% 정지
.fw.is-demo .fw__ptr {
  opacity: 1;
  animation-duration: $dur-loop;
  animation-iteration-count: infinite;
  animation-timing-function: $easing;
  animation-name: fw-ptr;
}
.fw.is-demo .fw__tab--1 {
  animation-duration: $dur-loop;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-tab1;
}
.fw.is-demo .fw__tab--2 {
  animation-duration: $dur-loop;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-tab2;
}
.fw.is-demo .fw__panel--1 {
  animation-duration: $dur-loop;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-panel1;
}
.fw.is-demo .fw__panel--2 {
  animation-duration: $dur-loop;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-panel2;
}
.fw.is-demo .fw__filenameDemo--1 {
  animation-duration: $dur-loop;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-filename1;
}
.fw.is-demo .fw__filenameDemo--2 {
  animation-duration: $dur-loop;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-filename2;
}
.fw.is-demo .fw__dot--1 {
  animation-duration: $dur-instant;
  animation-iteration-count: 1;
  animation-timing-function: $ease-pop;
  animation-fill-mode: backwards;
  animation-delay: 360ms;
  animation-name: fw-dot-pop;
}
.fw.is-demo .fw__dot--2 {
  animation-duration: $dur-instant;
  animation-iteration-count: 1;
  animation-timing-function: $ease-pop;
  animation-fill-mode: backwards;
  animation-delay: 430ms;
  animation-name: fw-dot-pop;
}
.fw.is-demo .fw__dot--3 {
  animation-duration: $dur-instant;
  animation-iteration-count: 1;
  animation-timing-function: $ease-pop;
  animation-fill-mode: backwards;
  animation-delay: 500ms;
  animation-name: fw-dot-pop;
}

// 끝 좌표만 수정: 132px(88px 이동) 지점이 켜진 탭 라벨과 겹쳐 글자를 가렸다 →
// 탭 오른쪽 빈 자리(214px)로 옮긴다. 경로(퍼센트·이징)는 그대로.
@keyframes fw-ptr {
  0%   { transform: translate(0, 0) scale(1); }
  16%  { transform: translate(170px, 0) scale(1); animation-timing-function: $ease-pop; }
  18%  { transform: translate(170px, 0) scale(.86); animation-timing-function: $ease-pop; }
  22%  { transform: translate(170px, 0) scale(1); }
  34%  { transform: translate(170px, 0) scale(1); animation-timing-function: $easing; }
  66%  { transform: translate(0, 0) scale(1); }
  100% { transform: translate(0, 0) scale(1); }
}
@keyframes fw-tab1 {
  0%   { background: $tab-on-bg; color: $tab-on-fg; transform: translateY(-2px); }
  18%  { background: $tab-off-bg; color: $tab-off-fg; transform: translateY(0); }
  84%  { background: $tab-on-bg; color: $tab-on-fg; transform: translateY(-2px); }
  100% { background: $tab-on-bg; color: $tab-on-fg; transform: translateY(-2px); }
}
@keyframes fw-tab2 {
  0%   { background: $tab-off-bg; color: $tab-off-fg; transform: translateY(0); }
  18%  { background: $tab-on-bg; color: $tab-on-fg; transform: translateY(-2px); }
  84%  { background: $tab-off-bg; color: $tab-off-fg; transform: translateY(0); }
  100% { background: $tab-off-bg; color: $tab-off-fg; transform: translateY(0); }
}
@keyframes fw-panel1 {
  0%   { opacity: 1; visibility: visible; }
  18%  { opacity: 0; visibility: hidden; }
  84%  { opacity: 1; visibility: visible; }
  100% { opacity: 1; visibility: visible; }
}
@keyframes fw-panel2 {
  0%   { opacity: 0; visibility: hidden; }
  18%  { opacity: 1; visibility: visible; }
  84%  { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes fw-filename1 {
  0%   { opacity: 1; }
  18%  { opacity: 0; }
  84%  { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes fw-filename2 {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  84%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes fw-dot-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (max-width: 340px) {
  // 폭은 이미 max-width: 100% 라 289px 언저리를 넘지 않는다(320px 실폭 292px 예산 보호) — 몸통 높이만 줄인다
  .fw__body { height: 96px; }
  .fw__panel { font-size: 10px; line-height: 16px; padding: $sp-2; }
}

@media (prefers-reduced-motion: reduce) {
  .fw.is-demo .fw__ptr,
  .fw.is-demo .fw__tab--1,
  .fw.is-demo .fw__tab--2,
  .fw.is-demo .fw__panel--1,
  .fw.is-demo .fw__panel--2,
  .fw.is-demo .fw__filenameDemo--1,
  .fw.is-demo .fw__filenameDemo--2,
  .fw.is-demo .fw__dot--1,
  .fw.is-demo .fw__dot--2,
  .fw.is-demo .fw__dot--3 { animation: none !important; }
  .fw.is-demo .fw__ptr { opacity: 0; }
  .fw.is-demo .fw__tab--1 { background: $tab-off-bg; color: $tab-off-fg; transform: translateY(0); }
  .fw.is-demo .fw__tab--2 { background: $tab-on-bg; color: $tab-on-fg; transform: translateY(-2px); }
  .fw.is-demo .fw__panel--1 { opacity: 0; visibility: hidden; }
  .fw.is-demo .fw__panel--2 { opacity: 1; visibility: visible; }
  .fw.is-demo .fw__filenameDemo--1 { opacity: 0; }
  .fw.is-demo .fw__filenameDemo--2 { opacity: 1; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.fw {
  box-sizing: border-box;
  position: relative;
  width: 288px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}

.fw__head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
}

.fw__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.fw__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fw__dot--1 {
  background: #c2361a;
}

.fw__dot--2 {
  background: #ffd23f;
}

.fw__dot--3 {
  background: #4cd4a6;
}

.fw__title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: rgba(255, 247, 230, 0.7);
}

.fw__icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.fw__icon svg {
  display: block;
}

.fw__filenameSlot {
  position: relative;
  display: inline-block;
  min-width: 0;
}

.fw__filename,
.fw__filenameDemo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.fw__filenameDemo {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.fw.is-demo .fw__filename {
  opacity: 0;
}

.fw__tabs {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.22);
}

.fw__ptr {
  position: absolute;
  left: 44px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #17141a;
  border: 2px solid #fff7e6;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0) scale(1);
}

.fw__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 247, 230, 0);
  color: rgba(255, 247, 230, 0.5);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transform: translateY(0);
}

.fw__tab:focus-visible {
  outline: 2px solid #2f6df6;
  outline-offset: -2px;
}

.fw__tab[aria-selected=true] {
  background: rgba(255, 247, 230, 0.14);
  color: #fff7e6;
  transform: translateY(-2px);
}

.fw__body {
  position: relative;
  height: 114px;
  overflow: hidden;
}

.fw__panel {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 18px;
  color: #fff7e6;
  white-space: pre;
  opacity: 0;
  visibility: hidden;
}

.fw__panel.is-active {
  opacity: 1;
  visibility: visible;
}

.fw__panel .k {
  color: #ff4d1f;
}

.fw__panel .s {
  color: #ffd23f;
}

.fw__panel .n {
  color: #6ec8ff;
}

.fw__panel .c {
  color: rgba(255, 247, 230, 0.72);
}

.fw.is-demo .fw__ptr {
  opacity: 1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-name: fw-ptr;
}

.fw.is-demo .fw__tab--1 {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-tab1;
}

.fw.is-demo .fw__tab--2 {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-tab2;
}

.fw.is-demo .fw__panel--1 {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-panel1;
}

.fw.is-demo .fw__panel--2 {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-panel2;
}

.fw.is-demo .fw__filenameDemo--1 {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-filename1;
}

.fw.is-demo .fw__filenameDemo--2 {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);
  animation-name: fw-filename2;
}

.fw.is-demo .fw__dot--1 {
  animation-duration: 140ms;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-fill-mode: backwards;
  animation-delay: 360ms;
  animation-name: fw-dot-pop;
}

.fw.is-demo .fw__dot--2 {
  animation-duration: 140ms;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-fill-mode: backwards;
  animation-delay: 430ms;
  animation-name: fw-dot-pop;
}

.fw.is-demo .fw__dot--3 {
  animation-duration: 140ms;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  animation-fill-mode: backwards;
  animation-delay: 500ms;
  animation-name: fw-dot-pop;
}

@keyframes fw-ptr {
  0% {
    transform: translate(0, 0) scale(1);
  }
  16% {
    transform: translate(170px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  18% {
    transform: translate(170px, 0) scale(0.86);
    animation-timing-function: cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  22% {
    transform: translate(170px, 0) scale(1);
  }
  34% {
    transform: translate(170px, 0) scale(1);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  66% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fw-tab1 {
  0% {
    background: rgba(255, 247, 230, 0.14);
    color: #fff7e6;
    transform: translateY(-2px);
  }
  18% {
    background: rgba(255, 247, 230, 0);
    color: rgba(255, 247, 230, 0.5);
    transform: translateY(0);
  }
  84% {
    background: rgba(255, 247, 230, 0.14);
    color: #fff7e6;
    transform: translateY(-2px);
  }
  100% {
    background: rgba(255, 247, 230, 0.14);
    color: #fff7e6;
    transform: translateY(-2px);
  }
}
@keyframes fw-tab2 {
  0% {
    background: rgba(255, 247, 230, 0);
    color: rgba(255, 247, 230, 0.5);
    transform: translateY(0);
  }
  18% {
    background: rgba(255, 247, 230, 0.14);
    color: #fff7e6;
    transform: translateY(-2px);
  }
  84% {
    background: rgba(255, 247, 230, 0);
    color: rgba(255, 247, 230, 0.5);
    transform: translateY(0);
  }
  100% {
    background: rgba(255, 247, 230, 0);
    color: rgba(255, 247, 230, 0.5);
    transform: translateY(0);
  }
}
@keyframes fw-panel1 {
  0% {
    opacity: 1;
    visibility: visible;
  }
  18% {
    opacity: 0;
    visibility: hidden;
  }
  84% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fw-panel2 {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  18% {
    opacity: 1;
    visibility: visible;
  }
  84% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes fw-filename1 {
  0% {
    opacity: 1;
  }
  18% {
    opacity: 0;
  }
  84% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fw-filename2 {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fw-dot-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
@media (max-width: 340px) {
  .fw__body {
    height: 96px;
  }
  .fw__panel {
    font-size: 10px;
    line-height: 16px;
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fw.is-demo .fw__ptr,
  .fw.is-demo .fw__tab--1,
  .fw.is-demo .fw__tab--2,
  .fw.is-demo .fw__panel--1,
  .fw.is-demo .fw__panel--2,
  .fw.is-demo .fw__filenameDemo--1,
  .fw.is-demo .fw__filenameDemo--2,
  .fw.is-demo .fw__dot--1,
  .fw.is-demo .fw__dot--2,
  .fw.is-demo .fw__dot--3 {
    animation: none !important;
  }
  .fw.is-demo .fw__ptr {
    opacity: 0;
  }
  .fw.is-demo .fw__tab--1 {
    background: rgba(255, 247, 230, 0);
    color: rgba(255, 247, 230, 0.5);
    transform: translateY(0);
  }
  .fw.is-demo .fw__tab--2 {
    background: rgba(255, 247, 230, 0.14);
    color: #fff7e6;
    transform: translateY(-2px);
  }
  .fw.is-demo .fw__panel--1 {
    opacity: 0;
    visibility: hidden;
  }
  .fw.is-demo .fw__panel--2 {
    opacity: 1;
    visibility: visible;
  }
  .fw.is-demo .fw__filenameDemo--1 {
    opacity: 0;
  }
  .fw.is-demo .fw__filenameDemo--2 {
    opacity: 1;
  }
}

var root = document.getElementById('fw');
var tabs = [document.getElementById('fw-tab1'), document.getElementById('fw-tab2')];
var panels = [document.getElementById('fw-panel1'), document.getElementById('fw-panel2')];
var titleEl = document.getElementById('fw-title');
function fwSelect(i) {
  root.classList.remove('is-demo');
  // 머리의 파일 이름이 켜진 탭을 따라간다 — 거짓 헤더 방지
  titleEl.textContent = tabs[i].textContent;
  tabs.forEach(function (t, idx) {
    var on = idx === i;
    t.setAttribute('aria-selected', on ? 'true' : 'false');
    t.tabIndex = on ? 0 : -1;
  });
  panels.forEach(function (p, idx) {
    var on = idx === i;
    p.classList.toggle('is-active', on);
    p.setAttribute('aria-hidden', on ? 'false' : 'true');
  });
}
tabs.forEach(function (t, i) {
  t.addEventListener('click', function () {
    fwSelect(i);
    t.focus({ preventScroll: true });
  });
  t.addEventListener('keydown', function (e) {
    if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
    e.preventDefault();
    var next = (i + (e.key === 'ArrowRight' ? 1 : -1) + tabs.length) % tabs.length;
    fwSelect(next);
    tabs[next].focus({ preventScroll: true });
  });
});

import { useState, useRef } from "react";
import type { CSSProperties } from "react";
import styles from "./FilenameWindowHeader.module.scss";

export type FilenameWindowHeaderProps = {
  filenames?: [string, string];
  tabsLabel?: string;
  demo?: boolean;
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type KeyEvt = { key: string; preventDefault(): void };
type Box<T> = { current: T | null };

const FileCodeIcon = () => (
  <svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true">
    <g fill="currentColor">
      <path d="M208 88h-56V32Z" opacity=".2" />
      <path d="M181.66 146.34a8 8 0 0 1 0 11.32l-24 24a8 8 0 0 1-11.32-11.32L164.69 152l-18.35-18.34a8 8 0 0 1 11.32-11.32Zm-72-24a8 8 0 0 0-11.32 0l-24 24a8 8 0 0 0 0 11.32l24 24a8 8 0 0 0 11.32-11.32L91.31 152l18.35-18.34a8 8 0 0 0 0-11.32M216 88v128a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V40a16 16 0 0 1 16-16h96a8 8 0 0 1 5.66 2.34l56 56A8 8 0 0 1 216 88m-56-8h28.69L160 51.31Zm40 136V96h-48a8 8 0 0 1-8-8V40H56v176z" />
    </g>
  </svg>
);

const HtmlCode = () => (
  <>
    <span className={styles.c}>&lt;</span><span className={styles.k}>section</span> class=<span className={styles.s}>&quot;card&quot;</span><span className={styles.c}>&gt;</span>
    {"\n  "}<span className={styles.c}>&lt;</span><span className={styles.k}>h2</span><span className={styles.c}>&gt;</span>Hello<span className={styles.c}>&lt;/</span><span className={styles.k}>h2</span><span className={styles.c}>&gt;</span>
    {"\n  "}<span className={styles.c}>&lt;</span><span className={styles.k}>p</span><span className={styles.c}>&gt;</span>Ship it.<span className={styles.c}>&lt;/</span><span className={styles.k}>p</span><span className={styles.c}>&gt;</span>
    {"\n  "}<span className={styles.c}>&lt;</span><span className={styles.k}>button</span><span className={styles.c}>&gt;</span>Go<span className={styles.c}>&lt;/</span><span className={styles.k}>button</span><span className={styles.c}>&gt;</span>
    {"\n"}<span className={styles.c}>&lt;/</span><span className={styles.k}>section</span><span className={styles.c}>&gt;</span>
  </>
);

const CssCode = () => (
  <>
    <span className={styles.k}>.card</span> <span className={styles.c}>{"{"}</span>
    {"\n  "}padding: <span className={styles.n}>16px</span><span className={styles.c}>;</span>
    {"\n  "}border-radius: <span className={styles.n}>12px</span><span className={styles.c}>;</span>
    {"\n  "}box-shadow: <span className={styles.n}>0 2px 8px</span><span className={styles.c}>;</span>
    {"\n"}<span className={styles.c}>{"}"}</span>
  </>
);

export default function FilenameWindowHeader({
  filenames = ["index.html", "style.css"],
  tabsLabel = "Files",
  demo = true,
  duration = 220,
  easing = "cubic-bezier(.2,.8,.2,1)",
  color = "#2f6df6",
}: FilenameWindowHeaderProps) {
  const [live, setLive] = useState(demo);
  const [active, setActive] = useState(0);
  const tab1Ref = useRef<HTMLButtonElement>(null) as Box<HTMLButtonElement>;
  const tab2Ref = useRef<HTMLButtonElement>(null) as Box<HTMLButtonElement>;
  const tabRefs: Box<HTMLButtonElement>[] = [tab1Ref, tab2Ref];

  function select(i: number) {
    setLive(false);
    setActive(i);
  }

  function onTabKeyDown(e: KeyEvt, i: number) {
    if (e.key !== "ArrowRight" && e.key !== "ArrowLeft") return;
    e.preventDefault();
    const next = (i + (e.key === "ArrowRight" ? 1 : -1) + tabRefs.length) % tabRefs.length;
    select(next);
    const el = tabRefs[next].current;
    if (el) el.focus({ preventScroll: true });
  }

  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
  const rootClass = [styles.root, live ? styles.isDemo : ""].join(" ");

  return (
    <div className={rootClass} style={vars}>
      <div className={styles.head}>
        <span className={styles.dots} aria-hidden="true">
          <span className={[styles.dot, styles.dot1].join(" ")} />
          <span className={[styles.dot, styles.dot2].join(" ")} />
          <span className={[styles.dot, styles.dot3].join(" ")} />
        </span>
        <span className={styles.title}>
          <span className={styles.icon} aria-hidden="true"><FileCodeIcon /></span>
          <span className={styles.filenameSlot}>
            <span className={styles.filename} id="fw-react-title">{filenames[active]}</span>
            <span className={[styles.filenameDemo, styles.filenameDemo1].join(" ")} aria-hidden="true">{filenames[0]}</span>
            <span className={[styles.filenameDemo, styles.filenameDemo2].join(" ")} aria-hidden="true">{filenames[1]}</span>
          </span>
        </span>
      </div>
      <div className={styles.tabs} role="tablist" aria-label={tabsLabel}>
        <span className={styles.ptr} aria-hidden="true" />
        {filenames.map((name, i) => (
          <button
            key={name}
            ref={tabRefs[i]}
            className={[styles.tab, i === 0 ? styles.tab1 : styles.tab2].join(" ")}
            type="button"
            role="tab"
            aria-selected={live ? undefined : active === i}
            aria-controls={`fw-react-panel${i}`}
            tabIndex={live ? -1 : active === i ? 0 : -1}
            onClick={() => select(i)}
            onKeyDown={(e: KeyEvt) => onTabKeyDown(e, i)}
          >
            {name}
          </button>
        ))}
      </div>
      <div className={styles.body}>
        <pre
          className={[styles.panel, styles.panel1, !live && active === 0 ? styles.isActive : ""].join(" ")}
          id="fw-react-panel0"
          role="tabpanel"
          aria-hidden={live ? undefined : active !== 0}
        >
          <code><HtmlCode /></code>
        </pre>
        <pre
          className={[styles.panel, styles.panel2, !live && active === 1 ? styles.isActive : ""].join(" ")}
          id="fw-react-panel1"
          role="tabpanel"
          aria-hidden={live ? undefined : active !== 1}
        >
          <code><CssCode /></code>
        </pre>
      </div>
    </div>
  );
}