/* ==========================
   RESET
========================== */

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

:root{

--primary:#2563eb;
--primary2:#1d4ed8;

--bg:#f5f7fb;
--card:#ffffff;

--text:#222;
--sub:#666;

--border:#e6eaf0;

--shadow:
0 10px 30px rgba(0,0,0,.08);

--radius:18px;

--transition:.25s;

}

body.dark{

--bg:#111827;

--card:#1f2937;

--text:#f8fafc;

--sub:#cbd5e1;

--border:#374151;

--shadow:
0 10px 30px rgba(0,0,0,.45);

}

body{

font-family:
"Pretendard",
sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.6;

transition:.3s;

}

/* ==========================
HEADER
========================== */

.header{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 8%;

background:var(--card);

box-shadow:var(--shadow);

position:sticky;

top:0;

z-index:100;

}

.logo{

font-size:28px;

font-weight:800;

color:var(--primary);

}

.theme-btn{

width:48px;

height:48px;

border:none;

border-radius:50%;

cursor:pointer;

background:var(--primary);

color:white;

font-size:20px;

transition:.3s;

}

.theme-btn:hover{

transform:rotate(15deg);

}

/* ==========================
HERO
========================== */

.hero{

padding:90px 20px;

text-align:center;

}

.hero h1{

font-size:48px;

font-weight:800;

margin-bottom:20px;

}

.hero p{

font-size:20px;

color:var(--sub);

margin-bottom:30px;

}

.privacy{

display:inline-block;

padding:12px 22px;

border-radius:999px;

background:#e8f1ff;

color:#1d4ed8;

font-weight:600;

}

body.dark .privacy{

background:#1d4ed8;

color:white;

}

/* ==========================
SEARCH
========================== */

.search-area{

padding:0 8% 50px;

}

#searchBox{

width:100%;

padding:20px;

font-size:18px;

border-radius:16px;

border:2px solid var(--border);

background:var(--card);

color:var(--text);

outline:none;

transition:.25s;

}

#searchBox:focus{

border-color:var(--primary);

box-shadow:
0 0 0 4px
rgba(37,99,235,.15);

}

/* ==========================
DROP AREA
========================== */

.drop-area{

padding:0 8% 70px;

}

.drop-box{

background:var(--card);

border:3px dashed var(--primary);

border-radius:22px;

padding:70px;

text-align:center;

cursor:pointer;

transition:.25s;

}

.drop-box:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

.drop-icon{

font-size:70px;

margin-bottom:20px;

}

.drop-box h2{

font-size:30px;

margin-bottom:10px;

}

.drop-box p{

color:var(--sub);

}

/* ==========================
AI 추천
========================== */

.recommend{

padding:20px 8% 70px;

}

.recommend h2{

font-size:32px;

margin-bottom:25px;

}

.recommend-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}

.recommend-item{

background:var(--card);

border:1px solid var(--border);

border-radius:var(--radius);

padding:22px;

transition:var(--transition);

box-shadow:var(--shadow);

}

.recommend-item:hover{

transform:translateY(-6px);

}

/* ==========================
POPULAR
========================== */

.popular{

padding:20px 8% 80px;

}

.popular h2{

font-size:32px;

margin-bottom:30px;

}

.tool-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:24px;

}

.tool-card{

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

padding:28px;

text-decoration:none;

color:var(--text);

transition:.25s;

box-shadow:var(--shadow);

}

.tool-card:hover{

transform:translateY(-8px);

border-color:var(--primary);

}

.tool-card h3{

margin:15px 0 10px;

font-size:22px;

}

.tool-card p{

color:var(--sub);

}

.tool-card{

font-size:46px;

}

/* ==========================
CATEGORY
========================== */

.category{

padding:20px 8% 80px;

}

.category h2{

font-size:32px;

margin-bottom:25px;

}

.category-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

gap:18px;

}

.category-grid div{

background:var(--card);

border:1px solid var(--border);

border-radius:18px;

padding:26px;

font-weight:700;

text-align:center;

cursor:pointer;

transition:.25s;

box-shadow:var(--shadow);

}

.category-grid div:hover{

background:var(--primary);

color:#fff;

transform:translateY(-5px);

}

/* ==========================
RECENT
========================== */

.recent{

padding:20px 8% 70px;

}

.recent h2{

font-size:32px;

margin-bottom:25px;

}

#recentTools{

background:var(--card);

border:1px solid var(--border);

border-radius:18px;

padding:24px;

min-height:90px;

box-shadow:var(--shadow);

}

/* ==========================
FAVORITE
========================== */

.favorite{

padding:20px 8% 70px;

}

.favorite h2{

font-size:32px;

margin-bottom:25px;

}

#favoriteTools{

background:var(--card);

border:1px solid var(--border);

border-radius:18px;

padding:24px;

