/*
 * tools.css — 도구 공용 + tools hub + shorten + qrcode + pdf + insa
 *
 * 시안: /var/services/web/.design/neisme/2026/tools/index.md §6
 *       shorten.md §8, qrcode.md §7, pdf.md §8, insa.md §8
 *
 * 의존: tokens.css, design.css
 * 하드코딩 금지 — var(--*) 만 사용
 */

/* ── 공용 sr-only ──────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── form-field 공용 ───────────────────────────────────────────────────────── */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-fg); }
.form-field__help  { font-size: var(--fs-xs); color: var(--color-fg-subtle); margin: 0; }
.form-field__error { font-size: var(--fs-sm); color: var(--color-danger); margin: 0; display: flex; gap: var(--space-1); }
.form-field__icon  { color: var(--color-fg-muted); flex: 0 0 auto; }
.form-field__prefix { font-size: var(--fs-sm); color: var(--color-fg-muted); white-space: nowrap; align-self: center; }
.form-field__group { display: flex; align-items: center; gap: var(--space-2); }
.form-field__group .form-field__input { flex: 1; }
.form-field__lock  { color: var(--color-fg-subtle); font-size: var(--fs-xs); }

.form-field__input {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: var(--fs-base);
  font-family: var(--font-sans);
  transition: border-color var(--duration-fast) var(--ease-out);
  width: 100%;
  box-sizing: border-box;
}
.form-field__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.form-field__input[aria-invalid="true"] { border-color: var(--color-danger); }
.form-field__input--multi {
  height: auto;
  min-height: 120px;
  padding: var(--space-3) var(--space-4);
  resize: vertical;
}
.form-field__input--color { height: 40px; width: 64px; padding: 0; cursor: pointer; }

/* ── btn 공용 ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-fg, #fff); border-color: var(--color-primary); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost   { background: transparent; color: var(--color-fg-muted); border-color: var(--color-border); }
.btn-ghost:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
.btn-lg      { height: 52px; padding: 0 var(--space-8); font-size: var(--fs-md); border-radius: var(--radius-lg); }
.btn-sm      { height: 32px; padding: 0 var(--space-3); font-size: var(--fs-xs); }
.btn-full    { width: 100%; justify-content: center; }
.btn-icon    { width: 36px; height: 36px; padding: 0; justify-content: center; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── alert ─────────────────────────────────────────────────────────────────── */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid;
}
.alert--success { background: var(--color-success-soft); border-color: var(--color-success); color: var(--color-success); }
.alert--danger { background: var(--color-danger-soft); border-color: var(--color-danger); color: var(--color-danger); }
.alert--warn   { background: var(--color-warn-soft); border-color: var(--color-warn); color: var(--color-warn); }
.alert__icon   { font-size: var(--fs-lg); flex: 0 0 auto; }
.alert__title  { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }

/* ── toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: var(--space-6); right: var(--space-6);
  background: var(--color-fg); color: var(--color-bg);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  z-index: 9000;
  box-shadow: var(--shadow-xl);
  animation: toast-in .15s var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLS HUB
   ═══════════════════════════════════════════════════════════════════════════ */

.tools-page { padding-bottom: var(--space-12); }

/* hero */
.tools-hero { background: var(--gradient-hero); padding: var(--space-12) 0 var(--space-8); }
.tools-hero__inner { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--space-6); }
.tools-hero__eyebrow { color: var(--color-primary); font-size: var(--fs-sm); letter-spacing: var(--letter-wide); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.tools-hero__title   { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-fg); line-height: var(--line-tight); margin: 0; }
.tools-hero__lead    { font-size: var(--fs-md); color: var(--color-fg-muted); line-height: var(--line-base); margin: var(--space-3) 0 0; }

/* grid */
.tools-grid { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); }
.tools-grid__list { display: grid; gap: var(--space-6); grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; }

