/* =========================================================
   Shared CSS: Design & Media tools (Converter + Favicon)
   - Built from style_converter_final.css + style_favicon_updated.css
   - Goal: keep BOTH pages rendering correctly with one CSS file
   ========================================================= */

:root{
  /* Converter vars (kept) */
  --primary:#3b82f6;
  --primary-dark:#2563eb;
  --success:#22c55e;
  --bg-light:#f8fafc;
  --border-color:#e2e8f0;
  --text-main:#1e293b;
  --text-sub:#64748b;

  /* Favicon vars (kept) */
  --bg:#f6f8ff;
  --card:#ffffff;
  --ink:#0b1220;
  --muted:#5a6b87;
  --line:#e6ecff;
  --blue:#2563eb;
  --blue2:#1d4ed8;
  --shadow:0 10px 30px rgba(12, 24, 60, .10);
  --radius:16px;
  --radius2:12px;
  --focus:0 0 0 4px rgba(37,99,235,.18);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Alignment helpers — mb-wrap이 max-width:1200px 기준 제공 */
  --dm-max:100%;
}

/* Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  margin-top:70px;
  color:var(--ink);
  font-family: 'Pretendard', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(1200px 600px at 30% -20%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(1200px 600px at 80% 0%, rgba(59,130,246,.10), transparent 60%),
    var(--bg-light);
}

/* Links */
a{color:inherit}


/* ----- Converter layout patch — mb-wrap이 1200px 기준 제공, 내부는 100% 사용 ----- */
.tool-container{max-width:100%;padding:20px 0;}

/* ===== Converter styles ===== */
/* 1. 기본 스타일 */

