* { box-sizing: border-box; }

:root{
  --ui-font: "GenJyuuGothicX", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --ui-weight: 900;
}

html, body{
  font-family: var(--ui-font);
  font-weight: var(--ui-weight);
  font-synthesis-weight: none;
}

:root {
  --tabs-h: 36px;
  --vh: 1vh;                            
  --appH: calc(var(--vh) * 100);
  --halfH: calc(var(--vh) * 50);
  --tp-h: calc(100% - var(--tabs-h));   
}

#app {
  display: grid;
  height: var(--appH);                  
  grid-template-rows: var(--halfH) 1fr; 
  min-height: 0;                         
}

@supports (height: 100svh) {
  #app {
    height: 100svh;
    grid-template-rows: 54svh 1fr;
  }
}
@supports (height: 100dvh) and (not (height: 100svh)) {
  #app {
    height: 100dvh;
    grid-template-rows: 54dvh 1fr;
  }
}

#preview {
  position: relative;
  background: #fff;
  display: grid;
  place-items: center;
  border-bottom: 1px solid #eaeaea;
}

#stage {
  width: 100%;
  height: 100%;
  display: block;
}

#panel {
  position: relative;       
  display: block;          
  background: #fff;
  min-height: 0;
  overflow: hidden;       
}

#tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: var(--tabs-h);
  border-bottom: 1px solid #eee;
  z-index: 1;
}

#tabs .tab {
  border: 0;
  background: #fff;
  color: #888;
  cursor: pointer;

  font-family: "GenJyuuGothicX", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-synthesis-weight: none; 
  line-height: var(--tabs-h);  
}

#tabs .tab.active {
  color: #0ac2ff;
  border-bottom: 2px solid #A6FFFF;
}
#tabs .tab:disabled { color: #ccc; }

.tabpanel {
  position: absolute;
  left: 0; right: 0;
  top: var(--tabs-h);
  height: var(--tp-h);                    
  display: none;

  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 20px;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.tabpanel.active { display: block; }

.tabpanel::after {
  content: "";
  display: block;
  height: max(40px, env(safe-area-inset-bottom));
}

.row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
}
.row .label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 800; color: #ffff0a;
  min-width: 70px;
}
.row .palette { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #e4e4e4; cursor: pointer;
}
.swatch.selected { outline: 2px solid #ffff0a; }

.slider-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: center; padding: 4px 0 14px;
}
.value {
  min-width: 40px; text-align: right; color: #666; font-variant-numeric: tabular-nums;
}

#selection {
  position: absolute;
  pointer-events: none;
  border: 2px dashed #7ad;
  border-radius: 10px;
}

#preview, #stage {
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
#preview { overscroll-behavior: contain; }

.handle{
  position: absolute;
  width: 35px; height: 35px;
  display: none;
  place-items: center;
  pointer-events: auto;
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border: none; box-shadow: none; background-color: transparent;
}
 #handle-delete { background-image: url("/assets/ui/handles/delete.png"); }
 #handle-copy   { background-image: url("/assets/ui/handles/copy.png"); }
 #handle-rotate { background-image: url("/assets/ui/handles/rotate.png"); }
 #handle-scale  { background-image: url("/assets/ui/handles/scale.png"); }
@media (min-width: 1024px){ .handle{ width: 36px; height: 36px; } }

.no-zoom-input,
#tab-text input:not([type="range"]),
#tab-text select,
#tab-text textarea {
  font-size: 16px !important;
  line-height: 1.2;
  min-height: 36px;
}

@supports (font-size: clamp(1px, 2px, 3px)) {
  .no-zoom-input {
    font-size: clamp(16px, 2.8vw, 20px) !important; 
  }
}

@supports (-webkit-touch-callout: none) {
  input:not([type="range"]),
  select,
  textarea {
    font-size: 17px !important;
    line-height: 1.2;          
    min-height: 36px;          
  }
}
input:not([type="range"]),
select,
textarea {
  font-size: 17px;         
  line-height: 1.2;
  min-height: 36px;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, a, [role="button"] {
  touch-action: manipulation;
}

html, body { overflow: hidden; overscroll-behavior-x: none; }
#app { overflow: hidden; }

#preview { overflow: hidden; }

#preview, #panel, #tabs, .tabpanel, #stage { min-width: 0; }
#tabs { overflow: hidden; }
#tabs .tab { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tabpanel img, .tabpanel canvas, .tabpanel svg, .tabpanel video {
  max-width: 100%; height: auto; display: block;
}
.tabpanel input, .tabpanel button, .tabpanel select, .tabpanel textarea { max-width: 100%; }
.tabpanel * { min-width: 0; word-break: break-word; }

#stage { position: relative; z-index: 1; }
#selection, .handle { z-index: 2; }




#tab-text .scroll,
#tab-text .scroll-inner,
#tab-text .panel-body,
#tab-text .list,
#tab-text [data-scroll],
#tab-text [style*="overflow"] {
  overflow: visible !important;
  max-height: none !important;
}

#tab-text, #tab-text * { min-width: 0; }


.img-btn:active{ transform: translateY(1px) scale(.98); }
.img-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.stage-undo-redo{
  position:absolute; left:10px; top:10px;
  display:flex; gap:8px; z-index:20; pointer-events:auto;
}
.stage-zstack{
  position:absolute; right:10px; bottom:10px;
  display:flex; flex-direction:column; gap:8px;
  z-index:20; pointer-events:auto;
}

.stage-btn{
  width:44px; height:44px; padding:0;
  border:none; background:transparent; cursor:pointer;
}
.stage-btn[disabled]{ opacity:.5; filter:grayscale(.4); pointer-events:none; }



#preview { position: relative; }

#preview-toolbar{
  position: absolute;
  inset: 0;
  z-index: 2000;
  pointer-events: none;     
}
#preview-toolbar > button{
  position: absolute;
  pointer-events: auto;    
}
#stage { position: relative; z-index: 1; }            
#selection, .handle { z-index: 2; }                   

#uchiwa_bg { display: none !important; }
#uchiwa_bg.front { display: none !important; }