@charset "utf-8";
/* ============================================================
   WORKNEST — 기본 스타일 (리셋 · 브랜드 토큰 · 타이포 · 버튼)
   브랜드 가이드: 전자책_디자인_가이드.md / 로고 그라디언트 기준
   ============================================================ */

/* ── 브랜드 토큰 ───────────────────────────────────────────── */
:root {
  /* 주요 색 */
  --blue:        #2563EB;   /* Primary — 강조 · 제목 · 링크 */
  --blue-dark:   #1D4ED8;
  --blue-soft:   #EEF3FF;   /* 콜아웃 배경 */
  --cyan:        #00D4FF;   /* 포인트 (소량) */
  --purple:      #7C34ED;   /* 포인트 (소량) */

  /* 로고 그라디언트 */
  --g1: #35B2DF;
  --g2: #2F62C4;
  --g3: #6B4FA8;
  --brand-gradient: linear-gradient(120deg, var(--g1) 0%, var(--g2) 55%, var(--g3) 100%);

  /* 글자 */
  --ink:      #222222;      /* 본문 */
  --gray:     #555555;      /* 보조 */
  --gray-2:   #77808C;
  --gray-3:   #9AA3AF;

  /* 면 */
  --bg:        #FFFFFF;
  --bg-soft:   #F7F9FC;
  --bg-mute:   #F0F3F8;
  --line:      #E3E8EF;
  --line-soft: #EEF1F6;

  /* 어두운 무대 (메인 히어로 · 프롬프트 박스) */
  --navy:      #0E1729;
  --navy-2:    #1E293B;
  --navy-3:    #2A3A55;

  /* 상태 */
  --green:     #15803D;
  --green-soft:#ECFDF3;
  --amber:     #B45309;
  --amber-soft:#FFF4E5;
  --red:       #DC2626;
  --red-soft:  #FEF2F2;

  /* 형태 */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;

  --shadow-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --shadow-2: 0 4px 10px rgba(16,24,40,.06), 0 12px 28px rgba(16,24,40,.08);
  --shadow-3: 0 10px 24px rgba(16,24,40,.10), 0 30px 60px rgba(16,24,40,.12);

  --wrap: 1160px;
  --read: 760px;            /* 본문 읽기 폭 */
  --header-h: 68px;

  --ease: cubic-bezier(.22,.68,.36,1);
}

/* ── 리셋 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body, h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

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

:focus-visible {
  outline: 3px solid rgba(37,99,235,.45);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 본문 ─────────────────────────────────────────────────── */
body {
  font-family: 'Noto Sans KR', 'Malgun Gothic', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;      /* 한글 단어 단위 줄바꿈 */
  overflow-wrap: anywhere;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}

code, pre, .mono {
  font-family: 'JetBrains Mono', Consolas, 'D2Coding', 'Courier New', monospace;
  font-size: .92em;
}

/* ── 제목 ─────────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.35; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem); }
h3 { font-size: clamp(1.12rem, .98rem + .6vw, 1.35rem); }
h4 { font-size: 1.03rem; }

/* ── 공통 조각 ────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--blue);
}
.eyebrow::before {
  content: ''; width: 22px; height: 2px; border-radius: 2px;
  background: var(--brand-gradient);
}

.lead { font-size: 1.06rem; color: var(--gray); }

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── 버튼 ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: .95rem; font-weight: 700; line-height: 1.2;
  border: 1px solid transparent;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background-color .18s var(--ease), color .18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 10px 22px rgba(37,99,235,.34); }

.btn-brand { background: var(--brand-gradient); color: #fff; box-shadow: 0 8px 20px rgba(47,98,196,.32); }

.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-1); }
.btn-ghost:hover { border-color: #C9D3E3; }

.btn-line-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }
.btn-line-light:hover { background: rgba(255,255,255,.14); }

.btn-sm { padding: 8px 15px; font-size: .86rem; }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ── 배지 · 태그 ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap;
}
.badge-open    { background: var(--blue-soft);  color: var(--blue); }
.badge-lock    { background: var(--bg-mute);    color: var(--gray-2); }
.badge-ready   { background: var(--green-soft); color: var(--green); }
.badge-soon    { background: var(--amber-soft); color: var(--amber); }
.badge-pending { background: var(--amber-soft); color: var(--amber); }
.badge-blocked { background: var(--red-soft);   color: var(--red); }
.badge-admin   { background: rgba(124,52,237,.10); color: var(--purple); }

/* ── 안내 메시지 ──────────────────────────────────────────── */
.flash-area { position: fixed; top: calc(var(--header-h) + 12px); right: 20px; z-index: 200; display: grid; gap: 10px; }
.flash {
  display: flex; align-items: flex-start; gap: 10px;
  max-width: 380px; padding: 13px 17px;
  border-radius: var(--r); background: #fff;
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  box-shadow: var(--shadow-2); font-size: .9rem;
  animation: flashIn .4s var(--ease) both;
}
.flash-success { border-left-color: var(--green); }
.flash-error   { border-left-color: var(--red); }
.flash-info    { border-left-color: var(--blue); }
@keyframes flashIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ── 스크롤 등장 애니메이션 (JS 가 .is-in 을 붙인다) ────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .09s; }
.reveal[data-delay="2"] { transition-delay: .18s; }
.reveal[data-delay="3"] { transition-delay: .27s; }
.reveal[data-delay="4"] { transition-delay: .36s; }
.reveal[data-delay="5"] { transition-delay: .45s; }
.reveal[data-delay="6"] { transition-delay: .54s; }

/* ── 유틸 ─────────────────────────────────────────────────── */
.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;
}
.skip-link {
  position: absolute; left: 20px; top: -60px; z-index: 999;
  padding: 10px 18px; background: var(--blue); color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm); transition: top .2s;
}
.skip-link:focus { top: 0; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 26px; } .mt-4 { margin-top: 40px; }

/* ── 움직임 최소화 설정 존중 ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}