/* site/console.css — 톡톡톡 창작 스튜디오(studio.html)·심사 콘솔(admin.html) 공용
   스타일 (부록 AC, 2026-08-17). 두 페이지가 그대로 <link>해서 공유한다.

   ── 토큰 출처 ──────────────────────────────────────────────────────────
   :root 블록의 --bg/--ink/--ink-2/--ink-3/--accent/--accent-ink/--glass/
   --glass-hi/--stroke/--stroke-top/--panel/--ok/--warn/--r-card/--r-pill/
   --blur/--ease는 site/landing.css 4~15행에서 이름·값 그대로 옮겨 왔다
   (AC-2). landing.css를 @import 하지 않는 이유는 AC-1 결정 3 — 랜딩을 고치다
   콘솔이 같이 깨지는 걸 막기 위해서다. 대신 **두 값이 갈라지지 않게, 랜딩의
   토큰을 바꿀 때는 이 블록도 손으로 맞춰야 한다.** 콘솔 전용 토큰 4개
   (--danger·--r-input·--w-studio·--w-admin)는 landing.css에 없는 새 값이다.

   ── .g-btn 변형 규약 (문서화 필수 지시사항) ─────────────────────────────
     .g-btn            골격만 준다(패딩·반경·폰트·누름 모션). 단독 사용 금지 —
                        반드시 아래 세 변형 중 하나와 같이 쓴다.
     .g-btn.primary     채움, background:var(--accent) — 주 동작 1개
                         (제출·저장·승인 등, 화면에 보통 하나만).
     .g-btn.secondary    테두리만, 배경 투명 — 보조 동작(취소·더보기·닫기).
     .g-btn.danger       background:var(--danger) — 파괴적 동작
                         (거절·삭제·정지). AC-3 규칙대로 진짜 파괴적인 동작만
                         2단 확인(confirm 다이얼로그 등) 뒤에 실행되게 JS에서
                         감싼다 — CSS는 위험해 보이게만 만든다.
     .g-btn.small        위 셋과 함께 붙여 밀도 행(모션 관리 등)의 좁은 버튼에.
   변형 클래스 없이 .g-btn만 쓰면 secondary와 같은 중립 외곽선으로 보인다
   (실수로 변형을 빠뜨려도 위험하게 튀지 않는 무해한 기본값).

   ── .g-chip 톤 규약 ──────────────────────────────────────────────────
     .g-chip           톤 없는 중립 회색 라벨(무상태 텍스트에).
     .g-chip.warn       대기 상태 — 예: "심사 중". 앰버.
     .g-chip.ok         정상/공개 상태 — 예: "공개". 그린.
     .g-chip.accent     조치 필요 — 예: "수정 요청". 브랜드 라임.
     .g-chip.danger     중단 상태 — 예: "거절"·"비공개". 레드.

   ── 재질 규칙 (반드시 지킬 것) ───────────────────────────────────────
   .g-card는 blur 없는 반투명 판이다. **.g-card 안에 다시 .g-card를 두지
   않는다.** 카드 내부의 입력·행·코드 블록·체크 그리드는 전부 var(--panel)
   단색을 쓰는 .g-input/.g-row/.g-code 등으로 — 재질을 겹치면 대비가 흐려진다.

   ── 모션 규칙 ────────────────────────────────────────────────────────
   JS 애니메이션 라이브러리 금지, transform·opacity만 애니메이션한다. 탭
   전환용 .g-tab-in-… / .g-tab-out-… 클래스는 내부적으로 --g-slide 변수로
   이동 거리를 정하므로, prefers-reduced-motion에서는 그 변수만 0으로
   눌러 "슬라이드 없는 200ms 페이드"로 자동 강등된다(키프레임 중복 없음).
*/

@import url("assets/fonts/pretendard/pretendardvariable-dynamic-subset.css");

