@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');
:root{--primary:#16A34A;--primary-dark:#15803D;--primary-light:#BBF7D0;--bg:#0f172a;--bg2:#1e293b;--bg3:#334155;--text:#f1f5f9;--text-light:#94a3b8;--border:#334155;--radius:12px;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;}
a{color:inherit;text-decoration:none;}
.our-sites-bar{background:#1e293b;border-bottom:1px solid var(--border);padding:0 16px;display:flex;align-items:center;gap:12px;overflow-x:auto;white-space:nowrap;height:40px;font-size:0.78rem;}
.our-sites-label{color:var(--text-light);font-weight:600;flex-shrink:0;}
.our-sites-links{display:flex;gap:4px;}
.our-sites-links a{color:var(--text-light);padding:3px 8px;border-radius:6px;transition:background 0.15s;}
.our-sites-links a:hover,.our-sites-links a.active{background:var(--primary);color:white;}
.header{background:var(--primary);padding:0 20px;height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:100;}
.header-inner{max-width:1260px;margin:0 auto;width:100%;display:flex;align-items:center;gap:24px;}
.logo{font-size:1.2rem;font-weight:800;color:white;}
.nav{display:flex;gap:4px;margin-left:auto;}
.nav a{color:rgba(255,255,255,0.85);padding:6px 12px;border-radius:8px;font-size:0.88rem;font-weight:500;transition:background 0.15s;}
.nav a:hover{background:rgba(255,255,255,0.15);color:white;}
.hero{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%);padding:56px 20px 72px;text-align:center;}
.hero h1{font-size:2.2rem;font-weight:900;color:white;margin-bottom:12px;}
.hero p{font-size:1.05rem;color:rgba(255,255,255,0.88);max-width:560px;margin:0 auto 24px;}
.hero-related{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,0.15);border-radius:20px;padding:8px 16px;font-size:0.85rem;color:rgba(255,255,255,0.9);}
.hero-related a{color:white;font-weight:700;}
.hero-install-btn{margin-top:20px;background:white;color:var(--primary);border:none;padding:10px 24px;border-radius:20px;font-weight:700;cursor:pointer;font-size:0.9rem;display:none;}
.index-mobile-ad{display:none;padding:8px 16px;}
.index-with-sidebar{max-width:1260px;margin:-36px auto 0;padding:0 20px 80px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;}
.index-sidebar{position:sticky;top:76px;padding-top:40px;}
.index-ad-card{background:var(--bg2);border-radius:var(--radius);padding:12px;margin-bottom:16px;overflow:hidden;}
.tools-section{margin:0;padding-top:52px;}
.category-block{margin-bottom:40px;}
.category-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;}
.category-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;flex-shrink:0;}
.category-title{font-size:1.1rem;font-weight:800;}
.category-desc{font-size:0.85rem;color:var(--text-light);margin-top:2px;}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.tool-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;transition:transform 0.15s,border-color 0.15s;position:relative;}
.tool-card:hover{transform:translateY(-2px);border-color:var(--primary);}
.tool-icon{font-size:2.2rem;}
.tool-name{font-size:0.95rem;font-weight:700;}
.tool-desc{font-size:0.8rem;color:var(--text-light);line-height:1.5;}
.free-badge{background:#16A34A;color:white;font-size:0.62rem;font-weight:700;padding:2px 7px;border-radius:20px;}
.new-badge{position:absolute;top:8px;right:8px;background:#EF4444;color:white;font-size:0.62rem;font-weight:700;padding:2px 6px;border-radius:4px;}
.features{background:var(--bg2);padding:56px 20px;}
.features-inner{max-width:960px;margin:0 auto;}
.features h2{text-align:center;font-size:1.5rem;font-weight:800;margin-bottom:32px;}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.feature-card{background:var(--bg);border-radius:var(--radius);padding:24px 16px;text-align:center;}
.feature-icon{font-size:2rem;margin-bottom:10px;}
.feature-title{font-weight:700;margin-bottom:6px;}
.feature-desc{font-size:0.82rem;color:var(--text-light);}
.page-with-sidebar{max-width:1260px;margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:24px;padding:24px 20px 60px;align-items:start;}
.tool-page{min-width:0;}
.breadcrumb{font-size:0.82rem;color:var(--text-light);margin-bottom:16px;}
.breadcrumb a{color:var(--primary);}
.breadcrumb span{margin:0 6px;}
.tool-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;}
.tool-icon-lg{font-size:2.4rem;}
.tool-header h1{font-size:1.5rem;font-weight:800;}
.tool-header p{font-size:0.88rem;color:var(--text-light);margin-top:4px;}
.panel{background:var(--bg2);border-radius:var(--radius);border:1px solid var(--border);padding:24px;margin-bottom:16px;}
.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:40px 20px;text-align:center;cursor:pointer;transition:border-color 0.15s;}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--primary);}
.drop-zone h3{font-size:1rem;font-weight:700;margin:12px 0 6px;}
.drop-zone p{font-size:0.83rem;color:var(--text-light);}
.drop-zone-icon{font-size:2.5rem;}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;font-weight:700;font-size:0.9rem;cursor:pointer;border:none;transition:background 0.15s;}
.btn-primary{background:var(--primary);color:white;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{background:var(--bg3);color:var(--text);}
.btn-secondary:hover{background:#475569;}
.btn-sm{padding:7px 14px;font-size:0.8rem;}
.btn-full{width:100%;justify-content:center;margin-top:12px;}
.btn-select{display:inline-block;background:var(--primary);color:white;padding:8px 18px;border-radius:8px;font-weight:700;font-size:0.85rem;cursor:pointer;margin-top:12px;}
.result-box{background:var(--bg);border-radius:var(--radius);border:1px solid var(--border);padding:20px;margin-top:16px;}
.tips-panel{background:var(--bg2);border-radius:var(--radius);border:1px solid rgba(22,163,74,0.3);padding:20px;margin-top:16px;}
.tips-panel h3{font-size:0.95rem;font-weight:700;margin-bottom:10px;color:var(--primary-light);}
.tips-panel ul{padding-left:18px;font-size:0.85rem;color:var(--text-light);line-height:2;}
.ad-card{background:var(--bg2);border-radius:var(--radius);padding:12px;margin-bottom:16px;overflow:hidden;}
.mobile-top-ad{display:none;padding:8px 16px;}
.alert{padding:12px 16px;border-radius:8px;font-size:0.85rem;margin-top:12px;}
.alert-error{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);color:#FCA5A5;}
.alert-success{background:rgba(22,163,74,0.1);border:1px solid rgba(22,163,74,0.3);color:#86EFAC;}
label{font-size:0.85rem;font-weight:600;color:var(--text-light);display:block;margin-bottom:6px;}
select,input[type=number],input[type=text]{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;color:var(--text);font-size:0.9rem;outline:none;}
select:focus,input:focus{border-color:var(--primary);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.form-group{margin-bottom:16px;}
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);font-size:0.88rem;}
.stat-row:last-child{border-bottom:none;}
.stat-label{color:var(--text-light);}
.stat-value{font-weight:700;color:var(--primary-light);}
.ht-wrapper{overflow:auto;border-radius:8px;border:1px solid var(--border);margin-top:12px;}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.file-name-display{font-size:0.82rem;color:var(--text-light);margin-left:auto;}
.preview-table{width:100%;border-collapse:collapse;font-size:0.82rem;margin-top:12px;}
.preview-table th{background:var(--bg3);padding:8px 10px;text-align:left;font-weight:700;border:1px solid var(--border);}
.preview-table td{padding:6px 10px;border:1px solid var(--border);color:var(--text-light);}
.tab-bar{display:flex;gap:4px;margin-bottom:20px;}
.tab-btn{padding:8px 18px;border-radius:8px;font-weight:700;font-size:0.88rem;cursor:pointer;border:none;background:var(--bg3);color:var(--text-light);transition:background 0.15s;}
.tab-btn.active{background:var(--primary);color:white;}
.chart-container{position:relative;background:white;border-radius:8px;padding:16px;margin-top:16px;}
.hidden{display:none!important;}
.footer{background:#020617;padding:48px 20px 24px;}
.footer-inner{max-width:1260px;margin:0 auto;}
.footer-top{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-bottom:32px;}
.footer-col h4{font-size:0.9rem;font-weight:700;margin-bottom:12px;}
.footer-col a{display:block;font-size:0.83rem;color:var(--text-light);margin-bottom:6px;}
.footer-col a:hover{color:var(--primary);}
.footer-col p{font-size:0.83rem;color:var(--text-light);line-height:1.6;}
.footer-bottom{border-top:1px solid var(--border);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.footer-bottom p{font-size:0.82rem;color:var(--text-light);}
.footer-bottom-links{display:flex;gap:16px;}
.footer-bottom-links a{font-size:0.82rem;color:var(--text-light);}
.coupang-notice{font-size:0.72rem;color:#64748b;margin-top:12px;text-align:center;}
.lang-switcher{display:flex;align-items:center;gap:4px;}
.lang-switcher a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:0.8rem;font-weight:600;padding:3px 8px;border-radius:12px;transition:background 0.15s;}
.lang-switcher a.active{color:white;background:rgba(255,255,255,0.25);}
.lang-switcher a:hover{color:white;background:rgba(255,255,255,0.18);}
@media(max-width:1024px){.index-mobile-ad{display:block!important;}.index-sidebar{display:none!important;}.index-with-sidebar{grid-template-columns:1fr!important;}.page-with-sidebar{grid-template-columns:1fr!important;}.tool-sidebar{display:none!important;}.mobile-top-ad{display:block!important;}}
@media(max-width:768px){.tools-grid{grid-template-columns:repeat(2,1fr);}.features-grid{grid-template-columns:repeat(2,1fr);}.footer-top{grid-template-columns:repeat(2,1fr);}.hero h1{font-size:1.6rem;}.form-row{grid-template-columns:1fr;}}
@media(max-width:480px){.tools-grid{grid-template-columns:1fr;}}