/* AdHatch UI shell — 2026-09-03
   현재 정보 구조·id·이벤트는 손대지 않고 겉모양만 Motion Lighttable 방향으로 맞춘다.
   사진이 주인공인 밝은 갤러리, 항상 어두운 미리보기 무대, 두 겹 윤곽의 눌리는 컨트롤.
   새 색을 만들지 않고 app.css 의 승인 토큰만 사용한다. */

:root{
  --shell-r:18px;
  --shell-edge:rgba(21,19,18,.13);
  --shell-hi:rgba(255,255,255,.92);
  --shell-shadow:0 12px 34px rgba(21,19,18,.11);
  --shell-press:translateY(1px) scale(.97);
}
html[data-theme="dark"]{
  --shell-edge:rgba(255,255,255,.14);
  --shell-hi:rgba(255,255,255,.12);
  --shell-shadow:0 16px 38px rgba(0,0,0,.34);
}

body{
  letter-spacing:-.012em;
  background:var(--bg);
}
.wrap{
  position:relative;
  isolation:isolate;
  background:var(--bg);
}

/* Web creation is a task inside the customer workspace, with one exit. */
.creator-toolbar{display:none}
body.creator-route{--navh:0px}
.creator-route.creator-loading .wrap{visibility:hidden}
.creator-route .creator-toolbar{display:flex;flex:0 0 auto;padding:calc(env(safe-area-inset-top) + 8px) 18px 0}
.creator-route .creator-toolbar a{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:650}
.creator-route .creator-toolbar svg{width:18px;height:18px;flex:0 0 auto}
.creator-route .creator-toolbar a:hover{color:var(--ink)}
.creator-route .creator-toolbar a:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.creator-route nav,.creator-route #gearBtn,.creator-route #flowX,.creator-route #edRecopy,
.creator-route .mc-set{display:none!important}
.creator-route header{padding-top:8px}
.creator-route main{padding-bottom:calc(env(safe-area-inset-bottom) + 24px)}
.creator-route .bar{bottom:0;padding-bottom:env(safe-area-inset-bottom)}

/* ── 공통 머리글: 기존 한 줄/두 줄 모드는 그대로 ─────────────────── */
header{
  gap:10px;
  padding:calc(env(safe-area-inset-top) + 15px) 18px 10px;
}
header h1{
  font-size:27px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.055em;
}
.iconbtn,
.denpick button{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid var(--shell-hi);
  background:var(--card);
  box-shadow:inset 0 0 0 1px var(--shell-edge),inset 0 1px 0 var(--shell-hi),0 7px 18px rgba(21,19,18,.08);
}
.iconbtn:active,
.denpick button:active{transform:var(--shell-press);filter:brightness(.95)}

