@font-face{
  font-family:PhotoSans;
  src:url('../assets/css/fonts/NanumSquareR.woff') format('woff');
  font-weight:400;
  font-display:swap
}
@font-face{
  font-family:PhotoSans;
  src:url('../assets/css/fonts/NanumSquareB.woff') format('woff');
  font-weight:700;
  font-display:swap
}
@font-face{
  font-family:PhotoSans;
  src:url('../assets/css/fonts/NanumSquareEB.woff') format('woff');
  font-weight:800;
  font-display:swap
}
:root{
  --paper:#faf9f6;
  --desk:#f0efeb;
  --ink:#262a27;
  --secondary:#626a64;
  --muted:#798079;
  --line:#d9dcd5;
  --soft:#e8e9e4;
  --accent:#37664b;
  --tint:#eaf0e9;
  --error:#a3382b;
  --control:#fff;
  --radius:8px
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 PhotoSans,system-ui,sans-serif;
  word-break:keep-all
}
button,input,textarea{
  font:inherit
}
button,a,input,textarea{
  -webkit-tap-highlight-color:transparent
}
button,a{
  -webkit-touch-callout:default
}
a{
  color:inherit;
  text-underline-offset:4px
}
button{
  cursor:pointer
}
button:disabled{
  opacity:.45;
  cursor:default
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,canvas:focus-visible{
  outline:3px solid #83a48d;
  outline-offset:3px
}
[hidden]{
  display:none!important
}
.skip{
  position:absolute;
  left:16px;
  top:-60px;
  background:var(--ink);
  color:#fff;
  padding:8px;
  z-index:10
}
.skip:focus{
  top:8px
}
.site-head{
  max-width:1120px;
  margin:auto;
  padding:20px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px
}
.brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-weight:700;
  font-size:15px
}
.brand img{
  width:32px;
  height:32px;
  object-fit:contain
}
.back{
  font-size:13px;
  color:var(--secondary);
  text-decoration:none
}
.tool-nav{
  border-block:1px solid var(--soft);
  background:var(--paper)
}
.tool-nav>div{
  max-width:1072px;
  display:flex;
  gap:4px;
  margin:auto;
  overflow:auto;
  padding:0 0;
  scrollbar-width:thin
}
.tool-nav a{
  flex-shrink:0;
  text-decoration:none;
  font-size:14px;
  color:var(--secondary);
  padding:14px 17px;
  border-bottom:2px solid transparent
}
.tool-nav a[aria-current]{
  color:var(--accent);
  font-weight:700;
  border-color:var(--accent)
}
.tool-nav a:hover{
  background:var(--tint)
}
main{
  max-width:1120px;
  margin:auto;
  padding:32px 24px 56px
}
.intro{
  margin-bottom:24px
}
.intro h1{
  font-size:clamp(26px,4vw,34px);
  line-height:1.25;
  letter-spacing:-1.1px;
  margin:0 0 10px
}
.intro p{
  margin:0;
  color:var(--secondary);
  font-size:15px;
  max-width:720px
}
.intro .eyebrow{
  font-size:12px;
  color:var(--accent);
  margin-bottom:10px;
  letter-spacing:.03em
}
.workspace{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--control)
}
.toolbar{
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap
}
.button{
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 16px;
  min-height:44px;
  color:var(--ink);
  background:var(--control);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap
}
.button:hover:not(:disabled){
  background:var(--desk)
}
.button.primary{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent)
}
.button.primary:hover:not(:disabled){
  background:#2d543e
}
.button.dark{
  background:var(--ink);
  color:white;
  border-color:var(--ink)
}
.button.dark:hover:not(:disabled){
  background:#3b423c
}
.quiet{
  border:0;
  background:none;
  color:var(--secondary);
  padding:8px;
  font-size:13px;
  min-height:40px
}
.quiet:hover:not(:disabled){
  color:var(--ink);
  text-decoration:underline
}
.upload-hint{
  font-size:12px;
  color:var(--secondary);
  margin-left:auto
}
.desk{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px
}
.preview-side{
  min-width:0;
  background:var(--desk);
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start
}
.stage{
  min-height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  border:1px solid #dddeda;
  background-color:#f8f8f5;
  background-image:linear-gradient(45deg,#eaece7 25%,transparent 25%),linear-gradient(-45deg,#eaece7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eaece7 75%),linear-gradient(-45deg,transparent 75%,#eaece7 75%);
  background-size:20px 20px;
  background-position:0 0,0 10px,10px -10px,-10px 0;
  overflow:hidden
}
.stage.dragging{
  outline:3px solid var(--accent);
  outline-offset:-3px
}
.stage canvas{
  display:block;
  max-width:100%;
  max-height:500px;
  width:auto;
  height:auto;
  object-fit:contain;
  touch-action:pan-y
}
.stage canvas.editable{
  touch-action:none;
  cursor:move
}
.empty{
  width:100%;
  min-height:300px;
  background:var(--desk);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px
}
.sample-photo{
  width:190px;
  height:128px;
  object-fit:cover;
  border:8px solid #fff;
  transform:rotate(-4deg);
  margin-bottom:22px
}
.empty strong{
  font-size:17px
}
.empty p{
  color:var(--secondary);
  font-size:13px;
  margin:6px 0 0
}
.preview-caption{
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:var(--secondary);
  font-size:12px;
  margin-top:12px
}
.preview-caption span{
  overflow-wrap:anywhere;
  word-break:break-word
}
.settings{
  padding:20px;
  min-width:0;
  border-left:1px solid var(--line);
  background:var(--control)
}
.settings h2{
  font-size:15px;
  margin:0 0 20px
}
.field{
  margin:0 0 20px
}
.field>label,.field>legend{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:8px
}
.field small,.note{
  font-size:12px;
  color:var(--secondary);
  display:block;
  line-height:1.65;
  margin-top:8px
}
.field fieldset{
  margin:0;
  padding:0;
  border:0
}
fieldset.field{
  border:0;
  padding:0;
  min-width:0
}
.choices{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.choice{
  position:relative;
  display:inline-flex;
  flex:1;
  min-width:max-content;
  cursor:pointer
}
.choice input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px
}
.choice span{
  border:1px solid var(--line);
  width:100%;
  padding:9px 10px;
  text-align:center;
  border-radius:5px;
  font-size:12px;
  background:#fff
}
.choice input:checked+span{
  background:var(--tint);
  border-color:#8da694;
  color:var(--accent);
  font-weight:700
}
.choice input:focus-visible+span{
  outline:3px solid #83a48d;
  outline-offset:2px
}
input[type=number],textarea,.news-tag-input{
  width:100%;
  border:1px solid #bdc4bc;
  background:var(--control);
  color:var(--ink);
  border-radius:5px;
  padding:10px 12px;
  min-width:0
}
input[type=number]{
  font-variant-numeric:tabular-nums
}
textarea{
  resize:vertical;
  min-height:76px;
  line-height:1.45;
  word-break:break-word;
  font-size:14px
}
input[type=range]{
  width:100%;
  accent-color:var(--accent);
  height:24px;
  margin:0
}
input[type=color]{
  border:1px solid var(--line);
  background:#fff;
  width:100%;
  height:40px;
  border-radius:4px
}
input[type=checkbox]{
  accent-color:var(--accent);
  width:16px;
  height:16px;
  vertical-align:middle
}
.check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px
}
.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.unit{
  display:flex;
  align-items:center;
  gap:8px
}
.unit span{
  font-size:12px;
  color:var(--secondary)
}
.presets{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px
}
.preset{
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:4px;
  font-size:12px;
  padding:6px 9px;
  min-height:34px
}
.preset:hover{
  border-color:var(--accent);
  color:var(--accent)
}
.actions{
  padding:16px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  border-top:1px solid var(--line);
  flex-wrap:wrap
}
.actions .status{
  font-size:13px;
  color:var(--secondary);
  margin:0;
  flex:1
}
.status[data-error=true]{
  color:var(--error)
}
.film{
  list-style:none;
  display:flex;
  gap:10px;
  margin:20px 0 0;
  padding:0 0 8px;
  overflow:auto
}
.film li{
  background:var(--paper);
  border:1px solid var(--line);
  width:112px;
  flex:0 0 112px;
  padding:6px
}
.film li.selected{
  border-color:var(--accent)
}
.thumb{
  border:0;
  background:none;
  padding:0;
  width:100%;
  display:block;
  text-align:left
}
.thumb img{
  width:98px;
  height:64px;
  object-fit:contain;
  display:block;
  background:white
}
.thumb span{
  display:block;
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin:4px 0
}
.thumb-actions{
  display:flex;
  justify-content:space-between
}
.thumb-actions button{
  font-size:12px;
  background:none;
  border:0;
  min-width:30px;
  height:30px;
  color:var(--secondary)
}
.thumb-actions button:hover{
  background:var(--tint);
  color:var(--ink)
}
.result{
  margin-top:20px;
  border:1px solid #aebfae;
  padding:24px;
  background:#f4f7f1;
  border-radius:8px
}
.result h2{
  font-size:20px;
  margin:0 0 6px
}
.result-summary{
  margin:0 0 16px;
  color:var(--secondary);
  font-size:14px
}
.output-list{
  display:grid;
  gap:12px
}
.output{
  display:grid;
  grid-template-columns:84px minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:14px;
  border:1px solid var(--line);
  background:var(--control);
  min-width:0
}
.output img{
  width:84px;
  height:68px;
  object-fit:contain;
  background:var(--desk)
}
.output strong{
  display:block;
  overflow-wrap:anywhere;
  font-size:14px;
  word-break:break-word
}
.output p{
  font-size:12px;
  color:var(--secondary);
  margin:4px 0
}
.output .paper-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  height:68px;
  background:var(--desk);
  font-size:18px;
  font-weight:700;
  color:var(--secondary)
}
.output .save-group{
  display:flex;
  flex-direction:column;
  gap:6px
}
.output .button{
  font-size:13px
}
.output .gif-preview{
  width:100%;
  height:auto;
  max-height:400px
}
.output.animated{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)
}
.output.animated .save-group{
  grid-column:2
}
.privacy-note{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:18px 0;
  font-size:12px;
  color:var(--secondary);
  border-bottom:1px solid var(--line)
}
.privacy-note strong{
  color:var(--ink);
  white-space:nowrap
}
.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  margin:40px 0
}
.info-grid h2,.more-tools h2{
  font-size:18px;
  margin:0 0 16px
}
.steps{
  padding-left:20px;
  margin:0;
  color:var(--secondary);
  font-size:14px
}
.steps li{
  padding:0 0 10px 4px
}
.info-grid p{
  color:var(--secondary);
  font-size:13px;
  margin:0 0 12px
}
.faq details{
  border-bottom:1px solid var(--line);
  padding:12px 0
}
.faq summary{
  cursor:pointer;
  font-size:14px;
  font-weight:700
}
.faq details p{
  margin-top:10px;
  line-height:1.8
}
.ad-wrap{
  margin:32px auto;
  max-width:970px;
  min-height:100px;
  clear:both
}
.ad-label{
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-bottom:8px
}
.ad-wrap ins{
  display:block
}
.more-tools{
  border-top:1px solid var(--line);
  padding-top:24px
}
.more-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.more-links a{
  text-decoration:none;
  font-size:13px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:5px
}
.more-links a:hover{
  background:var(--tint)
}
footer{
  max-width:1072px;
  margin:0 auto;
  padding:24px 0 40px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  color:var(--secondary);
  font-size:12px
}
footer nav{
  display:flex;
  gap:18px
}
footer a{
  text-decoration:none
}
noscript p{
  padding:20px;
  border:1px solid var(--line)
}
@media(min-width:850px){
  body[data-tool=meme] .stage{
    min-height:400px
  }
}
@media(max-width:760px){
  .site-head{
    padding:14px 16px
  }
  .brand{
    font-size:14px
  }
  .back{
    font-size:12px
  }
  .tool-nav>div{
    padding-inline:4px
  }
  .tool-nav a{
    font-size:12px;
    padding:12px
  }
  .desk{
    grid-template-columns:1fr
  }
  .settings{
    border-left:0;
    border-top:1px solid var(--line);
    padding:20px
  }
  .settings h2{
    margin-bottom:16px
  }
  .settings .field{
    margin-bottom:16px
  }
  .preview-side{
    padding:16px
  }
  .stage{
    min-height:230px
  }
  .stage canvas{
    max-height:420px
  }
  .empty{
    min-height:230px
  }
  .sample-photo{
    width:160px;
    height:104px;
    margin-bottom:16px
  }
  .intro h1{
    font-size:28px
  }
  .intro p{
    font-size:14px
  }
  main{
    padding:24px 16px 32px
  }
  .toolbar{
    padding:12px;
    gap:6px
  }
  .upload-hint{
    width:100%;
    margin:0;
    font-size:11px
  }
  .toolbar .button{
    padding:9px 12px
  }
  .toolbar .quiet{
    font-size:12px;
    padding:6px
  }
  .actions{
    padding:16px
  }
  .actions .button{
    flex:1
  }
  .actions .status{
    flex:1 0 100%;
    order:3
  }
  .result{
    padding:16px
  }
  .output{
    gap:10px;
    grid-template-columns:60px minmax(0,1fr)
  }
  .output img{
    width:60px;
    height:60px
  }
  .output .save-group{
    grid-column:1/-1;
    flex-direction:row
  }
  .output .save-group>*{
    flex:1
  }
  .output.animated{
    grid-template-columns:1fr
  }
  .output.animated .save-group{
    grid-column:auto
  }
  .output.animated .gif-preview{
    max-height:300px
  }
  .privacy-note{
    display:block
  }
  .privacy-note strong{
    display:block;
    margin-bottom:4px
  }
  .info-grid{
    grid-template-columns:1fr;
    gap:28px;
    margin:32px 0
  }
  .field .two{
    gap:12px
  }
  footer{
    margin:0 16px;
    padding:20px 0 32px
  }
  .ad-wrap{
    max-width:100%
  }
  .more-links{
    gap:6px
  }
  .more-links a{
    font-size:12px;
    padding:8px 10px
  }
}
@media(prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important
  }
}
.media-options {
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
  border: 0;
}
.video-legend {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.clip-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -8px 0 20px;
}
#video-mount {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #171b18;
}
#video-mount video {
  display: block;
  width: 100%;
  max-height: 480px;
  object-fit: contain;
}
.video-decoder {
  position: fixed;
  width: 2px;
  height: 2px;
  opacity: 0;
  pointer-events: none;
}
.bubble-editor{
  margin:0;
  padding:0;
  border:0;
  min-width:0
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
.bubble-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:16px
}
.bubble-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.bubble-tab{
  border:1px solid var(--line);
  background:var(--control);
  border-radius:5px;
  padding:8px 10px;
  font-size:12px;
  min-height:36px
}
.bubble-tab[aria-pressed=true]{
  color:var(--accent);
  border-color:#8da694;
  background:var(--tint);
  font-weight:700
}
.bubble-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px
}
.bubble-label label{
  font-size:13px;
  font-weight:700
}
.bubble-label .quiet{
  padding:0;
  min-height:28px;
  font-size:11px
}
.bubble-editor .choices{
  display:grid;
  grid-template-columns:1fr 1fr
}
.bubble-editor .choice:last-child{
  grid-column:1 / -1
}
.position-details{
  border-top:1px solid var(--line);
  padding-top:12px
}
.position-details summary{
  font-size:13px;
  cursor:pointer;
  color:var(--secondary);
  margin-bottom:12px
}