@charset "utf-8";
/* ==========================================================================
   움짤 생성기 스튜디오 UI
   - 색상 토큰은 dark-mode.css 의 사이트 공통 변수(--panel/--card/--text …)를
     그대로 물려받아 라이트/다크가 자동으로 따라온다.
   ========================================================================== */

.jms{
	--jms-radius:16px;
	--jms-radius-sm:11px;
	--jms-field:rgba(127,140,170,.10);
	--jms-field-on:rgba(127,140,170,.18);
	--jms-accent:#4f8cff;
	--jms-accent-2:#8b5cf6;
	--jms-stage:#101828;
	text-align:left;
	margin:0 0 28px;
	color:var(--text);
	-webkit-tap-highlight-color:transparent;
}
[data-theme="dark"] .jms{ --jms-field:rgba(255,255,255,.08); --jms-field-on:rgba(255,255,255,.15); }

.jms *{ box-sizing:border-box; }
.jms button{ font-family:inherit; }

/* ── 헤더 ───────────────────────────────────────────── */
.jms-head{
	display:flex; align-items:flex-start; gap:12px;
	padding:16px 18px; margin-bottom:14px;
	background:var(--panel); border:1px solid var(--border);
	border-radius:var(--jms-radius); box-shadow:var(--shadow);
}
.jms-back{
	flex:none; width:34px; height:34px; margin-top:1px;
	display:flex; align-items:center; justify-content:center;
	border-radius:50%; background:var(--jms-field);
	color:var(--text); font-size:13px; text-decoration:none;
	transition:background .15s;
}
.jms-back:hover{ background:var(--jms-field-on); color:var(--text); }
.jms-head-txt{ min-width:0; }
.jms-title{
	margin:0; font-size:19px; font-weight:800; line-height:1.32;
	letter-spacing:-.4px; color:var(--text);
}
.jms-desc{
	margin:5px 0 0; font-size:13.5px; line-height:1.55;
	color:var(--muted); word-break:keep-all;
}

/* ── 본문 그리드 ────────────────────────────────────── */
.jms-body{ display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:860px){
	.jms-body{
		grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
		align-items:start;
	}
	/* 왼쪽 열은 스테이지 + 도움말, 오른쪽 열은 컨트롤 전체 */
	.jms-stage-wrap{ grid-column:1; grid-row:1; position:sticky; top:14px; }
	.jms-controls  { grid-column:2; grid-row:1 / span 2; }
	.jms-help      { grid-column:1; grid-row:2; margin-top:0; }
}

/* ── 스테이지 ───────────────────────────────────────── */
.jms-stage{
	background:var(--panel); border:1px solid var(--border);
	border-radius:var(--jms-radius); box-shadow:var(--shadow);
	padding:12px 12px 10px;
}
.jms-stage-head{
	display:flex; align-items:center; justify-content:space-between;
	gap:8px; margin:0 2px 10px; min-height:26px;
}
.jms-stage-tag{
	font-size:11.5px; font-weight:700; letter-spacing:.2px;
	color:var(--muted); padding:4px 9px; border-radius:999px;
	background:var(--jms-field);
}
.jms-stage-tools{ display:flex; align-items:center; gap:2px; }
.jms-ghost{
	border:0; background:none; cursor:pointer; padding:4px 8px;
	font-size:12.5px; font-weight:700; color:var(--jms-accent);
	display:inline-flex; align-items:center; gap:5px; border-radius:8px;
	white-space:nowrap;
}
.jms-ghost:hover{ background:var(--jms-field); }

.jms-canvas-box{
	position:relative; border-radius:var(--jms-radius-sm); overflow:hidden;
	background:
		linear-gradient(135deg, rgba(79,140,255,.10), rgba(139,92,246,.10)),
		var(--jms-stage);
	display:flex; align-items:center; justify-content:center;
	min-height:180px; padding:10px;
}
#jmsCanvas{
	display:block; width:100%; max-width:420px; height:auto;
	border-radius:8px; touch-action:none; cursor:grab;
	image-rendering:auto;
	box-shadow:0 6px 22px rgba(0,0,0,.34);
}
#jmsCanvas.dragging{ cursor:grabbing; }
.jms-canvas-hint{
	position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
	font-size:11.5px; font-weight:600; letter-spacing:-.1px;
	color:rgba(255,255,255,.9); background:rgba(0,0,0,.5);
	padding:5px 11px; border-radius:999px; pointer-events:none;
	backdrop-filter:blur(3px); white-space:nowrap;
	transition:opacity .25s;
}
.jms-canvas-hint.gone{ opacity:0; }