header[data-mode="tabs"]{
  row-gap:10px;
  padding-bottom:9px;
}
header[data-mode="tabs"] .denpick{order:1;margin-right:auto;gap:7px}
header[data-mode="tabs"] #gearBtn{order:2}
header[data-mode="tabs"] .tabs{
  order:3;
  flex-basis:100%;
  gap:8px;
  margin-top:1px;
  padding:1px 0 2px;
}
.tab{
  min-height:38px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--card);
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.02em;
}
.tab.on{
  color:var(--bg);
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.tab.on::after{display:none}
.tab:active{transform:var(--shell-press)}

main{padding:12px 18px 118px}

/* ── 템플릿 갤러리: 카드 하나가 광고 한 편처럼 보이게 ─────────────── */
.bento,
.bento[data-den="2"]{gap:11px}
.tile{
  min-width:0;
  border-radius:var(--shell-r);
  border:1px solid rgba(255,255,255,.9);
  background:#0E0D0B;
  color:#fff;
  box-shadow:inset 0 0 0 1px rgba(21,19,18,.14),0 9px 24px rgba(21,19,18,.12);
}
.tile:active{transform:var(--shell-press);box-shadow:0 4px 12px rgba(21,19,18,.12)}
.tile .swatch,
.bento[data-den="2"] .tile .swatch,
.bento[data-den="2"] .tile video{
  aspect-ratio:9/16;
  min-height:0;
}
.tile.wide .swatch,
.tile.wide video{
  aspect-ratio:16/10;
  max-height:300px;
}
.tile .swatch::after{
  content:"";
  position:absolute;
  inset:32% 0 0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,11,0),rgba(14,13,11,.18) 32%,rgba(14,13,11,.91));
}
.tile .swatch img,
.tile .swatch video{transition:transform .42s cubic-bezier(.22,.82,.36,1)}
@media (hover:hover){.tile:hover .swatch img,.tile:hover .swatch video{transform:scale(1.025)}}
.tile .body{
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;
  padding:42px 13px 13px;
  gap:2px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,11,0),rgba(14,13,11,.88) 48%,rgba(14,13,11,.97));
}
.tile .cat{
  color:var(--bright);
  font-size:10px;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
}
.tile h3,
.tile.wide h3{
  color:#fff;
  font-size:15px;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.035em;
}
.tile.wide h3{font-size:20px}
.tile p{color:rgba(255,255,255,.68);font-size:12px;line-height:1.4}
.tile .go{
  padding-top:7px;
  color:rgba(255,255,255,.72);
  font-size:11.5px;
  font-weight:700;
}
.tile .glyph{
  top:9px;
  right:9px;
  bottom:auto;
  padding:6px 9px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(14,13,11,.68);
  color:#fff;
  font-size:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.favbtn{
  top:auto;
  right:8px;
  bottom:8px;
  z-index:3;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(14,13,11,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.favbtn:active{transform:var(--shell-press)}
.bento[data-den="4"] .tile .body{padding:30px 7px 8px}
.bento[data-den="4"] .tile h3{color:#fff;font-weight:900}
.bento[data-den="4"] .tile .swatch,
.bento[data-den="4"] .tile video{aspect-ratio:9/16}
.bento[data-den="4"] .tile .swatch::after{inset:45% 0 0}

/* ── 떠 있는 5탭: 위치와 기능은 그대로, 가장자리만 또렷한 유리 ─────── */
nav{
  left:50%;
  right:auto;
  width:min(100%,520px);
  transform:translateX(-50%);
  padding:0 14px max(10px,env(safe-area-inset-bottom));
}
nav .inner{
  min-height:68px;
  padding:7px 8px;
  border:1px solid var(--shell-hi);
  border-radius:25px;
  background:rgba(255,255,255,.92);
  box-shadow:inset 0 0 0 1px var(--shell-edge),inset 0 1px 0 #fff,var(--shell-shadow);
}
html[data-theme="dark"] nav .inner{
  background:rgba(38,35,34,.94);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,255,255,.16),var(--shell-shadow);
}
nav button{
  min-width:44px;
  min-height:48px;
  padding:8px 0;
  border-radius:17px;
  color:var(--muted);
}
nav button.on{color:var(--ink);background:var(--chip)}
nav button:active{transform:var(--shell-press);filter:brightness(.94)}
nav button.make{background:none}
nav button.make .ic{
  width:48px;
  height:48px;
  border:1px solid #FFD84D;
  box-shadow:inset 0 0 0 1px rgba(94,68,0,.22),inset 0 2px 0 rgba(255,255,255,.64),0 8px 18px rgba(160,110,0,.24);
}
nav button.make:active .ic{transform:translateY(1px) scale(.95);filter:brightness(.92)}
nav svg{width:22px;height:22px}
nav .dot{top:7px}

/* ── 미리보기: 현재 전체화면 구조를 유지한 채 컨트롤 재질만 통일 ───── */
.sheet-card{background:#0B0A09}
.sheet video{
  top:0;
  right:0;
  bottom:258px;
  left:0;
  width:100%;
  height:auto;
  background:#0B0A09;
}
.sheet-x,
.sndbtn{
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(20,18,16,.82);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.16),0 8px 20px rgba(0,0,0,.28);
}
.sheet-x:active,.sndbtn:active{transform:var(--shell-press);filter:brightness(.9)}
#sheet .sheet-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 48px;
  grid-template-rows:auto auto auto auto auto auto;
  column-gap:10px;
  row-gap:3px;
  padding:19px 20px calc(env(safe-area-inset-bottom) + 14px);
  border:1px solid rgba(255,255,255,.9);
  border-bottom:0;
  border-radius:24px 24px 0 0;
  background:var(--bg);
  box-shadow:inset 0 1px 0 #fff,0 -16px 40px rgba(0,0,0,.22);
}
#sheetCat{
  grid-column:1;
  grid-row:1;
  color:var(--ink);
  font-size:24px;
  line-height:1.08;
  letter-spacing:-.045em;
}
#sheetTitle{
  grid-column:1;
  grid-row:2;
  color:var(--muted);
  margin-top:2px;
  font-size:13px;
  font-weight:700;
}
#sheetMeta{
  grid-column:1/-1;
  grid-row:3;
  margin-top:7px;
}
#sheetMeta span{color:var(--muted)}
#sheetMeta span+span::before{color:var(--muted)}
#sheetDesc{
  grid-column:1/-1;
  grid-row:4;
  color:var(--muted);
  margin-top:3px;
  font-size:12.5px;
  line-height:1.4;
}
#sheetFav{
  grid-column:2;
  grid-row:1/3;
  color:var(--ink);
  background:var(--card);
  border-color:var(--line);
}
#sheetFav.on{color:var(--accTx);border-color:var(--teal)}
#sheetGo{
  grid-column:1/-1;
  grid-row:5;
  width:100%;
  margin-top:12px;
  border:1px solid #FFD84D;
  border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(94,68,0,.22),inset 0 2px 0 rgba(255,255,255,.58),0 10px 24px rgba(0,0,0,.24);
}
#sheetBack{
  grid-column:1/-1;
  grid-row:6;
  color:var(--muted);
  padding:10px;
}

