/* overwrite UIKit */
[class*=uk-column-] {
  column-gap: 1vw;
}
.uk-grid {
  margin-left: 0;
}
.uk-grid>* {
  padding-left: 0;
}
*+.uk-grid-margin,
  .uk-grid+.uk-grid,
  .uk-grid>.uk-grid-margin {
  margin-top: 0;
}

/* overwrite main.css */
html {
  background-color: #FEF7C0;
}
.padding-button {
  padding: 2vw 4vw;
}
.padding-button img {
  cursor: pointer;
}
.control {
  border: none;
}
.vw-large {
  font-size: 4vw;
}
.vw-normal {
  font-size: 3vw;
}
.vw-small {
  font-size: 2.5vw;
}
.vw-ss {
  font-size: 2vw;
}
.vw-sss {
  font-size: 1vw;
}


#canvas-frame-container {
  width: 100%;
  margin: 0;
  padding: 0;
  background-image: url(/painter/ctv/img/canvas_bg.png);
  background-size: contain;
  background-repeat: no-repeat;
}
/* Insets #canvas-frame (and everything in it: the selected photo and the
   drawing canvas, which sizes itself to fill #canvas-frame at 100%) to the
   840x840 safe area within the 1000x1000 frame: top 125 / left+right 80 /
   bottom 35. This is the only place that inset is defined — app.js reads
   #canvas-frame's own clientWidth with no separate margin config, and the
   posted image is exactly this safe area's content (see app.js post()).
   On its own (non-flex-item) wrapper so the percentages resolve against
   #canvas-frame-container's actual rendered width — on a flex item
   (#canvas-frame-container is a uk-grid child) padding percentages would
   otherwise resolve against the flex container's width instead, which is
   wider than the item itself once other columns share the row. */
#canvas-frame-inset {
  box-sizing: border-box;
  padding: 12.5% 8% 3.5% 8%;
}
#canvas-frame {
  background-color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
canvas {
  border: none;
  background-color: transparent;
  margin: 0;
}
#canvas-control {
  padding-top: 1vw;
  padding-right: 1vw;
  padding-left: 1vw;
}
#canvas-control > table {
  border-collapse: collapse;
}
#canvas-control > table td {
  padding: 4px;
}
/* #posted-image-wrap is the uk-grid flex item; #posted-image-container's
   padding-top: 100% (the square-aspect-ratio trick) needs to be on a plain,
   non-flex-item block to correctly resolve against its parent's actual
   rendered width — same reasoning as #canvas-frame-inset in the canvas
   scene above. On the flex item directly, the percentage would resolve
   against the flex row's full width instead, breaking the square in the
   2-column layout. */
#posted-image-container {
  position: relative;
  background-image: url(/painter/ctv/img/thanks.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
/* Slot matches the reference mockup's red box: bottom-left page area of
   thanks.png, below the "ママへ" panel and left of "推し活仲間へ". Sized to
   match the other 3 photo panels already drawn in thanks.png (~30% square). */
#posted-image {
  position: absolute;
  border: 2px solid #000;
  object-fit: contain;
  background-color: transparent;
  top: 48%;
  left: 20%;
  width: 32%;
  height: 32%;
}
#posted-next-container {
  padding-top: 2vw;
}

/* added styles */
.p-0\.5 {
  padding: 0.5vw;
}
.p-1 {
  padding: 1vw;
}
.pt-0 {
  padding-top: 0;
}
.pb-0 {
  padding-bottom: 0;
}
.pb-1 {
  padding-bottom: 1vw;
}
.px-2 {
  padding-left: 2vw;
  padding-right: 2vw;
}

@media screen and (max-width: 750px) {
  .vw-large {
    font-size: 8vw;
  }
  .vw-normal {
    font-size: 6vw;
  }
  .vw-small {
    font-size: 5vw;
  }
  .vw-ss {
    font-size: 4vw;
  }
  .vw-sss {
    font-size: 2vw;
  }
  #canvas-control {
    padding-top: 1vw;
    padding-right: 2vw;
  }
  .p-0\.5 {
    padding: 1vw;
  }
  .p-1 {
    padding: 2vw;
  }
  .pb-1 {
    padding-bottom: 2vw;
  }
  .px-2 {
    padding-left: 4vw;
    padding-right: 4vw;
  }
  #posted-next-container {
    padding-top: 2vw;
  }
}