/* dashboard.css 占쏙옙 cleaned (banner styles moved to banner.css) */


/* Apple SD Gothic Neo 占쏙옙 WOFF2 from GitHub CDN */
@font-face{font-family:'Apple SD Gothic Neo';src:url('../fonts/AppleSDGothicNeo-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:block;}
@font-face{font-family:'Apple SD Gothic Neo';src:url('../fonts/AppleSDGothicNeo-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:'Apple SD Gothic Neo';src:url('../fonts/AppleSDGothicNeo-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block;}
@font-face{font-family:'Apple SD Gothic Neo';src:url('../fonts/AppleSDGothicNeo-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:block;}
@font-face{font-family:'Apple SD Gothic Neo';src:url('../fonts/AppleSDGothicNeo-ExtraBold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:block;}
@font-face{font-family:'Apple SD Gothic Neo';src:url('../fonts/AppleSDGothicNeo-Heavy.woff2') format('woff2');font-weight:900;font-style:normal;font-display:block;}
@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Regular.ttf') 
format('truetype');font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:'Roboto';src:url('../fonts/Roboto-Bold.ttf') 
format('truetype');font-weight:700;font-style:normal;font-display:block;}

/* 占쎈떜繹먲옙 癰귣똻�삢 */
[hidden]{ display:none !important; }


/* 占쎌쟿占쎌뵠占쎈툡占쎌뜍 */
*{box-sizing:border-box}

html,body{height:100%}


body{margin:0; font-family:'Apple SD Gothic Neo', 'Roboto', color:var(--ink); overflow: hidden;}


.app{display:grid; grid-template-columns: 1fr 420px; height:100vh;}


.preview-wrap{background:var(--stage-bg); padding:48px 40px 40px; overflow:auto}


.preview-outer{display:flex; align-items:flex-start; justify-content:center; min-height:100%;}


#previewSlot{display:flex; align-items:flex-start; justify-content:center;}



/* 占쎈솭占쎄섯 */
.panel{background:var(--panel-bg); border-left:1px solid #e8e8ef; overflow:auto}


.panel-inner{padding:28px}


.row{display:grid; gap:8px; margin:18px 0}


label{font-size:14px; color:#6b6b7a}


textarea,input[type="text"],input[type="number"],select{width:100%; padding:12px 14px; border:1px solid #e1e1ea; border-radius:12px; background:#fafbff; font-size:14px; outline:none}


textarea:focus,input:focus,select:focus{border-color:#c7c7ff}


.switch{display:flex; align-items:center; gap:8px; justify-content:flex-end}


.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:14px; border:1px solid #e2e2ef; background:#fff; cursor:pointer}


.btn.primary{background:var(--accent); color:#fff; border-color:transparent}


.actions{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

/* 占쎈쑞占쎄퐬占쎌뵬 �뵳�딅뮞占쎈뱜 */
.thumb-list{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px}
.thumb-item{position:relative; border:1px solid #e5e6ef; border-radius:10px; background:#fafbff; padding:8px; display:flex; align-items:center; gap:8px}
.thumb-img{width:32px; height:32px; object-fit:contain}
.thumb-name{font-size:12px; color:#555; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1}
.thumb-remove{border:none; background:#ffe2e2; color:#c00; border-radius:8px; padding:4px 8px; cursor:pointer; font-size:12px}


/* 占쎈뻻揶쏄낯�읅占쎌몵嚥∽옙 占쎈떜繹먲옙 */
.visually-hidden{
  position:absolute !important;
  width:1px !important; height:1px !important;
  margin:-1px !important; padding:0 !important; border:0 !important;
  overflow:hidden !important; clip:rect(0 0 0 0) !important;
  clip-path: inset(50%) !important; white-space:nowrap !important;
}


/* Big primary JPG save button spans two columns */
#saveJpg.big{ grid-column: 1 / -1; padding:16px 20px; font-size:16px; }