:root{
  --bg:#050506; --ink:#f5f5f7;
  --ink-2:rgba(245,245,247,.62); --ink-3:rgba(245,245,247,.38);
  --accent:#d8ff2e; --accent-ink:#0b0c04;
  --glass:rgba(255,255,255,.07); --glass-hi:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.14); --stroke-top:rgba(255,255,255,.30);
  --panel:rgba(255,255,255,.045);
  --ok:#5ad07a; --warn:#ffcc4d;
  --r-card:24px; --r-pill:999px; --blur:28px;
  --ease:cubic-bezier(.22,1,.36,1);

  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Noto Sans KR","Segoe UI",sans-serif;
  --fs-display:26px; --fs-title:20px; --fs-headline:16px; --fs-body:15px;
  --fs-sub:14px; --fs-caption:13px; --fs-micro:12px;

  /* 콘솔 전용 (landing.css에 없음) */
  --danger:#ff6b6b;
  --r-input:14px;
  --w-studio:720px;
  --w-admin:960px;
  --w-side:256px;
}

/* ── 기본 골격 ─────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:var(--fs-body)/1.6 var(--font-sans);
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:auto;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 배경 — landing.css .bg-field 그대로. 정적 라디얼 2개, 애니메이션 없음(Y-4 유지). */
.bg-field{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(540px 680px at 0% 28%, rgba(216,255,46,.055), transparent 68%),
    radial-gradient(720px 520px at 12% -8%, rgba(216,255,46,.10), transparent 60%),
    radial-gradient(760px 640px at 94% 16%, rgba(90,200,250,.08), transparent 60%),
    var(--bg);
}

/* ── 타이포 (apple-design §15) ───────────────────────────────────────
   페이지 제목 h1 · 섹션 제목 h2 · 이하는 유틸리티 클래스로 보조·캡션을 낸다. */
h1,h2,h3{ margin:0; }
h1{ font-size:var(--fs-display); font-weight:700; letter-spacing:-0.02em; line-height:1.25; }
h2{ font-size:var(--fs-title); font-weight:700; letter-spacing:-0.015em; line-height:1.3; }
h3{ font-size:var(--fs-headline); font-weight:700; letter-spacing:-0.01em; line-height:1.35; }
p{ margin:0; }

.g-lead{ font-size:var(--fs-body); line-height:1.6; color:var(--ink); }
.g-muted{ font-size:var(--fs-sub); line-height:1.55; color:var(--ink-2); }
.g-caption{ font-size:var(--fs-caption); line-height:1.5; color:var(--ink-3); }
.g-num{ font-variant-numeric:tabular-nums; } /* 정산 금액·건수 등 숫자값에 붙인다 */

/* ── 컨테이너 (studio/admin이 각자 폭 유틸을 얹어 쓸 수 있게) ───────── */
.g-container{ width:100%; margin:0 auto; padding-left:24px; padding-right:24px; }
.g-container.studio{ max-width:var(--w-studio); }
.g-container.admin{ max-width:var(--w-admin); }

/* ── 상단 고정 글래스 바 (AC-3) ───────────────────────────────────────
   하드 보더 대신 아래쪽 그라디언트 낙하(box-shadow 블러)로 스크롤 엣지를 낸다. */
.g-bar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 24px;
  background:var(--glass);
  box-shadow:0 24px 24px -20px rgba(0,0,0,.4);
}
.g-bar-brand{ display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:var(--fs-sub); min-width:0; }
.g-bar-brand small{ font-size:var(--fs-micro); color:var(--ink-3); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-bar-actions{ display:flex; align-items:center; gap:12px; font-size:var(--fs-caption); color:var(--ink-2); flex:none; }
.g-bar-actions .g-num{ color:var(--ink); }

/* ── 재질: 카드 (apple-design §12) ───────────────────────────────────
   층 1(배경)=.bg-field, 층 2(카드)=.g-card, 층 3(카드 내부)=.g-panel 계열.
   카드 안에 카드를 중첩하지 않는다 — 내부 요소는 전부 var(--panel) 단색. */
.g-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.045));
  border:1px solid var(--stroke);
  border-top-color:var(--stroke-top);
  border-radius:var(--r-card);
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
  padding:24px;
}
.g-card + .g-card{ margin-top:16px; }
.g-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.g-card-body{ display:grid; gap:16px; }