/* 2. 헤더 */
.tool-header { text-align: center; margin-bottom: 40px; }
.badge-wrapper { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.badge { font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 20px; }
.badge.blue { background: #e0f2fe; color: #0369a1; }
.badge.green { background: #dcfce7; color: #15803d; }
.badge.gray { background: #f1f5f9; color: #475569; }

.tool-header h2 { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-bottom: 8px; }
.tool-desc { color: var(--text-sub); font-size: 1.1rem; }

/* 3. 컨버터 박스 */
.converter-box {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06);
    padding: 35px;
    border: 1px solid var(--border-color);
}

.controls-area { margin-bottom: 25px; border-bottom: 1px solid #f1f5f9; padding-bottom: 20px; }
.option-group { display: flex; align-items: center; gap: 15px; }
.option-group label { font-weight: 700; color: #475569; font-size: 0.95rem; }
.custom-select { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid var(--border-color); outline: none; }

.drop-zone {
    border: 3px dashed #cbd5e1;
    border-radius: 16px;
    padding: 60px 20px;
    text-align: center;
    cursor: pointer;
    background: #f8fafc;
    transition: all 0.2s;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--primary); background: #eff6ff; }
.icon-area svg { width: 64px; height: 64px; margin-bottom: 15px; }
.main-text { font-size: 1.25rem; font-weight: 700; margin-bottom: 5px; }
.sub-text { font-size: 0.95rem; color: #94a3b8; }

/* 4. 결과 리스트 */
.result-list { margin-top: 30px; display: flex; flex-direction: column; gap: 12px; }
.result-item {
    display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid #e2e8f0; padding: 15px; border-radius: 12px;
}
.result-thumb { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; }
.result-info { flex: 1; margin-left: 15px; }
.file-name { font-weight: 700; font-size: 0.95rem; display: block; }
.file-meta { font-size: 0.8rem; color: #888; }
.download-link {
    background: var(--success); color: white; text-decoration: none;
    padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: bold;
}

/* 5. 푸터 */
.tool-footer { margin-top: 50px; display: flex; flex-direction: column; gap: 30px; }
.info-section h3 { font-size: 1.2rem; color: #334155; margin-bottom: 12px; border-left: 5px solid var(--primary); padding-left: 10px; }
.info-section p, .info-section li { font-size: 0.95rem; color: #64748b; line-height: 1.7; }
.security-card { background: #fffbeb; border: 1px solid #fef3c7; padding: 15px; border-radius: 10px; margin-top: 15px; color: #92400e; }
/* 6. SEO/FAQ 가독성 보강 */
.tool-footer ol { padding-left: 18px; }
.tool-footer ul { padding-left: 18px; }
.tool-footer li { margin: 6px 0; }

/* ===== Favicon styles ===== */


.top{
  padding:20px 0 16px;
}
.brand{
  max-width:100%;
  margin:0;
  display:flex;
  gap:14px;
  align-items:center;
}
.logo{
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  border-radius:13px;
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  font-size:22px;flex-shrink:0;
}
h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.3px}
.sub{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}

.wrap{max-width:100%;padding:0 0 60px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  margin:14px 0;
}

.card-h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.card-h h2{margin:0;font-size:16px}
.hint{margin:0;color:var(--muted);font-size:12px}

.uploader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px;
  border:1px dashed rgba(37,99,235,.35);
  border-radius:var(--radius2);
  background:linear-gradient(180deg, rgba(37,99,235,.06), rgba(37,99,235,.02));
  cursor:pointer;
  outline:none;
}
.uploader:focus{box-shadow:var(--focus)}
.uploader.is-drag{
  background:linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.04));
  border-color:rgba(37,99,235,.55);
}
.uploader-left{display:flex;gap:12px;align-items:center}
.upload-ic{font-size:18px}
.uploader-title{font-weight:650}
.uploader-desc{color:var(--muted);font-size:12px;margin-top:2px}

.btn{
  border:1px solid rgba(37,99,235,.25);
  background:#fff;
  color:var(--ink);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
}
.btn:hover{border-color:rgba(37,99,235,.45)}
.btn:focus{outline:none;box-shadow:var(--focus)}
.btn.primary{
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
  border-color:transparent;
}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn2{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.btn2:hover{border-color:rgba(37,99,235,.35)}
.btn2:focus{outline:none;box-shadow:var(--focus)}

.preview-row{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top:14px;
}
.preview{
  display:flex;
  gap:14px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:rgba(246,248,255,.6);
}
.preview-box{
  width:92px;height:92px;
  border-radius:16px;
  border:1px solid var(--line);
  background: repeating-conic-gradient(from 0deg, #f1f4ff 0 25%, #ffffff 0 50%) 0 0/20px 20px;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.preview canvas{width:92px;height:92px}
.preview-meta{min-width:0}
.preview-meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:420px}
.muted{color:var(--muted)}
.small{font-size:12px}

.quick{
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:rgba(246,248,255,.6);
}
.quick-title{font-weight:700;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.22);
  background:#fff;
  cursor:pointer;
  font-weight:650;
  font-size:12px;
}
.chip:hover{border-color:rgba(37,99,235,.45)}
.chip:focus{outline:none;box-shadow:var(--focus)}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .preview-row{grid-template-columns:1fr}
}
.field{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  padding:12px;
  background:rgba(246,248,255,.45);
}
.lbl{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:750;
  margin-bottom:10px;
}
.lbl2{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.row input[type="text"]{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  background:#fff;
}
.row input[type="text"]:focus{box-shadow:var(--focus);border-color:rgba(37,99,235,.35)}
.row input[type="color"]{width:46px;height:40px;border:none;background:transparent}
.row input[type="number"]{
  width:130px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  background:#fff;
}
.row input[type="number"]:focus{box-shadow:var(--focus);border-color:rgba(37,99,235,.35)}
.toggle{display:flex;gap:10px;align-items:center;margin:8px 0}
.toggle input{transform:scale(1.1)}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg-btn{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-weight:750;
  font-size:12px;
}
.seg-btn.is-on{
  border-color:rgba(37,99,235,.35);
  background:rgba(37,99,235,.08);
}
.seg-btn:focus{outline:none;box-shadow:var(--focus)}
.range-meta{display:flex;justify-content:flex-end;color:var(--muted);font-size:12px;margin-top:6px}
input[type="range"]{width:100%}

.sizes-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.custom{display:flex;gap:8px;align-items:center}
.custom input{
  width:130px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  background:#fff;
}
.custom input:focus{box-shadow:var(--focus);border-color:rgba(37,99,235,.35)}

.sizes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.size{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  user-select:none;
  font-weight:700;
  font-size:12px;
}
.size.is-on{
  border-color:rgba(37,99,235,.35);
  background:rgba(37,99,235,.08);
}
.size input{display:none}
.size:focus{outline:none;box-shadow:var(--focus)}

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

.results{margin-top:16px}
.results-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.result-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
}
@media (max-width: 980px){
  .result-grid{grid-template-columns: repeat(2, 1fr)}
}
.r-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.r-top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.r-title{font-weight:800;font-size:12px}
.r-canvas{
  width:100%;
  aspect-ratio:1/1;
  border-radius:14px;
  border:1px solid var(--line);
  background: repeating-conic-gradient(from 0deg, #f1f4ff 0 25%, #ffffff 0 50%) 0 0/20px 20px;
  display:grid;place-items:center;
  overflow:hidden;
}
.r-canvas canvas{width:100%;height:100%}
.r-actions{display:flex;gap:8px;flex-wrap:wrap}
.r-actions .btn2{flex:1}

.foot{padding:10px 6px}

.tip{
  width:18px;height:18px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(37,99,235,.28);
  color:var(--blue2);
  font-weight:900;
  font-size:12px;
  background:#fff;
  cursor:help;
  position:relative;
}
.tip:focus{outline:none;box-shadow:var(--focus)}
.tip::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: calc(100% + 10px);
  width: min(320px, 70vw);
  background:#0b1220;
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
  font-size:12px;
  line-height:1.4;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  transform:translateX(-50%) translateY(6px);
  z-index:10;
}
.tip::before{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom: calc(100% + 4px);
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:7px solid #0b1220;
  opacity:0;
  transition:opacity .15s ease;
}
.tip:hover::after,.tip:focus::after{opacity:1; transform:translateX(-50%) translateY(0)}
.tip:hover::before,.tip:focus::before{opacity:1}

/* ----- Shared helpers ----- */
.hidden{display:none!important}
.muted{color:var(--muted)}
.small{font-size:12px}

/* Buttons alignment between tools (safe) */
button{font-family:inherit}