min-height:90px;

box-shadow:var(--shadow);

}

/* ==========================
GUIDE
========================== */

.guide{

padding:20px 8% 80px;

}

.guide h2{

font-size:32px;

margin-bottom:30px;

}

.steps{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

}

.steps div{

background:var(--card);

padding:30px;

border-radius:20px;

text-align:center;

font-weight:700;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:.25s;

}

.steps div:hover{

transform:scale(1.04);

}

/* ==========================
WHY
========================== */

.why{

padding:20px 8% 80px;

}

.why h2{

font-size:32px;

margin-bottom:30px;

}

.why ul{

list-style:none;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

gap:20px;

}

.why li{

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

padding:24px;

font-weight:600;

box-shadow:var(--shadow);

transition:.25s;

}

.why li:hover{

transform:translateY(-6px);

border-color:var(--primary);

}

/* ==========================
FAQ
========================== */

.faq{

padding:20px 8% 80px;

}

.faq h2{

font-size:32px;

margin-bottom:30px;

}

.faq details{

background:var(--card);

border:1px solid var(--border);

border-radius:18px;

padding:20px;

margin-bottom:16px;

box-shadow:var(--shadow);

}

.faq summary{

cursor:pointer;

font-weight:700;

font-size:18px;

}

.faq p{

margin-top:15px;

color:var(--sub);

}

/* ==========================
FOOTER
========================== */

footer{

margin-top:60px;

padding:45px 20px;

background:var(--card);

border-top:1px solid var(--border);

text-align:center;

}

footer p{

color:var(--sub);

margin:6px 0;

}

/* ==========================
SCROLL BAR
========================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:var(--bg);

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:999px;

}

/* ==========================
FADE ANIMATION
========================== */

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.7s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/* ==========================
BUTTON
========================== */

button{

font-family:inherit;

}

.tool-card,
.category-grid div,
.steps div,
.why li{

will-change:transform;

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:992px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.drop-box{

padding:55px 25px;

}

.tool-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.header{

padding:16px 20px;

}

.logo{

font-size:22px;

}

.hero{

padding:70px 20px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:17px;

}

.drop-box{

padding:40px 18px;

}

.drop-icon{

font-size:56px;

}

.drop-box h2{

font-size:24px;

}

.tool-grid{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:repeat(2,1fr);

}

.steps{

grid-template-columns:1fr;

}

.why ul{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:16px;

}

#searchBox{

padding:16px;

font-size:16px;

}

.theme-btn{

width:42px;

height:42px;

}

.category-grid{

grid-template-columns:1fr;

}

.recommend-grid{

grid-template-columns:1fr;

}

}

/* ==========================
SMOOTH SCROLL
========================== */

html{

scroll-behavior:smooth;

}

.workspace{

padding:25px;

}

.workspace-header{

display:flex;

gap:18px;

align-items:center;

margin-bottom:20px;

}

.workspace-icon{

font-size:60px;

}

.workspace-score{

background:#f7f7f7;

padding:15px;

border-radius:10px;

margin-bottom:20px;

line-height:1.8;

}