/* 카드 안에서 쓰는 단색 표면(유리 없음) — 코드 블록, 밀도 행, 메타 그리드 등 */
.g-panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--r-card);
}

/* ── g-btn ────────────────────────────────────────────────────────── */
.g-btn{
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-size:var(--fs-sub); font-weight:600; letter-spacing:.005em; line-height:1;
  padding:11px 20px; border-radius:var(--r-pill);
  border:1px solid var(--stroke); background:transparent; color:var(--ink);
  cursor:pointer;
  transition:transform 100ms ease-out, background 160ms var(--ease), border-color 160ms var(--ease), filter 160ms var(--ease), opacity 160ms var(--ease);
}
.g-btn:active{ transform:scale(.97); }
.g-btn .ic{ width:16px; height:16px; }
.g-btn.primary{ background:linear-gradient(180deg,#e2ff5c,var(--accent)); color:var(--accent-ink); border-color:transparent; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 20px rgba(216,255,46,.16); }
.g-btn.secondary{ background:rgba(255,255,255,.07); color:var(--ink); border-color:var(--stroke); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }
.g-btn.danger{ background:linear-gradient(180deg,#ff7f7f,var(--danger)); color:#2a0605; border-color:transparent; font-weight:700; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.g-btn.small{ padding:8px 14px; font-size:var(--fs-caption); }
.g-btn.small .ic{ width:14px; height:14px; }
.g-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.g-btn:disabled,
.g-btn[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
.g-btn:disabled:active,
.g-btn[aria-disabled="true"]:active{ transform:none; }
@media (hover:hover) and (pointer:fine){
  .g-btn.primary:hover{ filter:brightness(1.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 26px rgba(216,255,46,.24); }
  .g-btn.danger:hover{ filter:brightness(1.05); }
  .g-btn.secondary:hover{ background:rgba(255,255,255,.11); border-color:var(--stroke-top); }
  .g-btn:disabled:hover,
  .g-btn[aria-disabled="true"]:hover{ filter:none; border-color:var(--stroke); }
}

/* 승인 게이트 카운터 같은 "왜 안 눌리는지" 보조 문구 */
.g-btn-note{ font-size:var(--fs-micro); color:var(--ink-3); }

/* ── g-chip ───────────────────────────────────────────────────────── */
.g-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-micro); font-weight:650; letter-spacing:.01em;
  padding:5px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); color:var(--ink-2);
  border:1px solid var(--stroke);
  white-space:nowrap;
}
.g-chip.warn{ background:rgba(255,204,77,.16); color:var(--warn); border-color:rgba(255,204,77,.34); }
.g-chip.ok{ background:rgba(90,208,122,.16); color:var(--ok); border-color:rgba(90,208,122,.34); }
.g-chip.accent{ background:rgba(216,255,46,.14); color:var(--accent); border-color:rgba(216,255,46,.34); }
.g-chip.danger{ background:rgba(255,107,107,.16); color:var(--danger); border-color:rgba(255,107,107,.36); }

/* ── g-input ──────────────────────────────────────────────────────── */
.g-field{ display:grid; gap:6px; }
.g-field label{ font-size:var(--fs-caption); font-weight:600; color:var(--ink-2); }
.g-field .g-caption{ margin-top:-2px; }

.g-input{
  width:100%; display:block; font:inherit; font-size:var(--fs-body); color:var(--ink);
  background:var(--panel); border:1px solid var(--stroke); border-radius:var(--r-input);
  padding:11px 14px;
  transition:border-color 160ms var(--ease), background 160ms var(--ease);
}
.g-input::placeholder{ color:var(--ink-3); }
.g-input:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; border-color:transparent; }
.g-input:focus-visible{ box-shadow:0 0 0 4px rgba(216,255,46,.12); }
.g-input:disabled{ opacity:.5; cursor:not-allowed; }
textarea.g-input{ resize:vertical; min-height:96px; line-height:1.6; }
select.g-input{ cursor:pointer; }

/* 드롭존 스타일 파일 입력(AC-4 새 제출 폼) */
.g-dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:28px 16px;
  background:var(--panel); border:1.5px dashed var(--stroke); border-radius:var(--r-input);
  color:var(--ink-2); font-size:var(--fs-sub); cursor:pointer;
  transition:border-color 160ms var(--ease), background 160ms var(--ease);
}
.g-dropzone:hover{ border-color:var(--ink-2); }
.g-dropzone.has-file{ border-style:solid; border-color:rgba(216,255,46,.4); background:rgba(216,255,46,.06); color:var(--ink); }
.g-dropzone .g-caption{ color:var(--ink-3); }

/* ── g-empty ──────────────────────────────────────────────────────── */
.g-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:48px 24px; text-align:center; color:var(--ink-3);
}
.g-empty-icon{ font-size:32px; line-height:1; opacity:.6; }
.g-empty p{ font-size:var(--fs-sub); line-height:1.6; max-width:34ch; color:var(--ink-3); }