/* card */
.tools-card { position: relative; }
.tools-card__link {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: inherit;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  height: 100%;
  box-sizing: border-box;
}
.tools-card__link:hover { border-color: var(--color-border-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.tools-card__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.tools-card__icon {
  font-size: var(--fs-2xl); display: inline-flex;
  width: 48px; height: 48px;
  background: var(--color-primary-soft); color: var(--color-primary-soft-fg);
  border-radius: var(--radius-md);
  align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.tools-card__badge {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: var(--fs-xs); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-accent-soft); color: var(--color-accent-soft-fg);
  font-weight: var(--fw-semibold);
}
.tools-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; color: var(--color-fg); }
.tools-card__desc  { font-size: var(--fs-sm); color: var(--color-fg-muted); line-height: var(--line-base); margin: 0; }
.tools-card__bullets {
  list-style: none; padding: 0; margin: auto 0 0;
  font-size: var(--fs-xs); color: var(--color-fg-subtle);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.tools-card__bullets li.tools-card__bullet--active { color: var(--color-primary); font-weight: var(--fw-medium); }

/* notice */
.tools-notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  max-width: var(--container-xl); margin: 0 auto var(--space-12);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  background: var(--color-info-soft); border: 1px solid var(--color-info);
  color: var(--color-info-active);
}
.tools-notice__icon { font-size: var(--fs-md); flex: 0 0 auto; }
.tools-notice p     { font-size: var(--fs-sm); line-height: var(--line-base); margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTEN
   ═══════════════════════════════════════════════════════════════════════════ */

.short-page { padding-bottom: var(--space-12); }

.short-hero        { background: var(--gradient-hero); padding: var(--space-12) 0 var(--space-8); }
.short-hero__inner { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--space-6); }
.short-hero__eyebrow { color: var(--color-primary); font-size: var(--fs-sm); letter-spacing: var(--letter-wide); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.short-hero__title   { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-fg); margin: 0; }
.short-hero__lead    { font-size: var(--fs-md); color: var(--color-fg-muted); margin: var(--space-3) 0 0; }

.short-form { max-width: var(--container-md); margin: var(--space-8) auto; padding: 0 var(--space-6); }
.form-field--lg .form-field__input {
  height: 56px; padding: 0 var(--space-6) 0 var(--space-12);
  font-size: var(--fs-md); border: 2px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.form-field--lg { position: relative; }
.form-field--lg .form-field__icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); pointer-events: none; }
.form-field--lg .form-field__input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-soft), var(--shadow-md); }

.short-options { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-4); }
.short-options__summary { cursor: pointer; color: var(--color-fg-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); list-style: none; }
.short-options__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-3); }

.short-result { max-width: var(--container-md); margin: var(--space-6) auto; padding: 0 var(--space-6); }
.short-result__card { background: var(--color-success-soft); border: 1px solid var(--color-success); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.short-result__url { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--color-primary); font-family: var(--font-mono); word-break: break-all; }
.short-result__actions { display: flex; gap: var(--space-2); align-items: center; }
.short-result__meta { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: 0; }

.short-list { max-width: var(--container-xl); margin: var(--space-12) auto; padding: 0 var(--space-6); }
.short-list__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.short-list__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.short-list__search { max-width: 320px; flex: 1; position: relative; }
.short-list__search .form-field__input { padding-left: var(--space-10); }
.short-list__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.short-list__empty, .short-list__loading, .short-list__end { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-fg-muted); font-size: var(--fs-sm); }

.short-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); background: var(--color-bg); }
.short-item__key  { font-family: var(--font-mono); font-weight: var(--fw-semibold); color: var(--color-primary); }
.short-item__long { font-size: var(--fs-sm); color: var(--color-fg-muted); word-break: break-all; }
.short-item__meta { font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.short-item__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.short-item__badge--expired { background: var(--color-danger-soft); color: var(--color-danger); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

.short-modal { border: none; border-radius: var(--radius-lg); padding: 0; max-width: 480px; width: 90%; box-shadow: var(--shadow-xl); }
.short-modal::backdrop { background: rgba(0,0,0,.5); }
.short-modal__inner { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.short-modal__head { display: flex; justify-content: space-between; align-items: center; }
.short-modal__head h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.short-modal__close { cursor: pointer; }
.short-modal__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); margin-top: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   QR CODE
   ═══════════════════════════════════════════════════════════════════════════ */

.qr-page { padding-bottom: var(--space-12); }

.qr-hero        { background: var(--gradient-hero); padding: var(--space-12) 0 var(--space-8); }
.qr-hero__inner { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--space-6); }
.qr-hero__eyebrow { color: var(--color-primary); font-size: var(--fs-sm); letter-spacing: var(--letter-wide); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.qr-hero__title   { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-fg); margin: 0; }
.qr-hero__lead    { font-size: var(--fs-md); color: var(--color-fg-muted); margin: var(--space-3) 0 0; }

.qr-form { max-width: var(--container-md); margin: 0 auto; padding: var(--space-8) var(--space-6); }
.qr-options { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-4) var(--space-6); margin: 0 0 var(--space-4); }
.qr-options__summary { cursor: pointer; color: var(--color-fg-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); list-style: none; }
.qr-options__row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: var(--space-4); margin-top: var(--space-3); }

