/* ═══════════════════════════════════════════════════════════════
   DEMO SHELL — 데모 위에 얹는 어두운 상단바 (2026-09-04)
   생성: 2026-09-04 | 작성자: 연제의 Claude
   맥락: 데모 본체(각 1.5MB)는 body{height:100vh} 기준으로 짜여 있어 바를 직접
         끼우면 내부 100vh 계산이 바 높이만큼 어긋난다. 그래서 본체는 iframe 으로
         두고 이 바만 바깥에 둔다 — 본체 파일은 한 줄도 건드리지 않는다.

   색: zinc 다크 계열만 사용 (.claude/design.md — 다른 회색 혼용 금지)
═══════════════════════════════════════════════════════════════ */
:root{
  --ds-h:44px;              /* 상단바 높이 */
  --ds-bg:#27272A;          /* zinc-800 */
  --ds-bg-hi:#3F3F46;       /* zinc-700 */
  --ds-line:#52525B;        /* zinc-600 */
  --ds-text:#F4F4F5;        /* zinc-100 */
  --ds-dim:#A1A1AA;         /* zinc-400 */
  /* 첫 화면(index.html) 프라이머리와 같은 중립 파랑 축. 어두운 바 위라 채운 자리는 한 단계 눌렀고,
     바 위에 글씨로 얹는 자리는 반대로 밝은 파랑을 쓴다 — 같은 색을 양쪽에 쓰면 한쪽이 안 읽힌다.
     스쿼드 색으로 바꾸려면 이 두 값과 index.html 의 --primary 를 함께 바꾼다 */
  --ds-primary:#2F5FD3;
  --ds-primary-on:#8DB4FF;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--ds-bg);
  color:var(--ds-text);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Segoe UI',sans-serif;
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ── 상단바 ─────────────────────────────────────────── */
.ds-bar{
  flex:none;height:var(--ds-h);
  display:flex;align-items:center;gap:12px;
  padding:0 12px;
  background:var(--ds-bg);
  border-bottom:1px solid var(--ds-bg-hi);
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
}
.ds-bar::-webkit-scrollbar{display:none;}

.ds-home{
  flex:none;display:inline-flex;align-items:center;gap:4px;
  height:28px;padding:0 12px 0 8px;border-radius:8px;
  color:var(--ds-text);text-decoration:none;font-weight:500;
  background:transparent;border:1px solid var(--ds-bg-hi);
  white-space:nowrap;
}
.ds-home:hover{background:var(--ds-bg-hi);}
.ds-home svg{flex:none;}

.ds-title{
  flex:none;font-weight:500;color:var(--ds-text);white-space:nowrap;
  padding-left:4px;
}
.ds-title small{
  display:inline-block;margin-left:8px;
  color:var(--ds-dim);font-weight:400;font-size:12px;
}

.ds-sep{flex:none;width:1px;height:20px;background:var(--ds-bg-hi);}
.ds-spacer{flex:1 1 auto;min-width:8px;}

.ds-group{flex:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.ds-group[hidden]{display:none;}
.ds-label{flex:none;color:var(--ds-dim);font-size:12px;}

/* ── 버튼 ───────────────────────────────────────────── */
.ds-btn{
  flex:none;font:inherit;font-weight:500;
  height:28px;padding:0 12px;border-radius:8px;cursor:pointer;
  color:var(--ds-text);background:transparent;
  border:1px solid var(--ds-bg-hi);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.ds-btn:hover{background:var(--ds-bg-hi);}
.ds-btn.ds-accent{background:var(--ds-primary);border-color:var(--ds-primary);color:#fff;}
.ds-btn.ds-accent:hover{background:#A8215F;border-color:#A8215F;}
.ds-btn:focus-visible{outline:2px solid var(--ds-primary);outline-offset:2px;}
.ds-btn[disabled]{opacity:.5;cursor:default;}
.ds-btn.is-busy{opacity:.6;cursor:progress;}
.ds-btn.done{background:var(--ds-primary);border-color:var(--ds-primary);color:#fff;}

/* ── 세그먼트 (넛지 A/B) ────────────────────────────── */
.ds-seg{
  flex:none;display:inline-flex;
  background:var(--ds-bg-hi);border-radius:8px;padding:2px;
}
.ds-seg button{
  font:inherit;font-weight:500;
  height:24px;padding:0 12px;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--ds-dim);white-space:nowrap;
}
.ds-seg button:hover{color:var(--ds-text);}
.ds-seg button[aria-pressed="true"]{background:var(--ds-primary);color:#fff;}
.ds-seg button:focus-visible{outline:2px solid var(--ds-primary);outline-offset:1px;}

/* ── 드롭다운 (하위 선택을 팝오버로) ────────────────
   상위 컨트롤에 딸린 선택을 바에 나란히 깔면 같은 층으로 읽힌다. 버튼 하나로 접고
   안에서 고르게 한다(2026-09-17). 팝오버는 fixed — .ds-bar 가 overflow-x:auto 라
   바 안에 두면 잘린다. 자리는 shell.js placeMenu() 가 잡는다. */
.ds-menu-btn{gap:6px;padding-right:10px;}
.ds-menu-btn.is-open{background:var(--ds-bg-hi);border-color:var(--ds-line);}
.ds-caret{
  flex:none;width:12px;height:12px;
  background:no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5l4-4' stroke='%23A1A1AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition:transform .12s ease;
}
.ds-menu-btn.is-open .ds-caret{transform:rotate(180deg);}

.ds-pop{
  position:fixed;z-index:45;
  width:280px;max-width:calc(100vw - 24px);
  padding:12px;border-radius:10px;
  background:#18181B;border:1px solid var(--ds-line);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:12px;
}
.ds-pop[hidden]{display:none;}
.ds-pop-row{display:flex;flex-direction:column;gap:6px;}
.ds-pop-row[hidden]{display:none;}
.ds-pop-label{color:var(--ds-dim);font-size:12px;}
.ds-pop-body{display:block;}
/* 팝오버 안 세그는 항목이 길면 줄을 바꾼다 — 한 줄에 억지로 넣으면 팝오버 밖으로 삐져나갔다(2026-09-21) */
.ds-pop-body .ds-seg{display:flex;flex-wrap:wrap;width:100%;gap:2px;}
.ds-pop-body .ds-seg button{flex:1 1 auto;padding:0 10px;}
.ds-pop-body .ds-select,
.ds-pop-body .ds-btn{width:100%;justify-content:center;}

/* ── 셀렉트 (데브모드 단계) ─────────────────────────── */
.ds-select{
  flex:none;font:inherit;font-weight:500;
  height:28px;padding:0 28px 0 12px;border-radius:8px;cursor:pointer;
  color:var(--ds-text);background:transparent;
  border:1px solid var(--ds-bg-hi);
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6.5 8 10.5l4-4' stroke='%23A1A1AA' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:16px;
}
.ds-select:hover{background-color:var(--ds-bg-hi);}
.ds-select:focus-visible{outline:2px solid var(--ds-primary);outline-offset:2px;}
.ds-select option{background:var(--ds-bg);color:var(--ds-text);}

/* ── 데모 본체 ──────────────────────────────────────── */
.ds-stage{flex:1 1 auto;min-height:0;position:relative;background:#fff;}
.ds-stage iframe{display:block;width:100%;height:100%;border:0;}

.ds-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--ds-bg);color:var(--ds-dim);font-size:13px;
  transition:opacity .2s ease;
}
.ds-loading[hidden]{display:none;}

/* ── 토스트 ─────────────────────────────────────────── */
.ds-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:50;max-width:min(560px, calc(100vw - 48px));
  padding:12px 16px;border-radius:8px;
  background:#18181B;color:var(--ds-text);
  border:1px solid var(--ds-bg-hi);
  box-shadow:0 4px 20px rgba(0,0,0,0.10);
  opacity:0;pointer-events:none;transition:opacity .15s ease;
}
.ds-toast.is-on{opacity:1;}

/* 바가 좁아질 때 — 제목을 먼저 접는다 (컨트롤이 더 중요) */
@media (max-width:1080px){
  .ds-title small{display:none;}
}
@media (max-width:840px){
  .ds-title{display:none;}
  .ds-title + .ds-sep{display:none;}
}

/* ── 지금 동작 표시 (상단바 왼쪽) ───────────────────── */
.ds-now{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 10px;border-radius:8px;
  background:var(--ds-bg-hi);color:var(--ds-text);
  font-size:12px;font-weight:500;white-space:nowrap;
}
.ds-now-dot{
  width:6px;height:6px;border-radius:50%;background:var(--ds-primary-on);
  flex:none;
}
.ds-now.is-idle{background:transparent;color:var(--ds-dim);}
.ds-now.is-idle .ds-now-dot{background:var(--ds-line);}

/* ── 정책 서랍 (오른쪽에서 밀려 나옴) ───────────────── */
.ds-drawer{
  position:fixed;top:var(--ds-h);right:0;bottom:0;
  width:min(520px, 100vw);
  background:#18181B;border-left:1px solid var(--ds-bg-hi);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .18s ease;
  z-index:40;
}
.ds-drawer.is-open{transform:none;}
.ds-drawer-head{
  flex:none;display:flex;align-items:center;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--ds-bg-hi);
}
.ds-drawer-head h2{margin:0;font-size:16px;font-weight:600;color:var(--ds-text);}
.ds-drawer-head .ds-btn{margin-left:auto;}
.ds-drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:20px;}

.ds-scrim{
  position:fixed;inset:var(--ds-h) 0 0 0;background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:39;
}
.ds-scrim.is-open{opacity:1;pointer-events:auto;}

/* ── 정책 본문 (데모 서랍 · 코드 화면 오른쪽 공용) ──── */
.pv-lead{
  margin:0 0 24px;padding:16px;border-radius:8px;
  background:var(--ds-bg);color:var(--ds-text);
  font-size:14px;line-height:1.7;
}
.pv-sec{margin-bottom:28px;}
.pv-sec h3{
  margin:0 0 12px;font-size:14px;font-weight:600;color:var(--ds-text);
  padding-bottom:8px;border-bottom:1px solid var(--ds-bg-hi);
}
.pv-grp{
  margin:16px 0 8px;font-size:12px;font-weight:600;color:var(--ds-primary-on);
}
.pv-grp:first-of-type{margin-top:0;}
.pv-note{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--ds-dim);}

.pv-actions,.pv-rows{margin:0;}
.pv-actions dt,.pv-rows dt{
  font-size:13px;font-weight:500;color:var(--ds-text);margin-top:12px;
}
.pv-actions dt:first-child,.pv-rows dt:first-child{margin-top:0;}
.pv-actions dd,.pv-rows dd{
  margin:4px 0 0;font-size:13px;line-height:1.7;color:var(--ds-dim);
}
.pv-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all;}

