/* ============================================================================
 * Gefen Studio — 앱 화면 공용 디자인 토큰 + 컴포넌트
 * 랜딩/라이브러리와 동일한 브랜드 언어(Noken 워드마크, Pretendard, 검정 버튼,
 * 연두 포인트). 토큰 링크 화면(주문/상태/검수/산출물)이 공유한다.
 * 경로 기준: /<route>/index.html 에서 '../assets/'.
 * ========================================================================== */

/* ----- Noken (브랜드 워드마크 폰트) ----- */
@font-face { font-family: 'Noken'; src: url('../assets/Noken-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noken'; src: url('../assets/Noken-Semibold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Noken'; src: url('../assets/Noken-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #231815;
  --ink-2: #3f3b34;          /* 보조 텍스트 — 더 진하게 */
  --muted: #6b665d;          /* 보조 텍스트 — 흰 배경 5.70:1 (구 #8a857d 3.66:1) */
  --faint: #787369;        /* 3차 텍스트·플레이스홀더 — 흰 배경 4.71:1 */
  --line: #e3e0da;
  --line-2: #cbcbcb;
  --bg: #f4f4f4;
  --bg-soft: #faf9f7;
  --paper: #ffffff;
  --green: #d7fab0;          /* conneon — 브랜드 연두 */
  --green-ink: #3f6f1f;
  --green-2: #95b275;
  --red: #f65b5b;
  --gold: #d4a017;           /* 수정 하이라이트 */
  --ease: cubic-bezier(0.26, 1.04, 0.54, 1);
  --radius-btn: 16px;
  --shadow-card: 0 1px 4px rgba(0,0,0,.08);
  --shadow-pop: 0 24px 80px rgba(0,0,0,.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }
/* 브랜드 물결 배경(히어로 블루→라벤더 색감) — 도구 화면이 휑하지 않게, 카드는 흰색 유지 */
html, body { color: var(--ink); }
html { min-height: 100%;
  background: #f8f8f7;
}
body { background: transparent; }
body { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; -webkit-font-smoothing: antialiased; word-break: keep-all; }

.en-brand { font-family: 'Cartega', 'Pretendard', sans-serif; }

/* ----- 브랜드 워드마크 (Noken, 잉크 0.50em → font-size = 2 × 높이) ----- */
.gf-wordmark { font-family: 'Cartega','Pretendard',sans-serif; font-weight: 400; letter-spacing: .005em; color: var(--ink); white-space: nowrap; line-height: 1; }
.gf-wordmark.h20 { font-size: 40px; }   /* 20px 높이 */
.gf-wordmark.h23 { font-size: 46px; }   /* 23px 높이 (랜딩 헤더와 동일) */

/* ----- 앱 상단 헤더 (토큰 링크 화면 공용) ----- */
.gf-appbar {
  position: sticky; top: 0; z-index: 40;
  height: 64px; background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 18px;
  padding: 0 28px;
}
.gf-appbar .gf-appbar-logo { display: flex; align-items: center; height: auto; }
.gf-appbar .gf-appbar-logo .gf-wordmark { font-size: 40px; line-height: 20px; }
.gf-appbar .gf-appbar-spacer { flex: 1 1 auto; }
.gf-appbar .gf-appbar-meta { font-size: 13px; color: var(--muted); }

/* ----- 버튼 ----- */
.gf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border: 0; border-radius: var(--radius-btn);
  background: #000; color: #fff; font-size: 15px; font-weight: 700;
  transition: transform .22s var(--ease), background .22s var(--ease), opacity .2s;
}
.gf-btn:hover { transform: translateY(-2px); background: #1e1e1e; }
.gf-btn:active { transform: translateY(0); }
.gf-btn[disabled] { opacity: .4; pointer-events: none; }
.gf-btn .gf-btn-arrow { transition: transform .22s var(--ease); }
.gf-btn:hover .gf-btn-arrow { transform: translateX(4px); }
.gf-btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line-2); font-weight: 600; }
.gf-btn.ghost:hover { background: #f7f7f7; }
.gf-btn.green { background: var(--green); color: var(--green-ink); }
.gf-btn.green:hover { background: #c9f59a; }
.gf-btn.sm { height: 38px; padding: 0 16px; font-size: 13.5px; border-radius: 12px; }
.gf-btn.block { width: 100%; }

/* ----- 입력 ----- */
.gf-field { display: flex; flex-direction: column; gap: 8px; }
.gf-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.gf-label .req { color: #c0392b; margin-left: 3px; }
.gf-input, .gf-textarea, .gf-select {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px;
  padding: 13px 15px; transition: border-color .18s, box-shadow .18s;
}
.gf-textarea { resize: vertical; min-height: 92px; line-height: 1.6; }
.gf-input:focus, .gf-textarea:focus, .gf-select:focus { outline: none; border-color: #111; box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.gf-input::placeholder, .gf-textarea::placeholder { color: var(--faint, #787369); }
.gf-help { font-size: 12.5px; color: var(--muted); }

/* segmented radio (옵션 선택) */
.gf-seg { display: inline-flex; background: #efede9; border-radius: 12px; padding: 4px; gap: 4px; }
.gf-seg label { position: relative; cursor: pointer; }
.gf-seg input { position: absolute; opacity: 0; pointer-events: none; }
.gf-seg span { display: block; padding: 9px 16px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: background .15s, color .15s; white-space: nowrap; }
.gf-seg input:checked + span { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ----- 카드/패널 ----- */
.gf-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; }

/* ----- 배지/태그 ----- */
/* 담백한 텍스트 라벨 (알약·체크마크 배제 — AI 느낌 방지) */
.gf-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; }
.gf-badge.green { color: var(--green-ink); }
.gf-badge.gray { color: #5a5a5a; }
.gf-badge.red { color: #c0392b; }
.gf-badge.gold { color: #8a6d12; }

/* ----- 모달 / 토스트 (gefen-ui.js 가 제어) ----- */
.gfm-dim { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s; display: none; }
.gfm-dim.show { display: block; }
.gfm-dim.open { opacity: 1; }
.gfm-card {
  position: fixed; z-index: 101; left: 50%; top: 50%; transform: translate(-50%,-48%) scale(.96);
  width: min(440px, calc(100vw - 40px)); background: #fff; border-radius: 24px; padding: 40px;
  box-shadow: var(--shadow-pop); opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease); display: none; text-align: center;
  /* 폼이 긴 모달(인쇄 주문 등)이 작은 화면에서 화면 밖으로 넘쳐 버튼에 못 닿는 문제 방지 — 넘칠 때만 카드 안에서 스크롤 */
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
}
.gfm-card.show { display: block; }
.gfm-card.open { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.gfm-icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: #f4f4f4; display: flex; align-items: center; justify-content: center; }
.gfm-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.gfm-body { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 26px; white-space: pre-line; }
.gfm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.gfm-actions .gf-btn { white-space: nowrap; }
.gfm-actions.stack { flex-direction: column; align-items: stretch; }
.gfm-actions.stack .gf-btn { width: 100%; }

.gf-toast-wrap { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.gf-toast { background: #1c1c1c; color: #fff; font-size: 13.5px; font-weight: 500; padding: 12px 20px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; max-width: 90vw; }
.gf-toast.show { opacity: 1; transform: translateY(0); }
.gf-toast.ok { background: #14361f; }
.gf-toast.err { background: #4a1414; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================
 * 풀폭 앱 프레임 (주문/상태/검수/산출물/관리자 공통)
 * 디자인 컨셉 = 피그마 라이브러리/랜딩: 흰 카드 · #f4f4f4 바탕 · 플랫 미니멀.
 * 그라데이션/장식 배제(AI 느낌 제거). 제목은 바탕 위에 바로, 카드가 시각 앵커.
 * ========================================================================== */
.gf-frame { min-height: 100vh; background: var(--bg); }

/* 깔끔한 상단 바 — 라이브러리 톤(흰색 + 옅은 경계) */
.gf-frame .gf-appbar { background: #ffffff; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid #ededed; }

/* 페이지 헤더 — 밴드/그라데이션 없이 #f4f4f4 바탕에 바로 (라이브러리 "내 콘텐츠" 톤) */
.gf-hero { background: transparent; border: 0; }
.gf-hero::before { content: none; display: none; }
.gf-hero-inner { max-width: 1180px; margin: 0 auto; padding: 38px 40px 6px; }
.gf-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--green-ink); margin-bottom: 12px; }
.gf-hero-eyebrow .dot { display: none; }
.gf-hero-title { font-size: 28px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); line-height: 1.25; }
.gf-hero-sub { margin-top: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.6; max-width: 720px; }
.gf-hero-meta { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--muted); align-items: center; }
.gf-hero-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }

/* 콘텐츠 컨테이너 (넓게, 가운데) */
.gf-page { max-width: 1180px; margin: 0 auto; padding: 24px 40px 120px; }
.gf-page.narrow { max-width: 960px; }

/* 2단: 본문 + sticky 사이드 요약 */
.gf-cols { display: grid; grid-template-columns: minmax(0,1fr) 344px; gap: 24px; align-items: start; }
.gf-cols > .gf-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gf-aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; }
.gf-aside-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.gf-aside-card h3 { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }

/* 섹션 카드 — 라이브러리 카드와 동일 톤(흰색 · 옅은 경계 · radius 16) */
.gf-sec { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px; }
.gf-sec-num { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; }
.gf-sec-title { font-size: 17px; font-weight: 700; color: var(--ink); }

@media (max-width: 1040px) {
  .gf-cols { grid-template-columns: 1fr; }
  .gf-aside { position: static; }
}
@media (max-width: 720px) {
  .gf-hero-inner, .gf-page { padding-left: 20px; padding-right: 20px; }
  .gf-hero-title { font-size: 24px; }
}

/* ============================================================================
 * 제작 단계 스텝퍼 — 정본: 검수 화면 상단 스텝퍼(.rv-stages)의 실측 스타일.
 * 전 작업 화면(주문/변환/상태/산출물/주보/쇼츠/포토북)이 이 한 벌을 그대로 쓴다.
 * 단계 데이터·클릭 동작은 화면마다 다르되 픽셀은 동일해야 한다.
 *
 * 마크업:  <nav class="gf-stepper"> <span class="gf-step done">접수</span>
 *          <span class="gf-step-sep"></span> <span class="gf-step now">검수</span> … </nav>
 * 상태:    .done 지난 단계(잉크) | .now 현재(연두 알약) | 무표기 예정(연회색)
 *          .sel 선택됨(단계 탐색형 화면 전용 — 클릭한 단계 상세를 펼칠 때)
 * 요소:    span(표시만) / a(이동) / button(선택) 모두 같은 픽셀.
 * 정렬:    기본 왼쪽. 가운데 배치 화면은 .center 추가.
 * 모바일:  ≤720px 축약형 — 현재 단계만 알약 글자로, 나머지는 점(탭 타깃 25px).
 * ========================================================================== */
.gf-stepper { display: flex; align-items: center; gap: 2px; }
.gf-stepper.center { justify-content: center; }
.gf-step {
  display: inline-block; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.45;
  color: var(--muted, #6b665d); white-space: nowrap; padding: 3px 9px; border-radius: 99px;
  text-decoration: none; background: none; border: 0;
}
.gf-step.done { color: var(--ink-2); }
.gf-step.now { color: var(--green-ink); background: var(--green); font-weight: 800; }
.gf-step-sep { width: 12px; height: 1px; background: var(--line-2); flex: none; }
a.gf-step, button.gf-step { cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
a.gf-step:hover, button.gf-step:hover { background-color: #f4f2ec; color: var(--ink); }
a.gf-step.now:hover, button.gf-step.now:hover { background-color: var(--green); color: var(--green-ink); }
.gf-step:focus-visible { outline: 2px solid var(--green-2); outline-offset: 1px; }
/* 선택 상태 — 진행 상태(now/done)와 별개로 '지금 보고 있는 단계' 표시 */
.gf-step.sel { box-shadow: inset 0 0 0 1.5px currentColor; }
.gf-step.sel:not(.now):not(.done) { color: var(--ink-2); }
@media (max-width: 720px) {
  .gf-stepper { gap: 0; }
  .gf-stepper .gf-step-sep { display: none; }
  .gf-step:not(.now) {
    font-size: 0; line-height: 0; width: 25px; height: 25px; padding: 8px;
    border-radius: 50%; background: #ddd8cf; background-clip: content-box;
  }
  .gf-step.done:not(.now) { background: var(--ink-2); background-clip: content-box; }
  a.gf-step:not(.now):hover, button.gf-step:not(.now):hover { background-color: #ddd8cf; }
}