.jms-busy{
	position:absolute; inset:0; display:flex; flex-direction:column;
	align-items:center; justify-content:center; gap:11px;
	background:rgba(10,16,28,.74); backdrop-filter:blur(2px);
	color:#fff; font-size:13px; font-weight:700; z-index:3;
}
.jms-spin{
	width:26px; height:26px; border-radius:50%;
	border:2.5px solid rgba(255,255,255,.24); border-top-color:#fff;
	animation:jmsSpin .7s linear infinite;
}
@keyframes jmsSpin{ to{ transform:rotate(360deg); } }

.jms-result{
	border-radius:var(--jms-radius-sm); overflow:hidden;
	background:var(--jms-stage); padding:10px;
	display:flex; align-items:center; justify-content:center;
}
.jms-result img{
	display:block; width:100%; max-width:420px; height:auto;
	border-radius:8px; box-shadow:0 6px 22px rgba(0,0,0,.34);
}
.jms-stage-note{
	margin:9px 4px 0; font-size:11.5px; line-height:1.5; color:var(--muted);
}
.jms-stage-note b{ color:var(--text); font-weight:700; }

/* ── 액션 바 ────────────────────────────────────────── */
.jms-actions{ display:flex; gap:8px; margin-top:12px; }
.jms-btn{
	height:48px; padding:0 18px; border:0; border-radius:13px;
	font-size:15px; font-weight:800; letter-spacing:-.3px; cursor:pointer;
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	text-decoration:none; transition:transform .12s, box-shadow .2s, opacity .2s;
}
.jms-btn:active{ transform:translateY(1px); }
.jms-btn-primary{
	flex:1; color:#fff;
	background:linear-gradient(135deg, var(--jms-accent), var(--jms-accent-2));
	box-shadow:0 6px 18px rgba(79,140,255,.34);
}
.jms-btn-primary:hover{ box-shadow:0 8px 22px rgba(79,140,255,.42); }
.jms-btn-primary:disabled{ opacity:.55; cursor:default; box-shadow:none; }
.jms-btn-line{
	flex:none; color:var(--text);
	background:var(--card); border:1px solid var(--border);
}
.jms-btn-line:hover{ background:var(--jms-field); color:var(--text); }
.jms-btn-quiet{
	flex:none; width:48px; padding:0; color:var(--muted);
	background:var(--card); border:1px solid var(--border); font-size:14px;
}
.jms-btn-quiet:hover{ background:var(--jms-field); color:var(--text); }

