@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=Nanum+Gothic+Coding:wght@400;700&display=swap');
* {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --border: #cdd2e8;
  --label: #6b6f80;
  --text: #0f172a;
  --accent: #e11d48;
  --accent-dark: #c91818;
  --primary-red: #a61118;
  --primary-red-dark: #861616;
  /* 빨강 메인색 (#e11d48 → 붉은계열 primary) */
  --accent-bg: rgba(225, 29, 72, .1);
  /* 빨강 투명 배경 */
  --error: #e11d48;
  --line: #d0d3dc;
  --card-bg: #fff;
  --page-bg: #f6f7fb;
  --ink: red;
  --soft-shadow: 0 12px 32px rgba(0, 0, 0, .06);
  --border-radius-lg: 12px;
  --border-radius-md: 10px;
  --border-radius-sm: 8px;
  --header-text: #222;
  --sub-text: #666;
}
html, body {width:100%; word-break:keep-all;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:"Noto Sans KR", "Nanum Gothic", "Dotum", "Gothic A1", sans-serif;
	word-break:keep-all;
}

a {
  color: inherit;
  text-decoration: none
}

p,
h1,
h2,
h3,
h4,
h5 ul,
li {
  list-style: none;
  	word-break:keep-all;
}
p,a{font-size: 16px;}



@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&family=Nanum+Gothic+Coding:wght@400;700&display=swap');

/* --- 1. 기본 리셋 --- */
* {
  margin: 0;
  padding: 0;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Layout & Base */
  --bg: #f6f7fb;
  --page-bg: #f6f7fb;
  --panel: #ffffff;
  --card-bg: #fff;
  /* 'line' 변수 통일 (Tailwind 기반의 #e5e7eb 사용) */
  --line: #e5e7eb;
  --border: #cdd2e8;

  /* Text */
  --text: #0f172a;
  --header-text: #222;
  --sub-text: #666;
  /* 'ink' 변수 통일 (의미가 명확한 #222 사용) */
  --ink: #222;
  --label: #6b6f80;

  /* Primary/Accent Colors */
  --primary-red: #a61118;
  /* 'dark' 변수 통일 (editor.css의 #8b0f14 사용) */
  --primary-red-dark: #8b0f14;
  --accent: #e11d48;
  --accent-dark: #c91818;
  --accent-bg: rgba(225, 29, 72, .1);
  --error: #e11d48;

  /* Components */
  --chip: #f3f5f7;
  --soft-shadow: 0 12px 32px rgba(0, 0, 0, .06);
  --border-radius-lg: 12px;
  --border-radius-md: 10px;
  --border-radius-sm: 8px;
}

html, body {
  width:100%;
  word-break:keep-all;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-family:"Noto Sans KR", "Nanum Gothic", "Dotum", "Gothic A1", sans-serif;
	word-break:keep-all;
}

a {
  color: inherit;
  text-decoration: none
}

/* (h5 ul) -> (h5, ul)로 수정 */
p, h1, h2, h3, h4, h5, ul, li {
  list-style: none;
  word-break:keep-all;
}

/* 닫는 괄호 오류 수정 */
p, a {
  font-size: 16px;
}

/* --- 2. 전역 유틸리티 클래스 --- */

/* JS 제어용 숨김 클래스 */
.hidden {
  display: none !important;
}

/* 접근성 */
.sr-only {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  border: 0
}

/* === 통합 카드 스타일 === */
/*
  .document-card, .template-item, .attachment-item, .signer-card의
  중복되는 '카드' 스타일을 통합합니다.
*/
.document-card,
.template-item,
.attachment-item,
.signer-card {
  background-color: var(--panel, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--border-radius-sm, 8px);
  /* 가장 은은한 'attachment-item'의 그림자를 기본값으로 사용 */
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  position: relative;
  transition: box-shadow 0.2s ease-in-out;
  overflow: hidden;
}

/* 'template-item'의 hover 스타일을 공통으로 적용 */
.document-card:hover,
.template-item:hover,
.attachment-item:hover,
.signer-card:hover {
   box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}


/* === Base Button System === */
/*
  .btn, .btn-primary, .btn-secondary 등을
  전역 버튼 시스템으로 통합합니다.
*/
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  padding: 0.5rem 1.25rem;
  border: 1px solid transparent; /* 테두리 공간 확보 */
  border-radius: 6px; /* 0.375rem */
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none; /* a 태그와 호환 */
}

.btn-primary {
  background-color: var(--primary-red, #a61118);
  color: var(--panel, #fff);
  border-color: var(--primary-red, #a61118);
}
.btn-primary:hover {
  background-color: var(--primary-red-dark, #8b0f14);
  border-color: var(--primary-red-dark, #8b0f14);
}
.btn-primary[disabled] {
  background-color: #af9c9c;
  border-color: #af9c9c;
  color: white;
  cursor: not-allowed;
}

.btn-secondary {
  color: #374151;
  background-color: #f3f4f6;
  border-color: #d1d5db; /* 테두리 추가 */
}
.btn-secondary:hover {
  background-color: #e5e7eb;
}

/* .auth-btn과 같은 외곽선 버튼용 */
.btn-outline {
  color: #374151;
  background-color: transparent;
  border-color: #d1d5db;
}
.btn-outline:hover {
  background-color: #f9fafb;
}