.workspace-buttons{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.action-btn{

border:none;

background:#1976d2;

color:white;

padding:12px 18px;

border-radius:8px;

cursor:pointer;

transition:.2s;

}

.action-btn:hover{

transform:translateY(-2px);

opacity:.9;

}

/* Stage 17: safe navigation states */
.tool-card.is-coming-soon{position:relative;opacity:.78}
.tool-card.is-coming-soon::after{content:"준비 중";position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:999px;background:#e2e8f0;color:#475569;font-size:11px;font-weight:800}
.tool-card.is-live{outline:2px solid #60a5fa;outline-offset:2px}
.site-notice{position:fixed;right:20px;bottom:20px;z-index:9999;max-width:min(420px,calc(100vw - 40px));padding:14px 16px;border-radius:12px;background:#111827;color:#fff;box-shadow:0 14px 35px #0004;font-weight:700;opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s ease}
.site-notice.show{opacity:1;transform:translateY(0)}
@media(max-width:640px){.site-notice{left:16px;right:16px;bottom:16px;max-width:none}.tool-card.is-coming-soon::after{top:8px;right:8px}}

/* ==========================
IMAGE CONVERTER HUB · STAGE 66
========================== */
.image-hub-search h2{
font-size:36px;
margin-bottom:8px;
}

.hub-intro,.section-lead{
color:var(--sub);
margin-bottom:24px;
}

.hub-controls{
display:grid;
grid-template-columns:minmax(280px,2fr) repeat(2,minmax(170px,1fr));
gap:16px;
}

.hub-controls label{
display:grid;
gap:8px;
font-weight:700;
color:var(--text);
}

.hub-controls input,.hub-controls select{
width:100%;
min-height:54px;
padding:12px 16px;
border:2px solid var(--border);
border-radius:14px;
background:var(--card);
color:var(--text);
font:inherit;
outline:none;
}

.hub-controls input:focus,.hub-controls select:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(37,99,235,.14);
}

.hub-status-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin:18px 0;
}

.hub-status-row p{
color:var(--sub);
font-weight:700;
}

.hub-status-row button{
border:1px solid var(--border);
background:var(--card);
color:var(--text);
border-radius:12px;
padding:10px 14px;
cursor:pointer;
font-weight:700;
}

.route-recommendations{
background:var(--card);
border:1px solid var(--border);
border-radius:18px;
padding:20px;
box-shadow:var(--shadow);
}

.route-recommendations h3{
margin-bottom:12px;
}

#imageRouteBox{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.route-chip{
display:inline-grid;
gap:2px;
padding:10px 14px;
border:1px solid var(--border);
border-radius:14px;
text-decoration:none;
background:var(--bg);
color:var(--text);
transition:var(--transition);
}

.route-chip:hover{
transform:translateY(-2px);
border-color:var(--primary);
}

.route-label{
font-size:12px;
color:var(--primary);
font-weight:800;
}

.route-empty{
color:var(--sub);
}

.image-hub-card{
position:relative;
overflow:hidden;
font-size:initial;
}

.tool-card-icon{
display:block;
font-size:42px;
margin-top:18px;
}

.format-route{
display:inline-flex;
align-items:center;
gap:8px;
padding:7px 10px;
border-radius:999px;
background:rgba(37,99,235,.1);
color:var(--primary);
font-size:14px;
}

.tool-ready-badge{
display:inline-block;
margin-top:18px;
padding:6px 10px;
border-radius:999px;
background:#dcfce7;
color:#166534;
font-size:13px;
font-weight:800;
}

body.dark .tool-ready-badge{
background:#14532d;
color:#dcfce7;
}

.hub-empty{
margin-top:20px;
padding:28px;
text-align:center;
border:1px dashed var(--border);
border-radius:16px;
color:var(--sub);
background:var(--card);
}

@media (max-width:820px){
.hub-controls{grid-template-columns:1fr;}
.hub-status-row{align-items:flex-start;flex-direction:column;}
.image-hub-search h2{font-size:30px;}
}

/* Stage 69: adaptive quality/volume prediction */
.smart-plan-prediction{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:10px;background:rgba(37,99,235,.08);font-size:13px}.smart-plan-prediction strong{color:#1d4ed8}.smart-plan-prediction span{color:#475569;text-align:right}@media(max-width:720px){.smart-plan-prediction{align-items:flex-start;flex-direction:column}.smart-plan-prediction span{text-align:left}}

/* Stage 71: prediction correction policy */
.smart-plan-correction{margin-top:10px;padding:10px 12px;border:1px solid rgba(99,102,241,.2);border-radius:12px;background:rgba(99,102,241,.06);display:grid;gap:3px}.smart-plan-correction strong{font-size:12px}.smart-plan-correction span,.smart-plan-correction small{font-size:11px;line-height:1.45;color:var(--muted,#64748b)}.smart-plan-correction.is-warning{border-color:rgba(245,158,11,.34);background:rgba(245,158,11,.08)}.smart-plan-correction.is-critical{border-color:rgba(239,68,68,.34);background:rgba(239,68,68,.08)}.smart-plan-correction.is-stable{border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.07)}

/* v3.25.9 home chip contrast fallback (kept in critical main.css) */
html[data-theme="dark"] :where(.ch-trust span,.ch-category-card small,.ch-quick-filter,.workspace-tag),
body.dark :where(.ch-trust span,.ch-category-card small,.ch-quick-filter,.workspace-tag){background:#20304a!important;color:#e6efff!important;border-color:#405577!important;opacity:1!important}

/* CM_HOME_THEME_CONTRACT_V3254 */
/* AllFileOne cross-page theme contract v3.25.9 */
:root{color-scheme:light;--cm-page-bg:#f5f7fb;--cm-surface:#fff;--cm-surface-2:#f8fbff;--cm-surface-3:#eef3fb;--cm-line:#d8e2f0;--cm-text:#172033;--cm-muted:#53627a;--cm-accent:#315cce;--cm-shadow:0 12px 30px rgba(31,55,100,.06)}
html[data-theme="dark"]{color-scheme:dark;--cm-page-bg:#0b1220;--cm-surface:#111a2b;--cm-surface-2:#172235;--cm-surface-3:#1d2a40;--cm-line:#334155;--cm-text:#e6edf8;--cm-muted:#a8b5c9;--cm-accent:#8bbcff;--cm-shadow:none}
html,body{background:var(--cm-page-bg);color:var(--cm-text)}
body,.page,.app-shell,.converter-shell,.tool-shell{background:var(--cm-page-bg)!important;color:var(--cm-text)!important}
:where(.topbar,.site-header,.converter-header){color:var(--cm-text)}
:where(.hero,.panel,.result,.card,.box,.workspace,.tool-card,.converter-card,.cm-static-seo-content,.cm-static-seo-inner,.cm-seo-panel,.cm-seo-faq-section,.cm-seo-related,.cm-search-intents){background:var(--cm-surface)!important;color:var(--cm-text)!important;border-color:var(--cm-line)!important;box-shadow:var(--cm-shadow)}
:where(.drop,.drop-area,.drop-zone,.upload-zone,.upload-box,.file-drop,.preview-area,.files,.options,.result-item,.file,.cm-search-intent-grid>li){background:var(--cm-surface-2)!important;color:var(--cm-text)!important;border-color:var(--cm-line)!important}
:where(.hero p,.status,.help,.hint,.muted,.cm-static-seo-summary,.cm-search-intents>p,.cm-seo-panel p,.cm-seo-panel li,.cm-seo-faq-section p){color:var(--cm-muted)!important}
:where(input,select,textarea){background:var(--cm-surface)!important;color:var(--cm-text)!important;border-color:var(--cm-line)!important}
:where(.btn.alt,.secondary-btn,.ghost-btn){background:var(--cm-surface-3)!important;color:var(--cm-text)!important;border-color:var(--cm-line)!important}
html[data-theme="dark"] :where(.mosaic-mode,.mosaic-sidebar,.mosaic-editor-panel,.mosaic-settings,.mosaic-thumb,.region-sidebar,.region-editor-panel,.region-settings,.region-thumb,.image-batch-panel,.mosaic-canvas-wrap,.region-canvas-wrap,.seo details){background:var(--cm-surface)!important;color:var(--cm-text)!important;border-color:var(--cm-line)!important}
html[data-theme="dark"] :where(.mosaic-mode.active,.mosaic-thumb.active,.region-thumb.active){background:#172d52!important;border-color:#5b8ee4!important}
html[data-theme="dark"] :where(.mosaic-mode span,.mosaic-thumb small,.region-thumb small,.mosaic-empty,.region-empty,.region-empty-list,.mosaic-help,.image-batch-head span,.file>span:first-child small){color:var(--cm-muted)!important}
@media(prefers-color-scheme:dark){html:not([data-theme]){color-scheme:dark}}


/* v3.25.9 home error boundary essentials */
.cm-error-boundary-panel,
.cm-error-boundary-min-upload {
  width: min(100%, var(--cm-content-max, 1240px));
  margin: 16px auto;
  box-sizing: border-box;
}.cm-error-boundary-panel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid #f59e0b;
  border-radius: 14px;
  background: #fffbeb;
  color: #78350f;
  box-shadow: 0 8px 24px rgba(120,53,15,.08);
}.cm-error-boundary-panel__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #f59e0b;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}.cm-error-boundary-panel__body strong { display:block; font-size:17px; margin-bottom:5px; }.cm-error-boundary-panel__body p { margin:0 0 7px; line-height:1.6; }.cm-error-boundary-panel__body small { display:block; opacity:.82; overflow-wrap:anywhere; }.cm-error-boundary-panel__actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }.cm-error-boundary-panel button,
.cm-error-boundary-file-button {
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}.cm-error-boundary-panel[data-retrying="true"] [data-action="retry"] { opacity:.6; pointer-events:none; }.cm-error-boundary-min-upload {
  padding: 18px;
  border: 1px dashed #94a3b8;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
}.cm-error-boundary-min-upload__inner { display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; }.cm-error-boundary-min-upload__inner strong { font-size:16px; }.cm-error-boundary-min-upload__inner span { flex:1 1 320px; color:#475569; }.cm-error-boundary-file-button { background:#2563eb; border-color:#2563eb; color:#fff; }[data-theme="dark"] .cm-error-boundary-panel,
html.dark .cm-error-boundary-panel {
  background:#2b2111;
  border-color:#d97706;
  color:#fde68a;
}[data-theme="dark"] .cm-error-boundary-min-upload,
html.dark .cm-error-boundary-min-upload {
  background:#111827;
  border-color:#64748b;
  color:#f8fafc;
}[data-theme="dark"] .cm-error-boundary-min-upload__inner span,
html.dark .cm-error-boundary-min-upload__inner span { color:#cbd5e1; }@media (max-width: 620px) {
  .cm-error-boundary-panel { grid-template-columns:1fr; margin:12px 14px; width:calc(100% - 28px); }
  .cm-error-boundary-panel__icon { width:36px; height:36px; font-size:20px; }
  .cm-error-boundary-panel__actions button { flex:1 1 100%; }
  .cm-error-boundary-min-upload { margin:12px 14px; width:calc(100% - 28px); }
}