/* ── g-skeleton ───────────────────────────────────────────────────── */
.g-skeleton{
  display:block; background:var(--panel); border-radius:10px;
  animation:gPulse 1.4s ease-in-out infinite;
}
.g-skeleton.g-skeleton-line{ height:14px; width:100%; }
.g-skeleton.g-skeleton-line + .g-skeleton-line{ margin-top:8px; }
.g-skeleton.g-skeleton-row{ height:48px; border-radius:14px; }
@keyframes gPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ── g-banner ─────────────────────────────────────────────────────── */
.g-banner{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:14px;
  background:var(--panel); border:1px solid var(--stroke);
  font-size:var(--fs-sub); line-height:1.55; color:var(--ink-2);
}
.g-banner strong{ color:var(--ink); }
.g-banner .g-banner-icon{ flex:none; font-size:var(--fs-headline); line-height:1.4; }
.g-banner-actions{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.g-banner.accent{ background:rgba(216,255,46,.08); border-color:rgba(216,255,46,.32); color:var(--ink); }
.g-banner.warn{ background:rgba(255,204,77,.10); border-color:rgba(255,204,77,.34); color:var(--ink); }
.g-banner.danger{ background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.4); color:var(--ink); }

/* ── 탭 전환 모션 (4px 슬라이드 + 크로스페이드, 대칭) ─────────────────
   JS는 새 패널에 in-*, 이전 패널에 out-* 클래스를 붙였다가 animationend에서
   뗀다. --g-slide만 눌러 reduced-motion에서 페이드로 강등된다(키프레임 1벌). */
@keyframes gTabIn{ from{ opacity:0; transform:translateX(var(--g-slide,4px)); } to{ opacity:1; transform:translateX(0); } }
@keyframes gTabOut{ from{ opacity:1; transform:translateX(0); } to{ opacity:0; transform:translateX(var(--g-slide,4px)); } }
.g-tab-in-right{ --g-slide:4px; animation:gTabIn 200ms var(--ease) both; }
.g-tab-in-left{ --g-slide:-4px; animation:gTabIn 200ms var(--ease) both; }
.g-tab-out-right{ --g-slide:4px; animation:gTabOut 200ms var(--ease) both; }
.g-tab-out-left{ --g-slide:-4px; animation:gTabOut 200ms var(--ease) both; }

/* ── 공용 콘솔 셸(sh-*) ────────────────────────────────────────────────
   유리는 구조적 크롬(사이드바·모바일 상단바·드로어)에만 둔다. 콘텐츠 카드는
   blur 없는 반투명 판으로 유지해 목록 스크롤 합성 비용을 낮춘다. */