.qr-result { max-width: var(--container-md); margin: var(--space-6) auto; padding: 0 var(--space-6); text-align: center; }
.qr-result__figure { display: inline-block; padding: var(--space-6); background: var(--color-surface); border-radius: var(--radius-lg); }
#qr-canvas { border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: block; }
.qr-result__caption { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: var(--space-3) 0 0; word-break: break-all; max-width: 300px; }
.qr-result__actions { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); flex-wrap: wrap; }
.qr-result__save { display: flex; gap: var(--space-3); align-items: flex-end; max-width: 480px; margin: var(--space-6) auto 0; }
.qr-result__notice { background: var(--color-info-soft); border: 1px solid var(--color-info); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); color: var(--color-info-active); font-size: var(--fs-sm); margin-top: var(--space-4); }

.qr-list { max-width: var(--container-xl); margin: var(--space-12) auto; padding: 0 var(--space-6); }
.qr-list__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.qr-list__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.qr-list__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.qr-list__empty, .qr-list__loading { text-align: center; padding: var(--space-8) var(--space-4); color: var(--color-fg-muted); font-size: var(--fs-sm); }

.qr-item { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.qr-item__thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); object-fit: contain; background: var(--color-surface); }
.qr-item__label { font-weight: var(--fw-semibold); color: var(--color-fg); font-size: var(--fs-base); }
.qr-item__text  { font-size: var(--fs-sm); color: var(--color-fg-muted); word-break: break-all; }
.qr-item__meta  { font-size: var(--fs-xs); color: var(--color-fg-subtle); }
.qr-item__actions { display: flex; gap: var(--space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   PDF
   ═══════════════════════════════════════════════════════════════════════════ */

.pdf-page { padding-bottom: var(--space-12); }

.pdf-hero        { background: var(--gradient-hero); padding: var(--space-12) 0 var(--space-8); }
.pdf-hero__inner { max-width: var(--container-md); margin: 0 auto; padding: 0 var(--space-6); }
.pdf-hero__eyebrow { color: var(--color-primary); font-size: var(--fs-sm); letter-spacing: var(--letter-wide); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.pdf-hero__title   { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-fg); margin: 0; }
.pdf-hero__lead    { font-size: var(--fs-md); color: var(--color-fg-muted); margin: var(--space-3) 0 0; }

.pdf-section { max-width: var(--container-xl); margin: 0 auto; padding: var(--space-8) var(--space-6); }
.pdf-section__title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--color-fg); margin: 0 0 var(--space-2); }
.pdf-section__desc  { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: 0 0 var(--space-6); }

.pdf-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 0; }