/* ── 컨트롤 카드 ────────────────────────────────────── */
.jms-controls{ display:flex; flex-direction:column; gap:12px; }
.jms-card{
	background:var(--panel); border:1px solid var(--border);
	border-radius:var(--jms-radius); box-shadow:var(--shadow);
	padding:14px;
}
.jms-card-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.jms-count{
	margin-left:auto; font-size:11.5px; font-weight:700; color:var(--muted);
	font-variant-numeric:tabular-nums;
}
.jms-count b{ color:var(--text); font-weight:800; }
.jms-card-title{ margin:0; font-size:14.5px; font-weight:800; letter-spacing:-.3px; color:var(--text); }
.jms-dot{
	flex:none; width:20px; height:20px; border-radius:7px;
	background:linear-gradient(135deg, var(--jms-accent), var(--jms-accent-2));
	display:flex; align-items:center; justify-content:center;
	font-size:10px; color:#fff;
}
.jms-dot[data-dot="2"]{ background:linear-gradient(135deg,#f97316,#ef4444); }
.jms-dot[data-dot="3"]{ background:linear-gradient(135deg,#10b981,#0891b2); }
.jms-dot[data-dot="4"]{ background:linear-gradient(135deg,#f59e0b,#d97706); }
.jms-dot[data-dot="5"]{ background:linear-gradient(135deg,#ec4899,#be185d); }
.jms-dot[data-dot="6"]{ background:linear-gradient(135deg,#14b8a6,#0f766e); }
.jms-dot[data-dot="7"]{ background:linear-gradient(135deg,#a855f7,#7c3aed); }
.jms-dot-plain{ background:var(--jms-field-on); color:var(--muted); }

.jms-text{
	width:100%; min-height:62px; resize:vertical; padding:11px 12px;
	border:1px solid var(--border); border-radius:var(--jms-radius-sm);
	background:var(--card); color:var(--text);
	font-size:15px; line-height:1.5; font-family:inherit;
	transition:border-color .15s, box-shadow .15s;
}
.jms-text:focus{
	outline:0; border-color:var(--jms-accent);
	box-shadow:0 0 0 3px rgba(79,140,255,.16);
}
.jms-text::placeholder{ color:var(--muted); opacity:.75; }

.jms-row{
	display:flex; align-items:center; gap:9px;
	margin-top:11px; flex-wrap:wrap;
}
.jms-lab{
	flex:none; width:32px; font-size:11.5px; font-weight:700;
	color:var(--muted); letter-spacing:-.2px;
}

/* 색상 스와치 */
.jms-swatches{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.jms-sw{
	width:24px; height:24px; padding:0; border-radius:50%; cursor:pointer;
	background:var(--sw); border:1px solid rgba(127,140,170,.45);
	position:relative; transition:transform .12s;
}
.jms-sw:hover{ transform:scale(1.12); }
.jms-sw.on{ box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--jms-accent); }
.jms-sw-custom{
	display:flex; align-items:center; justify-content:center;
	background:var(--jms-field); border-style:dashed; color:var(--muted);
	font-size:10px; overflow:hidden;
}
/* 팔레트에 없는 색을 쓰고 있으면 이 칩이 그 색을 보여 준다 */
.jms-sw-custom.has-color{ background:var(--sw); border-style:solid; color:transparent; }
.jms-sw-custom input[type=color]{
	position:absolute; inset:0; width:100%; height:100%;
	opacity:0; cursor:pointer; border:0; padding:0;
}

/* 슬라이더 */
.jms-range{
	flex:1; min-width:110px; height:24px; -webkit-appearance:none;
	appearance:none; background:none; cursor:pointer;
}
.jms-range::-webkit-slider-runnable-track{
	height:5px; border-radius:99px; background:var(--jms-field-on);
}
.jms-range::-webkit-slider-thumb{
	-webkit-appearance:none; width:17px; height:17px; margin-top:-6px;
	border-radius:50%; background:#fff; border:2px solid var(--jms-accent);
	box-shadow:0 1px 4px rgba(0,0,0,.28);
}
.jms-range::-moz-range-track{ height:5px; border-radius:99px; background:var(--jms-field-on); }
.jms-range::-moz-range-thumb{
	width:15px; height:15px; border-radius:50%;
	background:#fff; border:2px solid var(--jms-accent);
}
.jms-val{
	flex:none; min-width:26px; text-align:right;
	font-size:12px; font-weight:700; color:var(--muted);
	font-variant-numeric:tabular-nums;
}

/* 위치 패드 */
.jms-pad{
	display:grid; gap:2px; flex:none;
	grid-template-columns:repeat(3,26px); grid-template-rows:repeat(2,24px);
	grid-template-areas:". up ." "left mid right";
}
.jms-pad .up{ grid-area:up; } .jms-pad .left{ grid-area:left; }
.jms-pad .mid{ grid-area:mid; } .jms-pad .right{ grid-area:right; }
.jms-pad .down{ grid-area:up; transform:translateY(26px); }
.jms-pad{ grid-template-rows:repeat(3,24px); grid-template-areas:". up ." "left mid right" ". down ."; }
.jms-pad .down{ grid-area:down; transform:none; }
.jms-pad-b{
	border:1px solid var(--border); background:var(--card); cursor:pointer;
	border-radius:7px; color:var(--muted); font-size:10px;
	display:flex; align-items:center; justify-content:center; padding:0;
	transition:background .12s, color .12s;
}
.jms-pad-b:hover{ background:var(--jms-field); color:var(--text); }
.jms-pad-b:active{ background:var(--jms-field-on); }
.jms-coord{
	font-size:11.5px; font-weight:700; color:var(--muted);
	font-variant-numeric:tabular-nums; min-width:52px;
}

/* 사진 */
.jms-photo{ margin-top:11px; }
.jms-drop{
	display:flex; align-items:center; gap:10px; cursor:pointer;
	padding:11px 13px; border:1.5px dashed var(--border);
	border-radius:var(--jms-radius-sm); background:var(--card);
	color:var(--muted); font-size:13px; font-weight:700;
	transition:border-color .15s, background .15s, color .15s;
}
.jms-drop:hover, .jms-drop.over{
	border-color:var(--jms-accent); background:rgba(79,140,255,.07); color:var(--text);
}
.jms-drop i{ font-size:15px; }
.jms-drop-txt{ display:flex; flex-direction:column; line-height:1.3; }
.jms-drop-txt em{ font-style:normal; font-size:11px; font-weight:600; color:var(--muted); opacity:.85; }

.jms-thumb{
	display:flex; align-items:center; gap:11px;
	padding:9px 11px; border:1px solid var(--border);
	border-radius:var(--jms-radius-sm); background:var(--card);
}
.jms-thumb img{
	flex:none; width:46px; height:46px; object-fit:contain;
	border-radius:8px; background:var(--jms-field);
}
.jms-thumb-ctl{ flex:1; display:flex; align-items:center; gap:8px; min-width:0; }
.jms-thumb-del{
	flex:none; width:28px; height:28px; border-radius:8px; cursor:pointer;
	border:1px solid var(--border); background:var(--panel);
	color:var(--muted); font-size:12px;
}
.jms-thumb-del:hover{ color:var(--danger); border-color:var(--danger); }

/* 속도 세그먼트 */
.jms-seg{
	display:flex; gap:4px; padding:4px;
	background:var(--jms-field); border-radius:12px; flex-wrap:wrap;
}
.jms-seg-b{
	flex:1 1 auto; min-width:60px; height:34px; padding:0 10px;
	border:0; border-radius:9px; cursor:pointer; background:none;
	font-size:12.5px; font-weight:700; color:var(--muted);
	transition:background .15s, color .15s;
}
.jms-seg-b:hover{ color:var(--text); }
.jms-seg-b.on{
	background:var(--panel); color:var(--text);
	box-shadow:0 1px 4px rgba(0,0,0,.14);
}

/* 도움말 */
.jms-help{
	margin-top:14px; padding:0 4px;
	font-size:12.5px; color:var(--muted);
}
.jms-help summary{
	cursor:pointer; font-weight:700; padding:9px 2px;
	list-style:none; display:flex; align-items:center; gap:6px;
}
.jms-help summary::-webkit-details-marker{ display:none; }
.jms-help summary::before{ content:"\f059"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:12px; }
.jms-help ul{ margin:2px 0 10px; padding-left:19px; line-height:1.75; }
.jms-help b{ color:var(--text); font-weight:700; }

/* 토스트 */
.jms-toast{
	position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
	background:rgba(17,24,39,.94); color:#fff; padding:11px 18px;
	border-radius:11px; font-size:13px; font-weight:700; z-index:9999;
	opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
	box-shadow:0 8px 26px rgba(0,0,0,.3); max-width:88vw; text-align:center;
}
.jms-toast.on{ opacity:1; transform:translate(-50%,0); }

/* 모바일 */
@media (max-width:520px){
	.jms-head{ padding:14px; }
	.jms-title{ font-size:17.5px; }
	.jms-desc{ font-size:12.5px; }
	.jms-card{ padding:12px; }
	.jms-btn{ height:46px; font-size:14.5px; }
	.jms-btn-quiet{ width:46px; }
	.jms-text{ font-size:16px; } /* iOS 자동 확대 방지 */
}