.ic{ width:20px; height:20px; flex:none; color:currentColor; }
.sh-app{ min-height:100dvh; display:grid; grid-template-columns:var(--w-side) minmax(0,1fr); }
.sh-side{
  position:sticky; top:0; z-index:100; display:flex; flex-direction:column; gap:24px;
  width:var(--w-side); height:100dvh; padding:28px 16px 20px;
  background:rgba(12,12,15,.72); border-right:1px solid var(--stroke);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);
  backdrop-filter:blur(var(--blur)) saturate(170%);
  box-shadow:18px 0 56px rgba(0,0,0,.22),inset -1px 0 rgba(255,255,255,.04);
}
.sh-brand{ display:flex; flex-direction:column; gap:2px; padding:0 12px; }
.sh-brand b{ font-size:var(--fs-headline); letter-spacing:-.01em; }
.sh-brand small{ color:var(--ink-3); font-size:var(--fs-micro); letter-spacing:.01em; }
.sh-nav{ min-height:0; flex:1 1 auto; overflow-y:auto; scrollbar-width:thin; }
.sh-nav ul{ margin:0; padding:0; list-style:none; }
.sh-nav > ul{ display:grid; gap:4px; }
.sh-group{ display:grid; gap:2px; }
.sh-item-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px; }
.sh-item,
.sh-subitem{
  min-width:0; display:flex; align-items:center; gap:10px; color:var(--ink-2);
  border-radius:12px; transition:background 160ms var(--ease),color 160ms var(--ease);
}
.sh-item{ min-height:44px; padding:10px 12px; font-size:var(--fs-sub); font-weight:600; }
.sh-item .sh-label,.sh-subitem .sh-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-item:hover,.sh-subitem:hover{ color:var(--ink); background:rgba(255,255,255,.06); }
.sh-item.is-active{ color:var(--ink); background:rgba(255,255,255,.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); }
.sh-item.is-active .ic{ color:var(--accent); }
.sh-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows 240ms var(--ease); }
.sh-sub > ul{ min-height:0; overflow:hidden; padding-left:12px; }
.sh-group[data-open="true"] .sh-sub{ grid-template-rows:1fr; }
.sh-subitem{ min-height:36px; padding:7px 12px 7px 22px; color:var(--ink-2); font-size:var(--fs-sub); font-weight:500; position:relative; }
.sh-subitem::before{ content:""; position:absolute; left:10px; top:8px; bottom:8px; width:2px; border-radius:2px; background:transparent; }
.sh-subitem.is-active{ color:var(--ink); }
.sh-subitem.is-active::before{ background:var(--accent); }
.sh-subitem .ic{ width:16px; height:16px; }
.sh-chev{
  appearance:none; display:grid; place-items:center; width:36px; height:36px; padding:0;
  border:0; border-radius:10px; background:transparent; color:var(--ink-2); cursor:pointer;
  transition:background 160ms var(--ease),color 160ms var(--ease);
}
.sh-chev:hover{ color:var(--ink); background:rgba(255,255,255,.08); }
.sh-chev .ic{ width:18px; height:18px; transition:transform 240ms var(--ease); }
.sh-group[data-open="true"] .sh-chev .ic{ transform:rotate(180deg); }
.sh-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  margin-left:auto; padding:0 6px; border-radius:var(--r-pill); background:rgba(216,255,46,.16);
  color:var(--accent); font-size:var(--fs-micro); font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
}
.sh-count[hidden]{ display:none !important; }
.sh-foot{ display:grid; gap:10px; padding:0 12px; }
.sh-user{ min-height:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sh-foot .g-btn{ width:100%; }
.sh-links{ display:flex; flex-wrap:wrap; gap:10px; font-size:var(--fs-caption); color:var(--ink-3); }
.sh-links a:hover{ color:var(--ink); }
.sh-main{ min-width:0; min-height:100dvh; }
.sh-content.g-container{ max-width:none; min-height:100dvh; padding:42px 48px 80px; }
.sh-page-head{ margin:0 auto 28px; max-width:var(--w-admin); }
.sh-content.studio .sh-page-head{ max-width:var(--w-studio); }
.sh-page-head h1{ margin-bottom:6px; }
.sh-page-head p{ max-width:60ch; }
.sh-panels{ max-width:var(--w-admin); margin:0 auto; }
.sh-content.studio .sh-panels{ max-width:var(--w-studio); }
.sh-panels > [hidden]{ display:none !important; }
.sh-skeleton-state{ display:grid; gap:12px; max-width:var(--w-admin); margin:0 auto; }
.sh-content.studio .sh-skeleton-state{ max-width:var(--w-studio); }
.sh-skeleton-state .g-skeleton-row{ height:112px; border-radius:var(--r-card); }
.sh-top{ display:none; }
.sh-scrim{ display:block; position:fixed; inset:0; z-index:150; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity 240ms var(--ease); }
.sh-inline-filter{ display:inline-flex; gap:12px; align-items:center; margin:0 0 14px; font-size:var(--fs-caption); color:var(--ink-3); }
.sh-inline-filter button{ appearance:none; padding:0 0 3px; border:0; border-bottom:1px solid transparent; background:none; color:inherit; font:inherit; cursor:pointer; }
.sh-inline-filter button.is-active{ color:var(--ink); border-bottom-color:var(--accent); }
.sh-lazy-list{ content-visibility:auto; contain-intrinsic-size:auto 320px; }

@media (max-width:899px){
  .sh-app{ display:block; }
  .sh-side{
    position:fixed; left:0; top:0; width:min(var(--w-side),calc(100vw - 32px));
    transform:translateX(-105%); opacity:0; transition:transform 240ms var(--ease),opacity 240ms var(--ease);
    box-shadow:24px 0 70px rgba(0,0,0,.42);
  }
  .sh-app[data-drawer-open="true"] .sh-side{ z-index:200; }
  .sh-app[data-drawer-open="true"] .sh-side{ transform:translateX(0); opacity:1; }
  .sh-app[data-drawer-open="true"] .sh-scrim{ opacity:1; pointer-events:auto; }
  .sh-top{
    position:sticky; top:0; z-index:220; display:flex; align-items:center; gap:12px;
    min-height:56px; padding:10px 16px; background:rgba(12,12,15,.72);
    border-bottom:1px solid var(--stroke); -webkit-backdrop-filter:blur(var(--blur)) saturate(170%);
    backdrop-filter:blur(var(--blur)) saturate(170%);
  }
  .sh-top button{ appearance:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:10px; background:rgba(255,255,255,.07); color:var(--ink); cursor:pointer; }
  .sh-top-brand{ display:flex; flex-direction:column; min-width:0; }
  .sh-top-brand b{ font-size:var(--fs-sub); }
  .sh-top-brand small{ color:var(--ink-3); font-size:var(--fs-micro); }
  .sh-top-user{ margin-left:auto; max-width:35vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sh-content.g-container{ padding:28px 16px 64px; }
  .sh-page-head,.sh-panels,.sh-skeleton-state{ max-width:none; }
}

/* ── 재사용 유틸: 밀도 행 (모션 관리), 메타 dl, 체크 그리드, 코드 블록 ──
   전부 var(--panel) 단색 — .g-card 안에 놓아도 유리가 겹치지 않는다. */
.g-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-radius:14px; background:var(--panel); border:1px solid var(--stroke);
}
.g-row + .g-row{ margin-top:8px; }
.g-row-thumb{ flex:none; width:48px; height:48px; border-radius:10px; overflow:hidden; background:rgba(255,255,255,.06); }
.g-row-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.g-row-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.g-row-title{ font-size:var(--fs-sub); font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.g-row-id{ font:var(--fs-micro)/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ink-3); }
.g-row-meta{ flex:none; font-size:var(--fs-micro); color:var(--ink-3); }
.g-row-actions{ flex:none; display:flex; align-items:center; gap:6px; }
@media (hover:hover) and (pointer:fine){ .g-row:hover{ border-color:var(--ink-3); } }

.g-dl{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px 20px; font-size:var(--fs-sub); }
.g-dl-item dt{ font-size:var(--fs-micro); color:var(--ink-3); margin-bottom:2px; }
.g-dl-item dd{ margin:0; color:var(--ink); }

.g-check-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; }
.g-check-item{ display:flex; align-items:flex-start; gap:8px; font-size:var(--fs-sub); color:var(--ink-2); line-height:1.4; }
.g-check-item .mark{
  flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; font-style:normal; font-size:11px; font-weight:800;
  background:rgba(255,255,255,.08); color:var(--ink-3);
}
.g-check-item.ok .mark{ background:rgba(90,208,122,.18); color:var(--ok); }
.g-check-item.danger .mark{ background:rgba(255,107,107,.18); color:var(--danger); }
.g-check-item.warn .mark{ background:rgba(255,204,77,.18); color:var(--warn); }