.pdf-card {
  position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-6); background: var(--color-bg);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.pdf-card__icon {
  font-size: var(--fs-2xl); width: 48px; height: 48px;
  background: var(--color-primary-soft); color: var(--color-primary-soft-fg);
  border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pdf-card__badge {
  position: absolute; top: var(--space-4); right: var(--space-4);
  font-size: var(--fs-xs); padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-warn-soft); color: var(--color-warn);
  font-weight: var(--fw-semibold);
}
.pdf-card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-fg); margin: 0; }
.pdf-card__desc  { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: 0; }
.pdf-card__guide { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.pdf-card__guide--warn { background: var(--color-warn-soft); border-color: var(--color-warn); color: var(--color-warn); }
.pdf-card__form { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; }
.pdf-card--maintenance { opacity: 0.7; }

.pdf-notice { display: flex; gap: var(--space-3); max-width: var(--container-xl); margin: 0 auto var(--space-12); padding: var(--space-4) var(--space-6); background: var(--color-info-soft); border: 1px solid var(--color-info); border-radius: var(--radius-md); color: var(--color-info-active); }
.pdf-notice__icon { font-size: var(--fs-md); flex: 0 0 auto; }
.pdf-notice p { font-size: var(--fs-sm); margin: 0; }

.pdf-progress { border: none; border-radius: var(--radius-lg); padding: 0; max-width: 480px; width: 90%; box-shadow: var(--shadow-xl); }
.pdf-progress::backdrop { background: rgba(0,0,0,.5); }
.pdf-progress__inner { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.pdf-progress__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.pdf-progress__bar { background: var(--color-surface); border-radius: var(--radius-full); overflow: hidden; height: 12px; }
.pdf-progress__bar-fill { background: var(--color-primary); height: 100%; transition: width var(--duration-base) var(--ease-out); }
.pdf-progress__status { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: 0; }
.pdf-progress__hint   { font-size: var(--fs-xs); color: var(--color-fg-subtle); margin: 0; }

.pdf-result { max-width: var(--container-md); margin: var(--space-8) auto; padding: 0 var(--space-6); }
.pdf-result__primary { background: var(--color-success-soft); border: 1px solid var(--color-success); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-6) 0; }
.pdf-result__file { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.pdf-result__name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); font-family: var(--font-mono); word-break: break-all; margin: 0; }
.pdf-result__size { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.pdf-result__summary { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: 0 0 var(--space-4); }
.pdf-result__list { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); }
.pdf-result__list-title { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0 0 var(--space-3); }
.pdf-result__items { list-style: decimal inside; display: flex; flex-direction: column; gap: var(--space-2); padding: 0; margin: 0; }
.pdf-result__item { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; font-size: var(--fs-sm); }
.pdf-result__item-name { color: var(--color-fg); }
.pdf-result__item-meta { color: var(--color-fg-subtle); font-size: var(--fs-xs); }
.pdf-result__retention { font-size: var(--fs-sm); color: var(--color-fg-muted); text-align: center; margin-top: var(--space-6); }
.pdf-result__actions { text-align: center; margin-top: var(--space-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   INSA
   ═══════════════════════════════════════════════════════════════════════════ */

.insa-page { padding-bottom: var(--space-12); }

.insa-gate { min-height: calc(100vh - var(--header-height, 64px)); display: grid; place-items: center; padding: var(--space-12) var(--space-6); background: var(--gradient-hero); }
.insa-gate__inner { max-width: 480px; text-align: center; padding: var(--space-12); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.insa-gate__icon  { font-size: var(--fs-3xl); display: block; margin-bottom: var(--space-4); }
.insa-gate__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin: 0 0 var(--space-3); }
.insa-gate__lead  { font-size: var(--fs-sm); color: var(--color-fg-muted); margin: 0 0 var(--space-6); }
.insa-gate__form  { display: flex; flex-direction: column; gap: var(--space-3); }
.insa-gate__hint  { font-size: var(--fs-xs); color: var(--color-fg-subtle); margin-top: var(--space-6); }

.insa-hero        { background: var(--gradient-hero); padding: var(--space-12) 0 var(--space-8); }
.insa-hero__inner { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); }
.insa-hero__eyebrow { color: var(--color-primary); font-size: var(--fs-sm); letter-spacing: var(--letter-wide); font-weight: var(--fw-semibold); margin: 0 0 var(--space-2); }
.insa-hero__title   { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--color-fg); margin: 0; }
.insa-hero__lead    { font-size: var(--fs-md); color: var(--color-fg-muted); margin: var(--space-3) 0 0; }
.insa-hero__meta    { display: block; margin-top: var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-subtle); }

.insa-search {
  position: sticky; top: var(--header-height, 64px);
  z-index: var(--z-sticky, 100);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
}
.insa-search__form { max-width: var(--container-xl); margin: 0 auto; padding: 0 var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.insa-search__row  { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-3); align-items: end; }
.insa-search__row--meta { grid-template-columns: 1fr 1fr auto auto; }

.insa-result { max-width: var(--container-xl); margin: var(--space-6) auto; padding: 0 var(--space-6); }

