/* 사이트 아이콘 생성기 - 공통 v2 토큰 사용 */
.im-workspace { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; align-items:start; }
.im-panel { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; margin-bottom:24px; }
.im-panel-heading { display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; }
.im-number { display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent-ink); font-size:14px; font-weight:700; }
.im-title { font-size:22px; color:var(--heading); margin:0 0 10px; line-height:1.4; }
.im-subtitle { font-size:17px; color:var(--heading); margin:0 0 8px; }
.im-description,.im-answer { font-size:16px; line-height:1.8; margin:0; overflow-wrap:anywhere; }
.im-help { font-size:14px; line-height:1.7; color:var(--muted); margin:8px 0 16px; overflow-wrap:anywhere; }
.im-upload { border:1px dashed var(--border-strong); border-radius:var(--r-md); background:var(--alt); padding:24px 18px; text-align:center; margin-bottom:24px; }
.im-upload.is-dragging { border-color:var(--accent); background:var(--accent-soft); }
.im-upload-label { display:block; font-size:16px; font-weight:700; cursor:pointer; line-height:1.7; }
.im-file { width:100%; min-height:44px; max-width:100%; font-size:14px; }
.im-file::file-selector-button { min-height:44px; margin-right:10px; padding:8px 14px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); color:var(--heading); cursor:pointer; font:inherit; }
.im-source { max-width:240px; margin:16px auto 0; padding:8px; }
.im-source-image { display:block; width:100%; height:120px; object-fit:contain; }
.im-checker { background-color:#fff; background-image:conic-gradient(#e4e7e8 25%,transparent 0 50%,#e4e7e8 0 75%,transparent 0); background-size:16px 16px; border-radius:var(--r-sm); }
.im-field-label,.im-legend { font-size:15px; font-weight:700; color:var(--heading); margin-bottom:8px; }
.im-field-label { display:block; }
.im-select { width:100%; min-height:46px; border:1px solid var(--border-strong); border-radius:var(--r-field); background:var(--surface); color:var(--text); padding:10px 12px; font:inherit; }
.im-fieldset { min-width:0; border:0; padding:0; margin:20px 0 0; position:relative; }
.im-legend { padding:0; }
.im-group-toggle { display:block; margin:0 0 8px auto; padding:6px 10px; min-height:44px; border:0; border-radius:var(--r-sm); color:var(--accent-ink); background:var(--accent-soft); font-size:14px; cursor:pointer; }
.im-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.im-option { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:var(--r-md); padding:12px; min-height:70px; cursor:pointer; }
.im-option:has(:checked) { border-color:var(--accent); background:var(--accent-soft); }
.im-option input { width:18px; height:18px; accent-color:var(--accent); flex:none; }
.im-option-title,.im-option-detail { display:block; font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.im-option-detail { color:var(--muted); font-size:13px; }
.im-submit { width:100%; margin-top:12px; min-height:48px; }
.im-submit:disabled { opacity:.65; cursor:wait; }
.im-status { margin:12px 0 0; min-height:24px; font-size:14px; line-height:1.7; color:var(--heading); }
.im-error { color:var(--danger); }
.im-og-note { background:var(--alt); border-radius:var(--r-md); padding:24px; margin:24px 0; }
.im-storage-notice { margin:0 0 24px; font-size:14px; color:var(--muted); line-height:1.8; }
.im-result-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:18px; }
.im-preview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0 32px; }
.im-preview { min-width:0; border:1px solid var(--border); border-radius:var(--r-md); padding:14px; }
.im-preview-image { display:block; width:100%; height:130px; object-fit:contain; margin-bottom:12px; padding:8px; }
.im-preview-title { margin:0; font-size:15px; color:var(--heading); }
.im-preview-file { font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.im-download { display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--accent-ink); text-decoration:underline; }
.im-copy { min-height:44px; padding:8px 16px; border:1px solid var(--border-strong); border-radius:var(--r-sm); color:var(--heading); background:var(--surface); cursor:pointer; }
.im-code { max-width:100%; overflow:auto; padding:20px; border-radius:var(--r-md); color:var(--text); background:var(--alt); font-size:13px; line-height:1.8; text-align:left; }
.im-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 36px; padding-left:24px; margin:24px 0 0; }
.im-step { padding-left:4px; }
.im-step::marker { color:var(--accent-ink); font-weight:700; }
.im-faq { border-bottom:1px solid var(--border); }
.im-question { cursor:pointer; padding:20px 0; color:var(--heading); font-size:16px; font-weight:700; }
.im-answer { padding:0 0 20px; }
.im-updated { margin-top:20px; margin-bottom:0; }
.im-panel :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.im-result[hidden],.im-source[hidden] { display:none!important; }
/* 로딩 후 창을 줄여도 고정 너비로 남는 광고는 문서 대신 광고 영역 안에서 스크롤한다. */
.wt-shell[data-tool="icon-maker"] .wt-ad { max-width:100%; overflow-x:auto; }
@media(max-width:900px) { .im-workspace { grid-template-columns:1fr; gap:0; } .im-preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .im-panel { padding:20px 16px; } .im-title { font-size:20px; } .im-upload { padding:20px 12px; } .im-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .im-steps { grid-template-columns:1fr; } .im-option { padding:10px 8px; gap:8px; } .im-preview { padding:10px; } }