/* ===== metoday 유용한 도구 — 공용 스타일 =====
   페이지별로 :root 에서 --accent / --bg-top / --bg-bot / --soft 등을 재정의해 테마색을 바꾼다. */
:root{
  --bg-top:#eef2f7; --bg-mid:#e6ecf4; --bg-bot:#dce4ef;
  --accent:#4a7bd0; --accent-sh:rgba(74,123,208,.4);
  --ink:#2e3a4d; --ink2:#6b7688; --soft:#f2f5fa; --soft2:#e8edf5; --line:#dbe3ef; --card:#fff;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--bg-top)}
body{
  font-family:'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  background:linear-gradient(160deg,var(--bg-top) 0%,var(--bg-mid) 55%,var(--bg-bot) 100%);
  color:var(--ink); min-height:100vh; line-height:1.6;
  display:flex; flex-direction:column; align-items:center;
}
.wrap{width:100%; max-width:520px; padding:16px; flex:1; display:flex; flex-direction:column}
a{color:var(--accent)}

/* 헤더 + 메뉴 */
.site-head{text-align:center; padding:20px 0 6px}
.site-head .logo{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--ink); font-weight:800; font-size:20px}
.site-head .logo img{width:24px;height:24px;object-fit:contain}
.nav-pills{display:flex; gap:8px; justify-content:center; margin:14px 0 4px}
.nav-pills a{display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-weight:700; font-size:14px;
  padding:8px 16px; border-radius:99px; background:#fff; color:var(--ink2); box-shadow:0 4px 12px rgba(46,58,77,.08)}
.nav-pills a img{width:18px;height:18px;object-fit:contain}
.nav-pills a.active{background:var(--accent); color:#fff}

/* 광고 */
.ad-slot{width:100%; max-width:520px; min-height:90px; margin:10px 0;
  background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 10px,var(--soft2) 10px,var(--soft2) 20px);
  border:1px dashed var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:var(--ink2); font-size:13px; letter-spacing:.5px}

/* 카드 */
.card{background:var(--card); border-radius:22px; box-shadow:0 10px 30px rgba(46,58,77,.12); padding:24px 20px; margin:8px 0}
h1{font-size:24px; line-height:1.35; text-align:center; margin-bottom:6px}
.lead{text-align:center; color:var(--ink2); font-size:14px; margin-bottom:18px}
h2.sec{font-size:16px; font-weight:800; margin:22px 4px 10px}

/* 개인정보 안내 배지 */
.privacy-note{display:flex; align-items:center; gap:8px; justify-content:center; font-size:12.5px; color:var(--ink2);
  background:var(--soft); border-radius:12px; padding:9px 12px; margin:2px 0 4px}
.privacy-note img{width:18px;height:18px;object-fit:contain;flex:none}

/* 버튼 */
.btn{display:block; width:100%; border:none; cursor:pointer; padding:15px; border-radius:15px; font-size:16px; font-weight:700;
  transition:transform .1s ease, box-shadow .2s, opacity .2s; font-family:inherit}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 16px var(--accent-sh)}
.btn-ghost{background:var(--soft2); color:var(--ink2)}
.btn-line{background:#fff; color:var(--ink); border:2px solid var(--line)}
.btn + .btn{margin-top:10px}
.btn-sm{padding:10px 14px; font-size:14px; border-radius:12px; width:auto; display:inline-block}

/* 드롭존 */
.dropzone{border:2px dashed var(--line); border-radius:18px; background:var(--soft); padding:30px 18px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s}
.dropzone.over{border-color:var(--accent); background:var(--soft2)}
.dropzone .dz-ico{font-size:34px; line-height:1}
.dropzone .dz-ico img{width:44px;height:44px;object-fit:contain}
.dropzone .dz-title{font-weight:800; margin-top:8px}
.dropzone .dz-hint{font-size:13px; color:var(--ink2); margin-top:4px}
.dropzone .chips{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:10px}
.chips .chip{font-size:11px; font-weight:700; color:var(--ink2); background:#fff; border:1px solid var(--line); padding:3px 9px; border-radius:99px}

/* 폼 요소 */
.field{margin:10px 0}
.field label{display:block; font-size:13px; font-weight:700; color:var(--ink2); margin-bottom:5px}
input[type=text], input[type=number], textarea, select{
  width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:2px solid var(--line); border-radius:12px; padding:11px 12px}
textarea{resize:vertical; min-height:80px}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent)}
.seg{display:flex; gap:6px; margin:8px 0 12px}
.seg button{flex:1; border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:13px; padding:10px;
  border-radius:12px; background:var(--soft2); color:var(--ink2); transition:background .15s, color .15s}
.seg button.on{background:var(--accent); color:#fff}
.opts-row{display:flex; flex-wrap:wrap; gap:8px}
/* opts-row 안 버튼은 균일 높이·중앙정렬 + .btn+.btn 세로여백 제거(정렬 깨짐 방지) */
.opts-row .btn-sm{flex:1 1 0; margin:0; min-height:46px; display:inline-flex; align-items:center; justify-content:center; text-align:center; line-height:1.25}

/* 진행/결과 */
.progress{height:8px; background:var(--soft2); border-radius:99px; overflow:hidden; margin:12px 0 4px; display:none}
.progress.on{display:block}
.progress > i{display:block; height:100%; width:0; background:var(--accent); transition:width .25s}
.result-box{margin-top:14px}
.file-row{display:flex; align-items:center; gap:12px; background:var(--soft); border-radius:14px; padding:12px; margin-top:10px}
.file-row .thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#fff;flex:none;border:1px solid var(--line)}
.file-row .meta{flex:1; min-width:0}
.file-row .meta .fn{font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.file-row .meta .fi{font-size:12px; color:var(--ink2)}
.grid-imgs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px}
.grid-imgs img{width:100%; border-radius:10px; border:1px solid var(--line)}
.hint{font-size:12.5px; color:var(--ink2); text-align:center; margin-top:10px}
.err{color:#c0392b; font-size:13px; text-align:center; margin-top:8px}
canvas.work{max-width:100%; border-radius:12px; border:1px solid var(--line); display:block; margin:0 auto}
table.preview{width:100%; border-collapse:collapse; font-size:12px; margin-top:10px}
table.preview td{border:1px solid var(--line); padding:5px 7px; white-space:nowrap; overflow:hidden; max-width:90px; text-overflow:ellipsis}

/* 크로스 추천 */
.cross{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.cross .ct-title{font-size:14px;font-weight:800;text-align:center;margin-bottom:12px;color:var(--ink2)}
.ct-scroll{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 10px;scrollbar-width:none}
.ct-scroll::-webkit-scrollbar{display:none}
.ct-card{flex:0 0 auto;width:110px;text-decoration:none;color:inherit;background:var(--soft);border-radius:16px;padding:14px 8px;text-align:center;transition:transform .1s}
.ct-card:active{transform:scale(.96)}
.ct-card img{width:44px;height:44px;object-fit:contain}
.ct-card .ct-name{font-size:12px;font-weight:700;margin-top:6px;line-height:1.3}

/* footer */
.footer{text-align:center; font-size:12px; color:var(--ink2); padding:22px 0}
.footer a{color:var(--ink2)}
.footer .legal{margin-top:9px;font-size:11px;opacity:.75}

/* 토스트 */
.toast{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:99px; font-size:14px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:99; max-width:90%}
.toast.show{opacity:1}
.hidden{display:none !important}
.fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}