/* =========================================================
   어게인택스 디자인 시스템 — 공통 스타일
   사용법: 모든 페이지에서 이 파일 하나를 불러오고,
   fonts/ 폴더를 이 파일 기준 상대경로에 둡니다.
   ========================================================= */

/* ---------- 1. 글꼴: 페이북체 (BC카드 무료 글꼴, 웹 임베딩 허용, 수정 재배포 금지) ---------- */
@font-face{font-family:'paybooc';font-weight:100 300;font-display:swap;src:url(fonts/paybooc-Light.woff2) format('woff2')}
@font-face{font-family:'paybooc';font-weight:400 500;font-display:swap;src:url(fonts/paybooc-Medium.woff2) format('woff2')}
@font-face{font-family:'paybooc';font-weight:600 700;font-display:swap;src:url(fonts/paybooc-Bold.woff2) format('woff2')}
@font-face{font-family:'paybooc';font-weight:800 900;font-display:swap;src:url(fonts/paybooc-ExtraBold.woff2) format('woff2')}

/* ---------- 2. 디자인 토큰 ---------- */
:root{
  /* 색 */
  --sd-bg:            #06070a;   /* 페이지 배경 */
  --sd-surface:       #0d1016;   /* 카드·패널 */
  --sd-surface-2:     #141922;   /* 입력창·표 머리·호버 */
  --sd-line:          rgba(255,255,255,.09);  /* 구분선·테두리 */
  --sd-line-strong:   rgba(255,255,255,.22);
  --sd-fg:            #eef1f5;   /* 기본 글자 */
  --sd-mute:          #8a93a3;   /* 보조 글자 */
  --sd-accent:        #5fd3ff;   /* 강조(링크·핵심 숫자·활성 상태) */
  --sd-brand:         #86bfd9;   /* 로고 하늘색 */
  --sd-gradient:      linear-gradient(135deg,#8ff0ff 0%,#4aa8ff 50%,#a07cff 100%); /* 점·선 그라데이션 */
  --sd-success:       #4fd1a5;
  --sd-warning:       #f5c26b;
  --sd-danger:        #ff7a7a;

  /* 글꼴 */
  --sd-font:          'paybooc','Noto Sans KR',system-ui,sans-serif;
  --sd-font-num:      'paybooc',system-ui,sans-serif;   /* 숫자는 tabular-nums로 정렬 */
  --sd-w-light: 300; --sd-w-regular: 500; --sd-w-bold: 700; --sd-w-heavy: 800;

  /* 글자 크기 */
  --sd-text-xs: 11px;  --sd-text-sm: 13px;  --sd-text-md: 15px;  --sd-text-lg: 17px;
  --sd-h3: 22px;  --sd-h2: clamp(28px,3.4vw,44px);  --sd-h1: clamp(36px,5.2vw,72px);
  --sd-label-spacing: .2em;   /* 영문 대문자 라벨 자간 */

  /* 간격 (4px 단위) */
  --sd-1:4px; --sd-2:8px; --sd-3:12px; --sd-4:16px; --sd-5:24px; --sd-6:32px; --sd-7:48px; --sd-8:64px;

  /* 모서리 */
  --sd-radius-sm: 4px;  --sd-radius: 6px;  --sd-radius-lg: 12px;  --sd-radius-pill: 999px;

  /* 움직임 */
  --sd-ease: cubic-bezier(.65,0,.35,1);
  --sd-dur: .25s;
}

/* ---------- 3. 기본 ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--sd-bg);color:var(--sd-fg);font-family:var(--sd-font);
  font-weight:var(--sd-w-light);font-size:var(--sd-text-md);line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:var(--sd-w-regular);letter-spacing:-.035em;line-height:1.22;margin:0}
h1{font-size:var(--sd-h1)} h2{font-size:var(--sd-h2)} h3{font-size:var(--sd-h3)}
a{color:var(--sd-accent);text-decoration:none}
.sd-num{font-family:var(--sd-font-num);font-variant-numeric:tabular-nums}
.sd-label{font-size:var(--sd-text-xs);letter-spacing:var(--sd-label-spacing);color:var(--sd-accent);text-transform:uppercase}
.sd-mute{color:var(--sd-mute)}

/* ---------- 4. 헤더 ---------- */
.sd-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px 40px;background:linear-gradient(to bottom,rgba(6,7,10,.92),rgba(6,7,10,.6));backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sd-line)}
.sd-logo{display:flex;align-items:center;gap:10px;color:var(--sd-fg)}
.sd-logo img.mark{width:46px;height:46px;margin:-8px 0}
.sd-logo img.wordmark{height:22px;width:auto}
.sd-nav{display:flex;gap:28px;font-size:var(--sd-text-sm)}
.sd-nav a{color:var(--sd-mute)} .sd-nav a:hover,.sd-nav a.active{color:var(--sd-fg)}

/* ---------- 5. 버튼 ---------- */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 22px;border-radius:var(--sd-radius);
  font:inherit;font-size:var(--sd-text-md);font-weight:var(--sd-w-bold);cursor:pointer;border:1px solid transparent;
  transition:opacity var(--sd-dur),background var(--sd-dur),border-color var(--sd-dur)}