/* ── 장면 편집기: 기능 위치는 그대로, 무대와 도구만 한 제품으로 ───── */
#edBox,
#resStage{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.62),0 16px 40px rgba(21,19,18,.24);
}
.edt-count{
  top:13px;
  font-size:12px;
  letter-spacing:.04em;
}
.edt-rail{right:10px;bottom:16px;gap:9px}
.edt-ri{
  width:48px;
  min-height:48px;
  padding:6px 3px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:15px;
  background:rgba(20,18,16,.70);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12);
  filter:none;
}
.edt-ri.on{color:var(--bright);border-color:rgba(255,201,77,.58)}
.edt-make .b{
  border:1px solid #FFD84D;
  box-shadow:inset 0 0 0 1px rgba(94,68,0,.22),inset 0 2px 0 rgba(255,255,255,.58),0 9px 20px rgba(0,0,0,.38);
}
#edAdd{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(20,18,16,.78);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
}
.edt-sheet{
  left:50%;
  right:auto;
  width:min(100%,520px);
  transform:translate(-50%,calc(100% + var(--navh,63px) + 12px));
  border:1px solid rgba(255,255,255,.16);
  border-bottom:0;
  border-radius:24px 24px 0 0;
  background:rgba(26,24,23,.98);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 -14px 38px rgba(0,0,0,.3);
}
.edt-sheet.on{transform:translate(-50%,0)}
.edt-tabs button.on,
.edt-seg button.on,
.edt-chips button.on{box-shadow:inset 0 0 0 1px rgba(21,19,18,.12),inset 0 1px 0 #fff}

/* ── 일반 화면: 같은 타이포·라운드·눌림 규칙만 공유 ──────────────── */
.modecard,.slot,.tpl,.vid,.prow,.plrow,.wizlist,.field,#editPanel{
  border-radius:16px;
  box-shadow:0 6px 20px rgba(21,19,18,.055);
}
.cta,.ghost,.planbtn,.plgo,.pgo,.wopt{
  border-radius:15px;
}
.cta{
  border:1px solid #FFD84D;
  box-shadow:inset 0 0 0 1px rgba(94,68,0,.20),inset 0 2px 0 rgba(255,255,255,.58),0 10px 24px rgba(160,110,0,.20);
}
.cta:active,.ghost:active,.planbtn:active,.plgo:active,.pgo:active,.wopt:active{transform:var(--shell-press)}
.calhead b,.wizhead b{font-weight:900;letter-spacing:-.03em}
.cd.now{box-shadow:inset 0 0 0 1px var(--line)}

/* 넓은 브라우저에서도 실제 폰 폭을 그대로 보게 한다. 폰에서는 아무 변화가 없다. */
@media (min-width:521px){
  body{background:var(--chip)}
  .wrap{box-shadow:0 0 0 1px rgba(21,19,18,.08),0 24px 70px rgba(21,19,18,.10)}
  .sheet-card{left:50%;right:auto;width:520px;transform:translateX(-50%)}
}

@media (max-width:360px){
  header,main{padding-left:14px;padding-right:14px}
  .tab{padding-left:12px;padding-right:12px}
  nav{padding-left:10px;padding-right:10px}
  .tile .body{padding-left:10px;padding-right:10px}
  .tile h3{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .tile .swatch img,.tile .swatch video{transition:none}
}