.pv-act{
  font:inherit;font-size:13px;font-weight:500;
  padding:2px 8px;margin-left:-8px;border-radius:8px;cursor:pointer;
  background:transparent;color:var(--ds-text);border:1px solid transparent;
  text-align:left;
}
.pv-act:hover{background:var(--ds-bg-hi);border-color:var(--ds-bg-hi);}
.pv-act::after{content:' ↗';color:var(--ds-dim);}
.pv-act:focus-visible{outline:2px solid var(--ds-primary);outline-offset:1px;}

.pv-list{margin:0;padding-left:20px;}
.pv-list li{font-size:13px;line-height:1.7;color:var(--ds-dim);margin-bottom:8px;}
.pv-list li:last-child{margin-bottom:0;}

.pv-dev{
  margin-top:24px;padding:16px;border-radius:8px;
  background:var(--ds-bg);border:1px solid var(--ds-bg-hi);
}
.pv-dev > summary{
  font-size:13px;font-weight:500;color:var(--ds-dim);cursor:pointer;list-style:none;
}
.pv-dev > summary::-webkit-details-marker{display:none;}
.pv-dev > summary::before{content:'▸ ';}
.pv-dev[open] > summary{margin-bottom:12px;}
.pv-dev[open] > summary::before{content:'▾ ';}
.pv-dev > summary:hover{color:var(--ds-text);}

.pv-ver{margin:24px 0 0;font-size:12px;color:#52525B;}
/* 이전 시안 — 접힌 채로 시작, 버튼으로 펼친다 */
.pv-legacy{display:none;}
.pv-show-legacy .pv-legacy{display:block;}
.pv-legacy-btn{
  display:block;margin:0 0 20px;padding:8px 12px;border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;text-align:left;
  background:transparent;color:var(--ds-dim);border:1px dashed var(--ds-bg-hi);
}
.pv-legacy-btn:hover{color:var(--ds-text);background:var(--ds-bg-hi);}
.pv-show-legacy .pv-legacy-btn{border-style:solid;}
.pv-empty{margin:0;font-size:13px;color:var(--ds-dim);}