.sd-btn:hover{opacity:.86}
.sd-btn:disabled{opacity:.4;cursor:not-allowed}
.sd-btn--primary{background:var(--sd-fg);color:#000}
.sd-btn--ghost{background:transparent;color:var(--sd-fg);border-color:var(--sd-line-strong)}
.sd-btn--accent{background:var(--sd-accent);color:#00141c}
.sd-btn--pill{border-radius:var(--sd-radius-pill);padding:9px 18px;font-size:var(--sd-text-sm)}
.sd-btn--sm{padding:8px 14px;font-size:var(--sd-text-sm)}

/* ---------- 6. 입력 ---------- */
.sd-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sd-5)}
.sd-field label{font-size:var(--sd-text-sm);color:var(--sd-mute);font-weight:var(--sd-w-regular)}
.sd-input,.sd-select,.sd-textarea{width:100%;padding:13px 14px;background:var(--sd-surface-2);color:var(--sd-fg);
  border:1px solid var(--sd-line);border-radius:var(--sd-radius);font:inherit;font-weight:var(--sd-w-regular);outline:none;
  transition:border-color var(--sd-dur),box-shadow var(--sd-dur)}
.sd-input::placeholder{color:#5b6372}
.sd-input:focus,.sd-select:focus,.sd-textarea:focus{border-color:var(--sd-accent);box-shadow:0 0 0 3px rgba(95,211,255,.15)}
.sd-field .hint{font-size:var(--sd-text-xs);color:var(--sd-mute)}
.sd-field.error .sd-input{border-color:var(--sd-danger)} .sd-field.error .hint{color:var(--sd-danger)}

/* 파일 업로드 영역 */
.sd-drop{border:1.5px dashed var(--sd-line-strong);border-radius:var(--sd-radius-lg);padding:48px 24px;text-align:center;
  color:var(--sd-mute);background:rgba(255,255,255,.015);transition:border-color var(--sd-dur),background var(--sd-dur)}
.sd-drop.over,.sd-drop:hover{border-color:var(--sd-accent);background:rgba(95,211,255,.04);color:var(--sd-fg)}

/* ---------- 7. 카드 ---------- */
.sd-card{background:var(--sd-surface);border:1px solid var(--sd-line);border-radius:var(--sd-radius-lg);padding:var(--sd-6)}
.sd-card__title{font-size:var(--sd-text-lg);font-weight:var(--sd-w-regular);margin-bottom:var(--sd-4)}
/* 핵심 숫자 카드 (예: 예상 환급액) */
.sd-stat{display:flex;flex-direction:column;gap:4px}
.sd-stat__label{font-size:var(--sd-text-sm);color:var(--sd-mute)}
.sd-stat__value{font-size:36px;font-weight:var(--sd-w-bold);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sd-stat__value.accent{color:var(--sd-accent)}

/* ---------- 8. 표 ---------- */
.sd-table{width:100%;border-collapse:collapse;font-size:var(--sd-text-sm)}
.sd-table th{text-align:left;font-weight:var(--sd-w-regular);color:var(--sd-mute);background:var(--sd-surface-2);
  padding:12px 14px;border-bottom:1px solid var(--sd-line)}
.sd-table td{padding:14px;border-bottom:1px solid var(--sd-line);font-weight:var(--sd-w-light)}
.sd-table td.num,.sd-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.sd-table tr:hover td{background:rgba(255,255,255,.02)}

/* ---------- 9. 상태 배지 ---------- */
.sd-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--sd-radius-pill);
  font-size:var(--sd-text-xs);font-weight:var(--sd-w-bold);border:1px solid currentColor}
.sd-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.sd-badge--ai{color:var(--sd-accent)} .sd-badge--ok{color:var(--sd-success)}
.sd-badge--wait{color:var(--sd-warning)} .sd-badge--no{color:var(--sd-danger)}

/* ---------- 10. 진행 단계 (업로드 → AI 검토 → 회계사 확인 → 경정청구 접수) ---------- */
.sd-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--sd-line);counter-reset:s}
.sd-steps li{list-style:none;padding:16px 14px 0 0;position:relative;color:var(--sd-mute);font-size:var(--sd-text-sm)}
.sd-steps li::before{counter-increment:s;content:"0" counter(s);display:block;font-size:var(--sd-text-xs);
  color:var(--sd-mute);margin-bottom:6px;font-weight:var(--sd-w-bold)}
.sd-steps li::after{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:transparent}
.sd-steps li.done,.sd-steps li.current{color:var(--sd-fg)}
.sd-steps li.done::before,.sd-steps li.current::before{color:var(--sd-accent)}
.sd-steps li.done::after{background:var(--sd-accent)}
.sd-steps li.current::after{background:var(--sd-gradient)}

/* ---------- 11. 알림 ---------- */
.sd-toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%);background:#fff;color:#000;
  font-size:var(--sd-text-sm);padding:10px 18px;border-radius:var(--sd-radius);z-index:100}
.sd-notice{padding:14px 16px;border-radius:var(--sd-radius);border:1px solid var(--sd-line);background:var(--sd-surface-2);font-size:var(--sd-text-sm)}
.sd-notice--info{border-color:rgba(95,211,255,.35)}

/* ---------- 12. 업무 화면 배경: 랜딩의 점 물결을 은은한 정적 패턴으로 ---------- */
.sd-bg-dots{background-image:radial-gradient(rgba(143,240,255,.14) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 60%);mask-image:linear-gradient(to bottom,#000,transparent 60%)}

/* ---------- 13. 반응형·접근성 ---------- */
@media (max-width:760px){
  .sd-header{padding:14px 20px} .sd-nav{display:none}
  .sd-steps{grid-template-columns:repeat(2,1fr)} .sd-card{padding:var(--sd-5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--sd-accent);outline-offset:2px}