/* unzip.kr — "서류 창구" 미학: 따뜻한 종이 + 먹 잉크 + 도장 주홍 */
:root {
  --paper: #faf6ee;
  --paper-deep: #f3ecdd;
  --ink: #22262e;
  --ink-soft: #565c68;
  --line: #d8cfbc;
  --stamp: #d43d17;        /* 도장 주홍 */
  --stamp-soft: #fbe9e2;
  --seal-green: #1e6f5c;   /* 검증 완료 */
  --seal-green-soft: #e3f0ec;
  --radius: 10px;
  --font-display: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  /* 종이 결 텍스처 */
  background-image:
    radial-gradient(rgba(34,38,46,.028) 1px, transparent 1px),
    linear-gradient(180deg, rgba(212,61,23,.03), transparent 240px);
  background-size: 22px 22px, 100% 100%;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* ── 헤더 ── */
header.site {
  border-bottom: 3px double var(--line);
  background: rgba(250,246,238,.92);
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 10;
}
header.site .wrap { display: flex; align-items: center; gap: 14px; padding: 13px 20px; }
.brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  text-decoration: none; color: var(--ink); letter-spacing: -.02em;
}
.brand b { color: var(--stamp); }
nav.tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
nav.tools a, nav.tools summary {
  font-size: .84rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  padding: 5px 11px; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap; cursor: pointer; list-style: none;
}
nav.tools a:hover, nav.tools summary:hover { border-color: var(--line); background: var(--paper-deep); }
nav.tools a[aria-current="page"], nav.tools summary.active { color: var(--stamp); border-color: var(--stamp); }

/* "다른 도구" 드롭다운 */
nav.tools details.more { position: relative; }
nav.tools summary::-webkit-details-marker { display: none; }
nav.tools summary::after { content: ' ▾'; font-size: .7em; }
nav.tools details[open] summary { border-color: var(--line); background: var(--paper-deep); }
nav.tools .menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 160px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(34,38,46,.12); z-index: 30;
}
nav.tools .menu a { border-radius: 6px; }

/* ── 히어로 ── */
.hero { padding: 52px 0 8px; }
.hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 5.2vw, 2.6rem); line-height: 1.25; letter-spacing: -.02em;
}
.hero h1 .under { box-shadow: inset 0 -0.42em var(--stamp-soft); }
.hero p.lead { margin-top: 12px; color: var(--ink-soft); font-size: 1.02rem; max-width: 56ch; }
.trust {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: .85rem; color: var(--seal-green); background: var(--seal-green-soft);
  border: 1px solid rgba(30,111,92,.25); padding: 6px 14px; border-radius: 999px;
}
.trust::before { content: '●'; font-size: .6rem; }

/* ── 드롭존: 서류 접수 창구 ── */
.dropzone {
  margin: 30px 0 8px; padding: 54px 24px; text-align: center; cursor: pointer;
  border: 2.5px dashed var(--line); border-radius: var(--radius);
  background:
    linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(216,207,188,.18) 14px 28px);
  transition: border-color .2s, background-color .2s, transform .15s;
  position: relative;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--stamp); }