/* max-width·min-width가 없으면 `white-space:pre` 한 줄짜리 긴 내용이 부모를
   밀어내 **페이지 전체가 가로로 삐져나온다**(overflow-x:auto는 요소 너비가
   부모에 묶여 있을 때만 동작한다). flex/grid 안에서는 min-width의 기본값
   auto가 축소를 막으므로 0으로 눌러 준다. */
.g-code{
  display:block; background:var(--panel); border:1px solid var(--stroke); border-radius:12px;
  padding:14px 16px; font:var(--fs-caption)/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink-2); overflow-x:auto; white-space:pre;
  max-width:100%; min-width:0;
}
/* 코드가 아니라 **문장**을 담는 블록(예: AI 프롬프트) — 가로 스크롤 대신 접는다. */
.g-code.wrap{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* 재제출 타임라인(세로 점선, 시각·메모) */
.g-timeline{ display:grid; gap:0; margin:0; padding:0; list-style:none; }
.g-timeline li{
  position:relative; padding:0 0 16px 20px; border-left:1px dashed var(--stroke);
  font-size:var(--fs-caption); color:var(--ink-2); line-height:1.55;
}
.g-timeline li:last-child{ border-left-color:transparent; padding-bottom:0; }
.g-timeline li::before{
  content:""; position:absolute; left:-4.5px; top:2px;
  width:8px; height:8px; border-radius:50%; background:var(--ink-3);
}
.g-timeline li.danger::before{ background:var(--danger); }
.g-timeline li.ok::before{ background:var(--ok); }
.g-timeline time{ display:block; font-size:var(--fs-micro); color:var(--ink-3); margin-bottom:2px; }

/* ── 반응형 (AC-3: 375px에서 가로 스크롤 0) ─────────────────────────── */
@media (max-width:600px){
  .g-container{ padding-left:16px; padding-right:16px; }
  .g-bar{ padding:12px 16px; }
  .g-dl{ grid-template-columns:1fr; }
  .g-check-grid{ grid-template-columns:1fr; }
  .g-card{ padding:18px; border-radius:20px; }
}

/* ── 접근성 폴백 (3종 전부 필수, AC-2) ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .g-btn, .g-row, .g-input, .g-dropzone, .g-chip, .sh-sub, .sh-chev .ic, .sh-side, .sh-scrim{ transition:none; }
  .g-btn:active{ transform:none; }
  .g-tab-in-right, .g-tab-in-left, .g-tab-out-right, .g-tab-out-left{
    --g-slide:0px; animation-duration:200ms; animation-timing-function:linear;
  }
  .g-skeleton{ animation:none; opacity:.7; }
}

@media (prefers-reduced-transparency:reduce){
  .g-card, .g-bar, .sh-side, .sh-top{
    background:#121214; -webkit-backdrop-filter:none; backdrop-filter:none;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .bg-field{ background:var(--bg); }
}

@media (prefers-contrast:more){
  :root{ --stroke:rgba(255,255,255,.5); --ink-2:rgba(245,245,247,.82); --ink-3:rgba(245,245,247,.62); }
  .g-card, .g-panel, .g-input, .g-row, .g-chip, .g-btn.secondary, .sh-item.is-active, .sh-subitem.is-active{ border-width:1.5px; }
}

/* ── [hidden] 복원 (AC-11에서 발견한 함정의 근본 수정) ──────────────────
   위 컴포넌트들이 display를 명시하는 순간, UA 기본 스타일시트의
   `[hidden]{display:none}`은 **특이도와 무관하게** 저자 스타일에 밀린다
   (저자 > UA). 그래서 hidden 속성을 준 요소가 그대로 보이는 버그가 났다.
   소비 페이지마다 !important로 우회하는 대신 여기서 한 번만 되돌린다 —
   이 스타일시트를 쓰는 새 페이지가 같은 함정을 다시 밟지 않도록. */
[hidden]{ display:none !important; }