@font-face{font-family:"Pretendard";src:url("/폰트/Pretendard-Regular.otf");font-display:swap;}
@font-face{font-family:"Noto Sans KR";src:url("/폰트/NotoSansKR-Regular.ttf");font-display:swap;}
@font-face{font-family:"NanumSquare";src:url("/폰트/NanumSquareR_0.ttf");font-display:swap;}
@font-face{font-family:"KoPub Batang";src:url("/폰트/KoPub Batang Medium.ttf");font-display:swap;}
@font-face{font-family:"esamanru";src:url("/폰트/esamanru Medium.ttf");font-display:swap;}
@font-face{font-family:"Gmarket Sans";src:url("/폰트/GmarketSansTTFMedium.ttf");font-display:swap;}
@font-face{font-family:"Montserrat";src:url("/폰트/Montserrat-Medium.ttf");font-display:swap;}
@font-face{font-family:"KBO Dia Gothic";src:url("/폰트/KBO Dia Gothic_medium.ttf");font-display:swap;}
@font-face{font-family:"S-Core Dream";src:url("/폰트/SCDream4.otf");font-display:swap;}
@font-face{font-family:"Kakao";src:url("/폰트/KakaoRegular.ttf");font-display:swap;}
@font-face{font-family:"Freesentation";src:url("/폰트/Freesentation-4Regular.ttf");font-display:swap;}
@font-face{font-family:"Paperlogy";src:url("/폰트/Paperlogy-4Regular.ttf");font-display:swap;}
@font-face{font-family:"Partial Sans KR";src:url("/폰트/PartialSansKR-Regular.otf");font-display:swap;}
@font-face{font-family:"AtoZ";src:url("/폰트/에이투지체-4Regular.ttf");font-display:swap;}
/* --accent: 슬라이드 전용 (사용자가 고른 포인트색) */
/* --ui: 패널/리본 UI 고정 브랜드색 (당근ST 오렌지) */
:root{--accent:#4A3FC0;--ui:#FF6F0F;--ink:#1A2233;--ink-soft:#5A6275;--gray:#8A93A2;--panel:#fff;--page:#F4F5F8;--line:#E2E5EC;--font:"Pretendard","Noto Sans KR",sans-serif;--desc-lh:1.45;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--font);background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;}
.app{display:flex;height:100vh;overflow:hidden;}

/* ── 패널 ── */
.panel{width:320px;flex:0 0 320px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;}
.ph{padding:16px 18px 11px;border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;}
.brand .dot{width:24px;height:24px;border-radius:7px;background:var(--ui);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;}
.brand small{display:block;font-size:10px;font-weight:600;color:var(--gray);margin-top:1px;}
.sec{padding:13px 18px;border-bottom:1px solid var(--line);}
.sec h3{font-size:12px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin-bottom:9px;display:flex;align-items:center;gap:5px;}
.sec h3 .st{background:var(--ui);color:#fff;width:15px;height:15px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;}
.gallery{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.gcard{border:1.5px solid var(--line);border-radius:8px;padding:5px 3px;cursor:pointer;background:#fff;transition:.12s;text-align:center;}
.gcard:hover{border-color:var(--ui);}
.gcard.on{border-color:var(--ui);background:color-mix(in srgb,var(--ui) 8%,#fff);}
.gcard .th{width:38px;height:38px;background:#F4F5F6;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:7px;margin:0 auto 4px;}
.gcard .gn{font-size:10px;font-weight:600;}
.gcard.on .gn{color:var(--ui);}
.gcard.dim{opacity:.38;}
.variants{display:flex;flex-direction:column;gap:5px;}
.vc{display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);border-radius:8px;padding:6px 8px;cursor:pointer;background:#fff;transition:.12s;}
.vc:hover{border-color:var(--ui);}
.vc.on{border-color:var(--ui);background:color-mix(in srgb,var(--ui) 8%,#fff);}
.vc .vt{flex:0 0 38px;height:38px;background:#F4F5F6;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:6px;box-sizing:border-box;}
.vc .vn{font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vc.on .vn{color:var(--ui);}
.ctrl{display:flex;align-items:center;gap:9px;margin-bottom:10px;font-size:12px;color:var(--ink-soft);}
.ctrl:last-child{margin-bottom:0;}
.ctrl label{flex:0 0 88px;font-weight:600;}
.ctrl input[type=range]{flex:1;accent-color:var(--ui);}
.ctrl .v{flex:0 0 30px;text-align:right;font-weight:700;color:var(--ui);}
.seg{display:flex;gap:5px;flex-wrap:wrap;}
.seg button{border:1.5px solid var(--line);border-radius:7px;padding:6px 8px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink-soft);font-family:var(--font);display:inline-flex;align-items:center;gap:4px;transition:.12s;}
.seg button i{font-size:13px;}
.seg button.on{border-color:var(--ui);background:color-mix(in srgb,var(--ui) 8%,#fff);color:var(--ui);}
.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.sw{width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line);cursor:pointer;padding:0;}
.sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ui);}
.cp{width:28px;height:23px;border:1.5px solid var(--line);border-radius:6px;cursor:pointer;padding:0;background:none;}
select{width:100%;padding:7px 9px;border:1.5px solid var(--line);border-radius:8px;font-family:var(--font);font-size:12px;cursor:pointer;background:#fff;}
.iconpos{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}
.iconpos button{aspect-ratio:1.7;border:1.5px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;position:relative;}
.iconpos button.on{border-color:var(--ui);background:color-mix(in srgb,var(--ui) 8%,#fff);}
.iconpos button .d{position:absolute;width:6px;height:6px;border-radius:2px;background:var(--ui);}
.hint{font-size:10px;color:var(--gray);margin-top:6px;line-height:1.5;}

/* ── 리본 툴바 ── */
.mainCol{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.ribbon{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0 16px;height:50px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;}
.ribbon .rright button{flex-shrink:0;}
/* 좁은 폭에서 우측 다운로드·개선요청이 잘리지 않게: 디자인코드 입력이 먼저 줄어듦 */
#designPaste{flex-shrink:1;min-width:0;}
#designCode{flex-shrink:1;min-width:90px;}
.ribbon .rdiv{width:1px;height:24px;background:var(--line);flex-shrink:0;}
.rswatches{display:flex;gap:5px;align-items:center;flex-shrink:0;}
.rswatches .sw{width:21px;height:21px;}
.swmore{position:relative;display:flex;align-items:center;}
.swmorebtn{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink-soft);cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;}
.swmorebtn:hover{border-color:var(--ui);color:var(--ui);}
.swpop{position:absolute;top:28px;left:0;z-index:30;display:flex;flex-wrap:wrap;gap:5px;width:96px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 18px rgba(0,0,0,.14);}
.swpop[hidden]{display:none;}
.ribbon select{width:138px;padding:5px 7px;font-size:12px;flex-shrink:0;}
.ribbon .rseg{display:flex;gap:4px;flex-shrink:0;}
.ribbon .rseg button{border:1.5px solid var(--line);border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;cursor:pointer;background:#fff;color:var(--ink-soft);font-family:var(--font);display:inline-flex;align-items:center;gap:4px;transition:.12s;}
.ribbon .rseg button.on{border-color:var(--ui);background:color-mix(in srgb,var(--ui) 8%,#fff);color:var(--ui);}
.ribbon .rright{margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0;}

/* ── 캔버스 영역 ── */
.stageWrap{flex:1;display:flex;align-items:center;justify-content:center;padding:34px;overflow:auto;}
.stage{background:#fff;border-radius:14px;box-shadow:0 10px 40px rgba(26,34,51,.1);position:relative;overflow:hidden;}
.stage.r169{width:100%;max-width:940px;aspect-ratio:16/9;}
.stage.r11{height:100%;max-height:90vh;aspect-ratio:1/1;}
.pad{position:absolute;inset:0;padding:42px 48px;display:flex;flex-direction:column;}
.head{flex:0 0 auto;margin-bottom:18px;}
.title{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1;outline:none;}
.sub{font-size:13px;color:var(--gray);font-weight:500;margin-top:6px;outline:none;}
.body{flex:1 1 auto;min-height:0;display:flex;}
[contenteditable]{outline:none;cursor:text;}
[contenteditable]:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent);border-radius:3px;}
[contenteditable]:focus{box-shadow:0 0 0 2px var(--accent);border-radius:3px;}
.badge{position:absolute;bottom:11px;right:15px;font-size:10px;color:var(--gray);display:flex;align-items:center;gap:5px;}
.kw{line-height:1.3;word-break:keep-all;}
.desc{line-height:var(--desc-lh);word-break:keep-all;}

/* 개선요청 모달 */
.fbov{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.38);}
.fbov[hidden]{display:none;}
.fbmodal{width:420px;max-width:92vw;background:#fff;border-radius:14px;padding:22px;box-shadow:0 18px 50px rgba(0,0,0,.28);font-family:var(--font);}
.fbhint{margin:0 0 12px;font-size:12px;color:var(--gray);}
.fbmodal textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--line);border-radius:9px;padding:10px 12px;font-size:13px;font-family:var(--font);resize:vertical;}
.fbrow{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px;}
.fbrow #fbMsg{font-size:12px;color:var(--gray);}
.fbbtn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);border:1.5px solid var(--line);}
.fbbtn.ghost{background:#fff;color:var(--ink-soft);}
.fbbtn.primary{background:var(--accent);color:#fff;border-color:transparent;}
.fbbtn:disabled{opacity:.5;cursor:default;}