.dropzone.dragover {
  border-color: var(--stamp); border-style: solid;
  background-color: var(--stamp-soft); transform: scale(1.01);
}
.dropzone .big { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.dropzone .hint { color: var(--ink-soft); font-size: .88rem; margin-top: 6px; }
.dropzone .formats { margin-top: 14px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.formats span {
  font-size: .74rem; letter-spacing: .06em; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink-soft);
}
.dropzone input[type=file] { display: none; }

/* ── 결과 목록: 문서 대장 ── */
.result { margin: 26px 0; display: none; }
.result.show { display: block; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.result .summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 4px; font-size: .92rem;
}
.result .summary .name { font-weight: 600; word-break: break-all; }
.badge {
  font-size: .75rem; padding: 3px 10px; border-radius: 4px; white-space: nowrap;
}
.badge.fix { background: var(--seal-green-soft); color: var(--seal-green); border: 1px solid rgba(30,111,92,.3); }
.badge.warn { background: var(--stamp-soft); color: var(--stamp); border: 1px solid rgba(212,61,23,.3); }

table.files { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.files { display: block; overflow-x: auto; }
table.files thead th {
  font-size: .78rem; font-weight: 600; color: var(--ink-soft); text-align: left;
  padding: 10px 14px; background: var(--paper-deep); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.files td { padding: 11px 14px; border-bottom: 1px solid #efe9db; font-size: .9rem; vertical-align: middle; }
table.files tr:last-child td { border-bottom: 0; }
td.fname { word-break: break-all; min-width: 180px; }
td.fsize { white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
button.save {
  font-family: var(--font-body); font-size: .84rem; cursor: pointer;
  padding: 6px 14px; border-radius: 6px; border: 1.5px solid var(--ink);
  background: #fff; color: var(--ink); transition: all .15s; white-space: nowrap;
}
button.save:hover { background: var(--ink); color: var(--paper); }
button.save:disabled { opacity: .45; cursor: default; }
button.primary {
  border-color: var(--stamp); background: var(--stamp); color: #fff;
  font-weight: 600; padding: 10px 22px; font-size: .95rem;
}
button.primary:hover { background: #b83210; border-color: #b83210; color: #fff; }

/* 검증 도장 */
.stamp-seal {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  color: var(--seal-green); border: 2px solid var(--seal-green);
  border-radius: 6px; padding: 3px 10px; transform: rotate(-3deg);
  animation: stampIn .3s cubic-bezier(.2, 2.2, .4, 1) both;
}
@keyframes stampIn { from { transform: rotate(-3deg) scale(1.6); opacity: 0; } }

/* 오류 안내 */
.notice {
  margin: 14px 0; padding: 14px 18px; border-radius: var(--radius);
  border: 1px solid rgba(212,61,23,.35); background: var(--stamp-soft);
  font-size: .9rem;
}
.notice a { color: var(--stamp); font-weight: 600; }
.notice.ok { border-color: rgba(30,111,92,.3); background: var(--seal-green-soft); }

/* ── 본문 콘텐츠 (SEO) ── */
main section.content { padding: 34px 0 6px; }
section.content h2 {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  margin-bottom: 12px; padding-left: 12px; border-left: 4px solid var(--stamp);
}
section.content h3 { font-size: 1.02rem; margin: 18px 0 6px; }
section.content p, section.content li { color: #3a3f49; font-size: .95rem; }
section.content ul, section.content ol { padding-left: 22px; margin: 8px 0; }
section.content .qa { border-top: 1px solid var(--line); padding: 14px 2px; }
section.content .qa:last-child { border-bottom: 1px solid var(--line); }
.qa h3 { margin: 0 0 6px; }
.qa h3::before { content: 'Q. '; color: var(--stamp); font-family: var(--font-display); }

/* ── 푸터 ── */
footer.site { margin-top: 56px; border-top: 3px double var(--line); padding: 26px 0 40px; }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .82rem; color: var(--ink-soft); }
footer.site a { color: var(--ink-soft); }

@media (max-width: 560px) {
  .hero { padding-top: 34px; }
  .dropzone { padding: 40px 14px; }
  header.site .wrap { flex-wrap: wrap; gap: 8px; padding-bottom: 10px; }
  nav.tools { margin-left: 0; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  nav.tools::-webkit-scrollbar { display: none; }
  nav.tools a, nav.tools summary { font-size: .8rem; padding: 4px 9px; }
  nav.tools .menu { right: auto; left: 0; }
}

/* ── 블로그 아티클 ── */
article.post { padding: 40px 0 10px; }
article.post h1 { font-family: var(--font-display); font-size: clamp(1.5rem, 4.5vw, 2.1rem); line-height: 1.3; letter-spacing: -.02em; }
article.post .meta { color: var(--ink-soft); font-size: .84rem; margin: 10px 0 26px; }
article.post h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 34px 0 10px; padding-left: 12px; border-left: 4px solid var(--stamp); }
article.post h3 { font-size: 1.02rem; margin: 22px 0 8px; }
article.post p, article.post li { color: #3a3f49; font-size: .97rem; margin: 10px 0; }
article.post ul, article.post ol { padding-left: 24px; }
article.post code { background: var(--paper-deep); padding: 1px 6px; border-radius: 4px; font-size: .88em; }
article.post table { border-collapse: collapse; margin: 14px 0; width: 100%; display: block; overflow-x: auto; }
article.post th, article.post td { border: 1px solid var(--line); padding: 8px 12px; font-size: .9rem; text-align: left; }
article.post th { background: var(--paper-deep); }
.cta-tool {
  margin: 26px 0; padding: 20px 22px; border-radius: var(--radius);
  background: #fff; border: 2px solid var(--stamp);
  box-shadow: 4px 4px 0 var(--stamp-soft);
}
.cta-tool strong { font-family: var(--font-display); }
.cta-tool a.btn {
  display: inline-block; margin-top: 10px; padding: 9px 20px; border-radius: 6px;
  background: var(--stamp); color: #fff; text-decoration: none; font-weight: 600; font-size: .93rem;
}
.cta-tool a.btn:hover { background: #b83210; }

/* 블로그 목록 */
.post-list { padding: 20px 0; }
.post-list a.card {
  display: block; padding: 18px 20px; margin: 12px 0; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.post-list a.card:hover { border-color: var(--stamp); transform: translateX(4px); }
.post-list a.card h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 6px; border: 0; padding: 0; }
.post-list a.card p { color: var(--ink-soft); font-size: .88rem; margin: 0; }