/* ===== Uriwon (우리반 놀이터) 디자인 스킨 ===== */
:root {
  color-scheme: light;
  --bg:        #F4ECD8;
  --card:      #FBF6E9;
  --section:   #EDE0BF;
  --accent:    #F0E5C9;
  --line:      rgba(139,111,71,0.14);
  --line-mid:  rgba(139,111,71,0.24);
  --t1:        #2A1A0B;
  --t2:        #5C3D1F;
  --t3:        #8B6F47;
  --green:     #2D4A2B;
  --green-dk:  #1F3A20;
  --green-mid: #639922;
  --green-lt:  #C0DD97;
  --danger:    #C13B3B;
  --radius:    16px;
  --radius-sm: 11px;
  --shadow:    0 1px 2px rgba(60,50,35,.04), 0 8px 24px rgba(60,50,35,.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  padding: 20px;
  font-weight: 400;
  letter-spacing: -0.3px;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: 1200px; margin: 0 auto; }

/* ===== 헤더 ===== */
.header { text-align: center; margin-bottom: 20px; color: var(--t1); }
.title {
  font-size: 2.2rem; font-weight: 900; letter-spacing: -0.6px;
  color: var(--t1); margin-bottom: 8px;
  display: inline-flex; align-items: center; gap: 10px;
}
.title::before { content: "\ea25"; font-family: "tabler-icons"; color: var(--green); font-size: 2rem; }
.subtitle { font-size: 1rem; color: var(--t3); font-weight: 500; }
.copy-text {
  display: inline-block; margin-top: 14px; padding: 9px 20px;
  background: var(--green); color: #fff; font-weight: 700; font-size: .95rem;
  border-radius: 999px; box-shadow: 0 2px 8px rgba(45,74,43,.15);
}

/* 활용법 안내 */
.usage-guide {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  max-width: 760px; margin: 14px auto 0;
}
.usage-step {
  display: flex; align-items: center; gap: 7px;
  background: #fffdf7; border: 1px solid #e8dfca; border-radius: 12px;
  padding: 8px 14px; font-size: .82rem; color: #5a4a33; line-height: 1.35;
}
.usage-step b { color: #2D4A2B; }
.ug-emoji { font-size: 1.1rem; }
@media (max-width: 600px) { .usage-step { width: 100%; justify-content: flex-start; } }

/* ===== 진행 단계 ===== */
.progress-steps {
  display: flex; align-items: center; justify-content: center; gap: 0;
  margin-bottom: 24px; padding: 16px 24px;
  background: var(--section); border-radius: var(--radius);
}
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .45; transition: all .25s; }
.step.active, .step.completed { opacity: 1; }
.step-number {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--t3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; transition: all .25s;
  border: 2px solid var(--line-mid);
}
.step.active .step-number { background: var(--green); color: #fff; border-color: var(--green); transform: scale(1.12); }
.step.completed .step-number { background: var(--green-mid); color: #fff; border-color: var(--green-mid); }
.step-label { color: var(--t2); font-size: .85rem; font-weight: 700; }
.step-line { width: 60px; height: 2px; background: var(--line-mid); margin: 0 12px 26px; border-radius: 2px; }
.step-line.completed { background: var(--green-mid); }

/* ===== 카드 ===== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 24px; margin-bottom: 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.card-title {
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.3px;
  color: var(--t1); margin-bottom: 18px;
  display: flex; align-items: center; gap: 8px;
}

/* ===== 모드 탭 ===== */
.mode-tabs { display: flex; gap: 8px; margin-bottom: 18px; background: var(--accent); padding: 4px; border-radius: var(--radius-sm); }
.mode-tab {
  flex: 1; padding: 11px 18px; border: none; background: transparent;
  border-radius: 9px; font-size: .95rem; font-weight: 700; color: var(--t3);
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.mode-tab:hover { color: var(--t1); }
.mode-tab.active { background: var(--green); color: #fff; }
.mode-content { display: none; }
.mode-content.active { display: block; }

/* ===== 갤러리 필터 ===== */
.gallery-filters { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-btn {
  padding: 8px 14px; border: 1.5px solid var(--line-mid);
  background: var(--card); color: var(--t2); border-radius: 999px;
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s;
  font-family: inherit;
}
.filter-btn:hover { border-color: var(--green); color: var(--green); }
.filter-btn.active { border-color: var(--green); background: var(--green); color: #fff; }

/* ===== 갤러리 그리드 ===== */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; max-height: 400px; overflow-y: auto; padding: 4px;
}
.gallery-item {
  aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  background: repeating-conic-gradient(#eceae4 0% 25%, #fff 0% 50%) 50% / 14px 14px;   /* 투명 배경 이미지가 검정 아닌 밝은 체커보드로 보이게 */
  cursor: pointer; border: 2.5px solid transparent; transition: all .18s;
  position: relative; background: var(--accent);
}
.gallery-item:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(60,50,35,.12); }
.gallery-item.selected { border-color: var(--green); box-shadow: 0 0 0 3px rgba(45,74,43,.18); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(42,26,11,.78); color: #fff;
  font-size: .7rem; padding: 4px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== 업로드 ===== */
.upload-zone {
  display: block; border: 2.5px dashed var(--line-mid);
  border-radius: var(--radius); padding: 44px;
  text-align: center; cursor: pointer; transition: all .2s;
  background: var(--accent); color: var(--t2);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--green); background: var(--card); color: var(--green);
}
.upload-icon { font-size: 2.6rem; margin-bottom: 12px; }

/* ===== 미리보기 ===== */
.image-preview-area { margin-top: 20px; text-align: center; }
.preview-wrapper { position: relative; display: inline-block; max-width: 100%; margin-bottom: 16px; }
#previewImage { max-width: 100%; max-height: 400px; border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(60,50,35,.12); }

.grid-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.grid-mask { position: absolute; background: rgba(0,0,0,.45); }
.print-area-border { position: absolute; border: 3px solid var(--green-mid); box-sizing: border-box; }
.grid-line-h, .grid-line-v { position: absolute; background: rgba(193,59,59,.7); }
.grid-line-h { height: 2px; }
.grid-line-v { width: 2px; }

/* ===== 스티커(AI 클립아트) 꾸미기 ===== */
#psStickerLayer { position: absolute; inset: 0; z-index: 5; }   /* 미리보기 위 편집 레이어 (격자선 아래) */
.ps-sticker { position: absolute; cursor: move; touch-action: none; -webkit-user-select: none; user-select: none; box-sizing: border-box; }
.ps-sticker img { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; }
.ps-sticker.sel { outline: 2px dashed #2D4A2B; outline-offset: 1px; }
.ps-sticker .ps-handle { display: none; position: absolute; box-sizing: border-box; }
.ps-sticker.sel .ps-handle { display: block; }
.ps-handle.br { width: 16px; height: 16px; right: -9px; bottom: -9px; background: #2D4A2B; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: nwse-resize; }
.ps-handle.rot { width: 16px; height: 16px; left: 50%; top: -28px; margin-left: -8px; background: #f59e0b; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: grab; }
.ps-handle.del { width: 18px; height: 18px; right: -9px; top: -9px; background: #c13b3b; color: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; font-size: 11px; line-height: 14px; text-align: center; font-weight: 700; }

/* ===== 꾸미기 편집 패널 (탭) ===== */
.edit-panel { display: none; margin-top: 12px; text-align: left; border: 1px solid #e0d8c8; border-radius: 12px; background: #fffdf7; overflow: hidden; }
.edit-panel.on { display: block; }
.edit-tabs { display: flex; background: #f4ecd8; border-bottom: 1px solid #e0d8c8; }
.edit-tab { flex: 1; padding: 11px 6px; border: none; background: transparent; font-size: .82rem; font-weight: 700; color: #7a6a55; cursor: pointer; font-family: inherit; border-bottom: 2.5px solid transparent; }
.edit-tab.active { color: #2D4A2B; background: #fffdf7; border-bottom-color: #2D4A2B; }
.edit-hint { font-size: .68rem; color: #a08d6f; padding: 7px 12px 0; }
.edit-content { display: none; padding: 10px 12px 14px; }
.edit-content.active { display: block; }

.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.sticker-item { aspect-ratio: 1; background: #f8f8fa; border: 1px solid #e0e0e0; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: transform .1s; }
.sticker-item:hover { background: #EDE0BF; border-color: #2D4A2B; transform: scale(1.05); }
.sticker-item img { width: 100%; height: 100%; object-fit: cover; }
.sticker-item { position: relative; }
.ps-sheet-add { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; background: #2D4A2B; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.ps-sheet-add:hover { background: #c13b3b; transform: scale(1.15); }

/* ✂️ 스티커 시트 */
.ps-sheet-wrap { margin-top: 12px; border-top: 1px dashed #d8cdb5; padding-top: 10px; }
.ps-sheet-head { font-size: .82rem; font-weight: 700; color: #2D4A2B; margin-bottom: 7px; }
.ps-sheet-hint { font-weight: 400; font-size: .66rem; color: #a08d6f; margin-left: 6px; }
.ps-sheet-thumbs { display: flex; flex-wrap: wrap; gap: 5px; min-height: 40px; padding: 6px; background: #faf6ec; border-radius: 8px; margin-bottom: 8px; }
.ps-sheet-empty { font-size: .68rem; color: #b0a288; align-self: center; }
.ps-sheet-thumb { position: relative; width: 44px; height: 44px; border: 1px solid #e0d8c8; border-radius: 6px; background: #fff; overflow: hidden; }
.ps-sheet-thumb img { width: 100%; height: 100%; object-fit: contain; }
.ps-sheet-thumb .rm { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #fff; background: #c13b3b; color: #fff; font-size: 10px; line-height: 1; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.ps-sheet-size { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.ps-sheet-size input[type="range"] { flex: 1; min-width: 90px; }
.ps-sheet-size input[type="number"] { width: 52px; padding: 5px 6px; font-size: .78rem; border: 1px solid #e0d8c8; border-radius: 6px; text-align: center; font-family: inherit; }
.ps-cm { font-size: .72rem; color: #7a6a55; }
.ps-size-presets { display: flex; gap: 4px; }
.ps-size-presets button { width: 26px; height: 26px; border: 1px solid #d8cdb5; border-radius: 6px; background: #fff; font-size: .72rem; font-weight: 700; color: #2D4A2B; cursor: pointer; font-family: inherit; padding: 0; }
.ps-size-presets button:hover { background: #EDE0BF; border-color: #2D4A2B; }
.ps-sheet-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ps-btn-outline { padding: 7px 12px; background: #fff; color: #2D4A2B; border: 1px solid #c8bca8; border-radius: 7px; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.ps-btn-outline:hover { background: #f2ede3; }

/* 공통 입력 */
.ps-inp { width: 100%; padding: 7px 9px; font-size: .8rem; border: 1px solid #e0d8c8; border-radius: 7px; box-sizing: border-box; font-family: inherit; }
.ps-sel { padding: 6px 7px; font-size: .74rem; border: 1px solid #e0d8c8; border-radius: 7px; background: #fff; font-family: inherit; }
.ps-btn-primary { padding: 7px 14px; background: #2D4A2B; color: #fff; border: none; border-radius: 7px; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.ps-btn-primary:hover { background: #22381f; }

/* 텍스트 탭 컨트롤 */
.ps-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ps-lbl { font-size: .72rem; color: #7a6a55; width: 34px; flex-shrink: 0; }
.ps-val { font-size: .7rem; color: #7a6a55; width: 34px; text-align: right; }
.ps-swatches { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.ps-swatch { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; cursor: pointer; }
.ps-swatch.sel { box-shadow: 0 0 0 2px #2D4A2B; }
.ps-fx { border: 1px solid #eee2cd; border-radius: 8px; padding: 7px 9px; margin-bottom: 8px; background: #fffefb; }
.ps-chk { font-size: .76rem; color: #2D4A2B; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ps-fxbox { display: flex; align-items: center; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.ps-mini { font-size: .64rem; color: #999; }
.ps-mini-range { width: 58px; }
.ps-hint2 { font-size: .68rem; color: #a08d6f; text-align: center; padding: 4px 0; }

/* 문구 템플릿 탭 */
.tpl-type-tabs { display: flex; gap: 5px; margin-bottom: 8px; }
.tpl-type-tab { flex: 1; padding: 7px; border: 1px solid #e0d8c8; border-radius: 7px; font-size: .74rem; background: #fff; color: #444; cursor: pointer; font-family: inherit; font-weight: 600; }
.tpl-type-tab.active { background: #2D4A2B; color: #fff; border-color: #2D4A2B; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
.tpl-btn { border: 1px solid #e0d8c8; border-radius: 8px; padding: 8px 6px; background: #fff; cursor: pointer; text-align: center; font-family: inherit; transition: all .1s; overflow: hidden; }
.tpl-btn:hover { border-color: #2D4A2B; background: #f7f2e6; transform: translateY(-1px); }
.tpl-btn .name { font-size: .68rem; font-weight: 700; color: #2D4A2B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-btn .desc { font-size: .6rem; color: #999; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-btn img { width: 100%; height: 52px; object-fit: contain; border-radius: 4px; }

/* 텍스트 요소(오버레이) */
.ps-sticker.ps-text { display: flex; align-items: center; justify-content: center; }
.ps-text-inner { display: inline-block; white-space: nowrap; line-height: 1; pointer-events: none; }

/* ===== 설정 ===== */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 18px; }
@media (max-width: 600px) { .settings-grid { grid-template-columns: 1fr; } }
.setting-label { display: block; font-weight: 700; color: var(--t2); margin-bottom: 10px; font-size: .9rem; }

.preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.preset-btn {
  padding: 12px 8px; border: 1.5px solid var(--line-mid);
  background: var(--card); color: var(--t1);
  border-radius: var(--radius-sm); font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.preset-btn:hover { border-color: var(--green); color: var(--green); }
.preset-btn.active { border-color: var(--green); background: var(--green); color: #fff; }

.paper-buttons, .orientation-buttons { display: flex; gap: 10px; }
.paper-btn, .orientation-btn {
  flex: 1; padding: 13px; border: 1.5px solid var(--line-mid);
  background: var(--card); color: var(--t1);
  border-radius: var(--radius-sm); font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit;
}
.paper-btn:hover, .orientation-btn:hover { border-color: var(--green); color: var(--green); }
.paper-btn.active, .orientation-btn.active { border-color: var(--green); background: var(--green); color: #fff; }
.orientation-icon { font-size: 1.1rem; }

/* ===== 정보 텍스트 ===== */
.info-text {
  background: var(--accent); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 18px;
  color: var(--t2); line-height: 1.55; font-size: .9rem;
  border-left: 3px solid var(--green);
}

/* ===== 버튼 ===== */
.btn {
  padding: 12px 22px; border: none; border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 700; cursor: pointer;
  transition: all .12s; font-family: inherit;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondary { background: var(--accent); color: var(--t2); border: 1.5px solid var(--line-mid); }
.btn-secondary:hover:not(:disabled) { background: var(--section); color: var(--t1); }

.btn-preview, .btn-download {
  background: var(--green); color: #fff;
}
.btn-preview:hover:not(:disabled),
.btn-download:hover:not(:disabled) {
  background: var(--green-dk); transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,74,43,.25);
}

.btn-print { background: var(--danger); color: #fff; }
.btn-print:hover:not(:disabled) { background: #a02f2f; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(193,59,59,.3); }

.action-buttons {
  display: flex; flex-direction: column; gap: 14px;
  align-items: center; margin-top: 22px;
  padding-top: 22px; border-top: 1px solid var(--line);
}

.btn-print-main {
  width: 100%; max-width: 420px;
  padding: 18px 36px; font-size: 1.2rem; font-weight: 800;
  background: var(--green); color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(45,74,43,.25);
}
.btn-print-main:hover:not(:disabled) {
  background: var(--green-dk); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,74,43,.32);
}

.download-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.download-buttons .btn { flex: 1; min-width: 180px; max-width: 250px; }

/* ===== 진행 표시 ===== */
.download-progress { margin-top: 18px; padding: 14px; background: var(--accent); border-radius: var(--radius-sm); }
.download-progress-bar { height: 8px; background: var(--line-mid); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.download-progress-fill { height: 100%; background: var(--green); border-radius: 4px; width: 0%; transition: width .3s ease; }
.download-progress-text { text-align: center; font-size: .85rem; color: var(--t2); font-weight: 600; }

/* ===== 안내 ===== */
.no-image-guide { text-align: center; padding: 40px; }
.no-image-guide .guide-icon { font-size: 2.6rem; margin-bottom: 12px; color: var(--green); animation: bounce 1.2s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.no-image-guide p { color: var(--t3); font-size: 1rem; }

/* ===== 미리보기 ===== */
.preview-description { color: var(--t3); margin-bottom: 18px; text-align: center; font-size: .95rem; }
.split-preview-grid { display: grid; gap: 10px; }
.split-preview-item { background: repeating-conic-gradient(#e9e5db 0% 25%, #fff 0% 50%) 50% / 14px 14px; border-radius: var(--radius-sm); overflow: hidden; position: relative; }
.split-preview-item img { width: 100%; height: 100%; object-fit: fill; display: block; }
.split-preview-number {
  position: absolute; top: 8px; left: 8px;
  background: var(--green); color: #fff;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .85rem;
  box-shadow: 0 2px 6px rgba(45,74,43,.3);
}

/* ===== 처리 중 오버레이 ===== */
.processing-overlay {
  position: fixed; inset: 0; background: rgba(42,26,11,.55);
  display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.processing-content { background: var(--card); padding: 36px 50px; border-radius: var(--radius); text-align: center; box-shadow: 0 12px 36px rgba(60,50,35,.25); }
.spinner { font-size: 2.6rem; animation: spin 1s linear infinite; margin-bottom: 14px; color: var(--green); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ===== 유틸 ===== */
.hidden { display: none !important; }
.empty-state { text-align: center; padding: 40px; color: var(--t3); }
.empty-icon { font-size: 2.6rem; margin-bottom: 12px; opacity: .55; }

/* ===== Tauri ===== */
.btn-tauri-print { background: var(--green); color: #fff; }
.btn-tauri-print:hover:not(:disabled) { background: var(--green-dk); transform: translateY(-1px); }
.btn-tauri-copy { background: var(--green); color: #fff; }
.btn-tauri-copy:hover:not(:disabled) { background: var(--green-dk); transform: translateY(-1px); }

.fullscreen-btn {
  position: fixed; top: 14px; right: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: var(--green); color: #fff;
  font-size: 1.3rem; cursor: pointer; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(45,74,43,.3);
  transition: all .15s;
}
.fullscreen-btn:hover { background: var(--green-dk); transform: scale(1.05); }

.tauri-badge {
  position: fixed; bottom: 14px; right: 14px;
  background: var(--green); color: #fff;
  padding: 7px 14px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; z-index: 1000;
  box-shadow: 0 2px 8px rgba(45,74,43,.3);
}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .title { font-size: 1.7rem; }
  .preset-grid { grid-template-columns: repeat(2, 1fr); }
  .action-buttons { flex-direction: column; }
  .btn { width: 100%; }
}


/* ===== 수업활용 방법 (관리자가 적어 둔 사진에만 표시) ===== */
.ps-usage {
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: #fffaf0;
  border: 1px solid #f0e2c4;
  border-left: 4px solid #e8a838;
  border-radius: 10px;
  text-align: left;
}
.ps-usage.hidden { display: none; }
.ps-usage-title {
  font-size: 14px;
  font-weight: 700;
  color: #a86a12;
  margin-bottom: 6px;
}
.ps-usage-body {
  font-size: 14px;
  line-height: 1.7;
  color: #4a4235;
  white-space: pre-wrap;   /* 관리자가 줄바꿈해 적은 그대로 */
  word-break: keep-all;
}
/* ★HTML 로 적은 경우 — 태그가 줄을 나누므로 pre-wrap 을 끈다 (Jay 2026-08-19) */
.ps-usage-body.is-html { white-space: normal; }
.ps-usage-body.is-html > :first-child { margin-top: 0; }
.ps-usage-body.is-html > :last-child { margin-bottom: 0; }
.ps-usage-body.is-html p { margin: 0 0 8px; }
.ps-usage-body.is-html ul,
.ps-usage-body.is-html ol { margin: 0 0 8px; padding-left: 20px; }
.ps-usage-body.is-html li { margin: 2px 0; }
.ps-usage-body.is-html h1,
.ps-usage-body.is-html h2,
.ps-usage-body.is-html h3,
.ps-usage-body.is-html h4 { margin: 10px 0 6px; font-size: 15px; color: #a86a12; }
.ps-usage-body.is-html img { max-width: 100%; height: auto; border-radius: 6px; }
.ps-usage-body.is-html table { border-collapse: collapse; max-width: 100%; }
.ps-usage-body.is-html th,
.ps-usage-body.is-html td { border: 1px solid #e6dcc6; padding: 5px 8px; }
.ps-usage-body.is-html a { color: #a86a12; text-decoration: underline; }
.ps-usage-body.is-html hr { border: 0; border-top: 1px solid #eadfc6; margin: 10px 0; }
.ps-usage-body.is-html blockquote { margin: 6px 0; padding: 4px 12px; border-left: 3px solid #e8a838; color: #6b6153; }


/* [이미지 분리하여 다운로드] 안내 */
.download-note {
  margin: 10px auto 0;
  max-width: 640px;
  padding: 10px 14px;
  background: #f6f8f4;
  border: 1px solid #e0e6da;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: #5b6552;
  text-align: left;
  word-break: keep-all;
}
.download-note b { color: #2D4A2B; }


/* 🧩 꾸밈이 있는 사진 — 별도 카드를 만들지 않고 사진에 살짝 표시만 한다 */
.gallery-item.has-decor::after {
  content: '🧩';
  position: absolute; top: 6px; left: 6px;
  background: rgba(45, 74, 43, .88); color: #F4ECD8;
  font-size: 11px; padding: 2px 6px; border-radius: 999px;
  pointer-events: none;
}