.insa-group { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); overflow: hidden; margin-bottom: var(--space-4); }
.insa-group__head { padding: var(--space-3) var(--space-6); background: var(--color-primary-soft); color: var(--color-primary-soft-fg); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.insa-group__title { font-size: var(--fs-base); font-weight: var(--fw-semibold); display: flex; gap: var(--space-2); align-items: baseline; margin: 0; }
.insa-group__num   { font-size: var(--fs-xs); color: var(--color-fg-subtle); font-family: var(--font-mono); }
.insa-group__count { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.insa-group__badge { margin-left: auto; font-size: var(--fs-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-warn-soft); color: var(--color-warn); }
.insa-group__badge--recent { background: var(--color-success-soft); color: var(--color-success); }

.insa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.insa-table thead th { padding: var(--space-2) var(--space-3); text-align: left; background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-weight: var(--fw-semibold); font-size: var(--fs-xs); color: var(--color-fg-muted); text-transform: uppercase; letter-spacing: var(--letter-wide); }
.insa-table tbody td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; color: var(--color-fg); }
.insa-table tbody tr:last-child td { border-bottom: none; }
.insa-table tbody tr:hover { background: var(--color-surface); }
.insa-table__date { font-family: var(--font-mono); white-space: nowrap; color: var(--color-primary); font-weight: var(--fw-semibold); }
.insa-table__rank { white-space: nowrap; }
.insa-table__office { word-break: keep-all; }
.insa-table__office--prev { color: var(--color-fg-muted); font-size: var(--fs-xs); }

.insa-empty { text-align: center; padding: var(--space-12) var(--space-6); color: var(--color-fg-muted); }
.insa-empty span { font-size: var(--fs-3xl); display: block; margin-bottom: var(--space-3); }
.insa-empty h2 { font-size: var(--fs-lg); margin-bottom: var(--space-2); color: var(--color-fg); }
.insa-empty p  { font-size: var(--fs-sm); margin: 0; }

.insa-load-more { text-align: center; padding: var(--space-6) 0; }
.insa-loading   { text-align: center; padding: var(--space-4); color: var(--color-fg-subtle); font-size: var(--fs-sm); }

/* ── insa-upload (admin 업로드 페이지) ─────────────────────────────────────── */
.insa-upload-page { max-width: var(--container-md); margin: var(--space-8) auto; padding: 0 var(--space-6); }
.insa-upload__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-6); }

.insa-upload__guide-table { width: 100%; margin-top: var(--space-2); font-size: var(--fs-xs); border-collapse: collapse; }
.insa-upload__guide-table th { padding: var(--space-1) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); text-align: left; }
.insa-upload__guide-table td { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); }
.insa-upload__guide-note { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--color-fg-subtle); }

.insa-upload__form { display: flex; flex-direction: column; gap: var(--space-3); }
.insa-upload__form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }

.insa-admin-cta { max-width: var(--container-xl); margin: var(--space-8) auto; padding: var(--space-6); border: 1px solid var(--color-accent-soft-fg); background: var(--color-accent-soft); border-radius: var(--radius-lg); display: flex; gap: var(--space-4); align-items: center; }
.insa-admin-cta__icon  { font-size: var(--fs-2xl); }
.insa-admin-cta__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-accent-soft-fg); margin: 0; }
.insa-admin-cta__body p { font-size: var(--fs-sm); color: var(--color-accent-soft-fg); margin: var(--space-1) 0 0; }
.insa-admin-cta .btn { margin-left: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1279px) {
  .tools-grid__list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .tools-grid__list { grid-template-columns: repeat(2, 1fr); }
  .pdf-grid          { grid-template-columns: repeat(2, 1fr); }
  .short-options__row, .qr-options__row { grid-template-columns: 1fr; }
  .insa-search__row, .insa-search__row--meta { grid-template-columns: 1fr 1fr; }
  .insa-table { display: block; overflow-x: auto; }
}
@media (max-width: 639px) {
  .tools-hero__title, .short-hero__title, .qr-hero__title, .pdf-hero__title, .insa-hero__title { font-size: var(--fs-2xl); }
  .tools-grid__list { grid-template-columns: 1fr; }
  .pdf-grid          { grid-template-columns: 1fr; }
  .short-list__head, .qr-list__head { flex-direction: column; align-items: stretch; }
  .insa-search__row, .insa-search__row--meta { grid-template-columns: 1fr; }
  .insa-admin-cta { flex-direction: column; align-items: flex-start; }
  .insa-admin-cta .btn { margin-left: 0; }
  .qr-item { grid-template-columns: 48px 1fr; }
  /* 인사 표 모바일 카드 모드 */
  .insa-table thead { display: none; }
  .insa-table, .insa-table tbody, .insa-table tr, .insa-table td { display: block; width: 100%; }
  .insa-table tr { border-bottom: 1px solid var(--color-border); padding: var(--space-3); }
  .insa-table td { border: none; padding: var(--space-1) 0; }
  .insa-table td::before { content: attr(data-label) ": "; font-weight: var(--fw-semibold); color: var(--color-fg-muted); margin-right: var(--space-2); }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tools-card__link, .btn, .pdf-progress__bar-fill { transition: none; }
  .tools-card__link:hover { transform: none; }
}