/* ============================================================================
   delivery.css — 관장 전달 페이지 (4단계 · 계획서 7절 운영자 결정 2026-09-19)
   ----------------------------------------------------------------------------
   관장이 링크 하나로 열어, 순서대로 따라 하며 **본인 네이버 계정으로 직접** 글을 올리는 페이지.
   리포트(report-free.css · report-full.css)와 **같은 가족**이다 — 운영자 화면(public/styles)이 아니다.
     · 남색 머리 + 오른쪽 위 붉은 번짐, 종이색 바탕, 흰 카드 16px 모서리, 빨강 = 지금 누를 것
     · 관장이 이미 받아 본 리포트와 같은 얼굴이어야 "같은 곳에서 온 것"으로 믿는다

   이 파일 하나로 끝난다. 배포 번들(Cloudflare Pages)에 index.html 과 함께 들어간다.
   public/styles/*.css 를 같이 읽지 마라 — 운영자 화면의 클래스가 섞이면 자주색 상자 같은
   "내부 전용" 신호가 관장 화면에 새어 나온다(design.md 4-5).

   리포트 CSS 에서 **고친 것** (리포트는 원본 그대로 옮긴 것이라 손대지 않았다)
     · 빨강 글자·버튼 채움 #E23A2E(흰 바탕 4.31:1, AA 미달) → #C12E24(5.26:1).
       #E23A2E 는 테두리·장식에만(--accent-decor)
     · 회색 글자 #6C7180 → #5D6373 (종이색 위 5.7:1)
     · 본문 15px → 17px, 원고 글 18px. 조작 요소 52px 이상, 복사·올렸어요 56~64px
     · 다크 모드를 넣었다. 관장 폰이 다크면 따라간다(리포트에는 없다)

   CSP: style-src 'self' · script-src 'self'. 인라인 style/script/on* 없이 동작하게 짰다.
   상태는 전부 data-* 속성으로 바꾼다 — JS 는 속성만 바꾸고 모양은 여기서 정한다.

   목차
     00 토큰 (라이트 · 다크)
     01 바탕 · 글자 · 포커스 · 기기별 문구(.for-touch / .for-mouse)
     02 머리(masthead) · 절 제목(.sec) · 발
     03 버튼 — 단계의 주 버튼(.btn--main)은 **상태가 모양을 정한다**
     04 알림 상자(.note) · 이어서 하기(.resume) · 토스트
     05 목록 — 이번 주(.hero) · 지난 원고(.post) · 상태 딱지(.status)
     06 단계 흐름(.flow > .step) — 1~6단계
     07 복사할 글(.copy-src) · 복사 실패 대안(.copy-fallback)
     08 본문 조각(.pieces > .piece) — 글 조각 · 사진 조각이 제자리에 번갈아
     09 사진(.photo)
     10 태그(.tags)
     11 발행 안내(.howto) · 올렸어요(.upload)
     12 지금 할 차례 막대(.now-bar) · PC 순서표(.outline) · 넓은 화면 배치(.layout)
     13 움직임 줄이기 · 인쇄
   ========================================================================== */


/* hidden 속성은 언제나 숨긴다. 아래에서 display 를 정한 클래스(.note, .resume, .meter 등)가
   hidden 을 이기면 스크립트가 숨긴 안내가 화면에 남는다(전달 페이지 조립 담당 보고). */
[hidden] { display: none !important; }


/* ==========================================================================
   00 토큰
   ========================================================================== */
:root {
  --font-sans:
    "Pretendard Variable", Pretendard,
    -apple-system, BlinkMacSystemFont, system-ui,
    "Apple SD Gothic Neo", "Noto Sans KR",
    "Segoe UI", "Malgun Gothic", "맑은 고딕",
    sans-serif;

  /* 글자 — 13px 은 딱지 전용. 문장은 15px 이상 */
  --fs-xs: 0.8125rem;   /* 13 딱지 */
  --fs-sm: 0.9375rem;   /* 15 보조 문장 */
  --fs-body: 1.0625rem; /* 17 본문 */
  --fs-read: 1.125rem;  /* 18 원고 글 — 관장이 올리기 전에 마지막으로 읽는 글 */
  --fs-lg: 1.1875rem;   /* 19 버튼 큰 것 · 단계 제목 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-2xl: 1.625rem;   /* 26 */
  --fs-hero: clamp(1.375rem, 5.2vw, 1.875rem);
  --fs-title: clamp(1.5rem, 5.6vw, 2.125rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  --radius: 16px;       /* 리포트 카드와 같다 */
  --radius-sm: 10px;
  --radius-pill: 999px;

  --tap: 44px;          /* 어떤 조작 요소도 이보다 작지 않다 */
  --btn-h: 56px;        /* 복사·저장 버튼. 설문(52px)보다 한 단계 크다 */
  --btn-h-lg: 64px;     /* 올렸어요 · 시작하기 */

  --wrap: 760px;        /* 무료 진단판 리포트와 같은 폭 */
  --rail-w: 16rem;      /* PC 순서표 */

  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* 라이트 (기본) */
:root {
  color-scheme: light;

  --paper: #fbfaf6;
  --card: #ffffff;
  --card-2: #f6f5f0;
  --line: #e8e4da;
  --line-strong: #8a8474;    /* 조작 요소의 경계(1.4.11 3:1) */
  --track: #e8e5dc;

  --ink: #15213b;            /* 제목 */
  --text: #212529;           /* 본문 */
  --muted: #5d6373;          /* 보조. 종이색 위 5.7:1 */

  --navy: #15213b;           /* 머리 바탕 */
  --on-navy: #ffffff;
  --on-navy-muted: #b6c0d6;
  --gold: #ffd9a0;           /* 머리 안의 강조 — 리포트 .type-badge b 와 같다 */

  --accent: #c12e24;         /* 채움. 흰 글자 5.26:1 */
  --accent-deep: #9e2019;
  --on-accent: #ffffff;
  --accent-text: #c12e24;    /* 글자색으로 쓸 때 */
  --accent-soft: #fcedeb;
  --accent-line: #f0b5af;
  --accent-decor: #e23a2e;   /* 테두리·장식 전용 */

  --ok: #187a54;             /* 글자 */
  --ok-fill: #187a54;        /* 채움(흰 글자 5.3:1) */
  --ok-soft: #e6f4ee;
  --ok-line: #a7d8c3;

  --wait: #8a5300;           /* "아직" — 오류가 아니다. 호박색 */
  --wait-soft: #fff3e0;
  --wait-line: #e6be7e;

  --info: #1c4f9c;
  --info-soft: #eaf1ff;
  --info-line: #b9cdf0;

  --danger: #b3261e;
  --danger-soft: #fdecea;
  --danger-line: #f0b0aa;

  --focus: #1c4f9c;
  --focus-on-dark: #ffd9a0;

  --glow: rgba(226, 58, 46, 0.35);
  --shadow: 0 1px 2px rgba(21, 33, 59, 0.04), 0 8px 24px rgba(21, 33, 59, 0.06);
  --shadow-up: 0 -6px 20px rgba(21, 33, 59, 0.12);
  --shadow-hero: 0 12px 30px rgba(158, 32, 25, 0.28);
}

/* 다크 — 관장 폰이 다크 모드면 따라간다. data-theme="light" 로 끌 수 있다 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #12151c;
    --card: #1a1f2a;
    --card-2: #232936;
    --line: #323a4a;
    --line-strong: #6b7688;
    --track: #2b3240;

    --ink: #f2f4f8;
    --text: #e4e7ee;
    --muted: #a8b0c0;

    --navy: #0d1017;
    --on-navy: #ffffff;
    --on-navy-muted: #a8b0c0;
    --gold: #ffd9a0;

    --accent: #cc372b;
    --accent-deep: #9e2019;
    --on-accent: #ffffff;
    --accent-text: #ff8074;
    --accent-soft: #2c1a1c;
    --accent-line: #6b3833;
    --accent-decor: #ff8074;

    --ok: #5bc79a;
    --ok-fill: #187a54;
    --ok-soft: #16281f;
    --ok-line: #2f5c47;

    --wait: #e8b665;
    --wait-soft: #2a2013;
    --wait-line: #5c4726;

    --info: #8fb4ff;
    --info-soft: #182135;
    --info-line: #34456b;

    --danger: #ff8d82;
    --danger-soft: #2d1917;
    --danger-line: #6b3833;

    --focus: #8fb4ff;
    --focus-on-dark: #ffd9a0;

    --glow: rgba(226, 58, 46, 0.22);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-up: 0 -6px 20px rgba(0, 0, 0, 0.45);
    --shadow-hero: 0 12px 30px rgba(0, 0, 0, 0.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #12151c;
  --card: #1a1f2a;
  --card-2: #232936;
  --line: #323a4a;
  --line-strong: #6b7688;
  --track: #2b3240;

  --ink: #f2f4f8;
  --text: #e4e7ee;
  --muted: #a8b0c0;

  --navy: #0d1017;
  --on-navy: #ffffff;
  --on-navy-muted: #a8b0c0;
  --gold: #ffd9a0;

  --accent: #cc372b;
  --accent-deep: #9e2019;
  --on-accent: #ffffff;
  --accent-text: #ff8074;
  --accent-soft: #2c1a1c;
  --accent-line: #6b3833;
  --accent-decor: #ff8074;

  --ok: #5bc79a;
  --ok-fill: #187a54;
  --ok-soft: #16281f;
  --ok-line: #2f5c47;

  --wait: #e8b665;
  --wait-soft: #2a2013;
  --wait-line: #5c4726;

  --info: #8fb4ff;
  --info-soft: #182135;
  --info-line: #34456b;

  --danger: #ff8d82;
  --danger-soft: #2d1917;
  --danger-line: #6b3833;

  --focus: #8fb4ff;
  --focus-on-dark: #ffd9a0;

  --glow: rgba(226, 58, 46, 0.22);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-up: 0 -6px 20px rgba(0, 0, 0, 0.45);
  --shadow-hero: 0 12px 30px rgba(0, 0, 0, 0.4);
}


/* ==========================================================================
   01 바탕 · 글자 · 포커스 · 기기별 문구
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* "여기로 ↓" 로 뛰었을 때 머리 막대에 가리지 않게 */
  scroll-padding-top: var(--sp-4);
  scroll-padding-bottom: 6rem;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  word-break: keep-all;          /* 한글이 낱말 중간에서 끊기지 않게 */
  overflow-wrap: anywhere;       /* 긴 주소·태그는 끊는다 */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { color: var(--ink); line-height: 1.35; margin: 0; }
p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--info); text-underline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
@media (min-width: 600px) {
  .wrap { padding: 0 var(--sp-5); }
}

.sr-only {
  position: absolute !important;
  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: var(--sp-2);
  top: var(--sp-2);
  z-index: 90;
  transform: translateY(-200%);
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--focus);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
/* 포커스 전에는 확실히 숨긴다(위로 밀어 올리기만 하면 위에 다른 내용이 있을 때 비친다) */
.skip-link:not(:focus) { clip-path: inset(50%); }

/* 세로 간격 — 원고 화면의 main 이 이것이다. 자식끼리 20px */
.stack > * + * { margin-top: var(--sp-5); }
/* 목록 끝의 안내처럼 "앞과 떨어뜨려 둘" 덩어리 하나 */
.gap-above { margin-top: var(--sp-8); }

.num { font-variant-numeric: tabular-nums; }
.kbd {
  display: inline-block;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.9em;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* 기기별 문구 — 폰에서는 "길게 누르기", PC 에서는 "Ctrl + V".
   화면 **폭**이 아니라 **손가락이냐 마우스냐**로 가른다. PC 창을 반으로 줄여도
   폰 문구가 나오면 안 되기 때문이다. 둘 다 DOM 에 넣고 CSS 가 하나를 숨긴다. */
.for-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .for-touch { display: revert; }
  .for-mouse { display: none; }
}


/* ==========================================================================
   02 머리 · 절 제목 · 발
   --------------------------------------------------------------------------
   .masthead            남색 머리. 리포트 header 와 같은 얼굴(붉은 번짐 포함)
   .masthead--compact   원고 하나를 연 화면. 낮게
   .masthead__back      "← 원고 목록" — 44px. 폰에서 뒤로 가기가 헷갈릴 때의 확실한 길
   ⚠️ 여기에 **운영자 이름·연락처·회사명·다른 도장 이름**을 넣지 마라. 이 도장 이름만.
   ========================================================================== */
.masthead {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-navy);
  padding: var(--sp-8) 0 var(--sp-6);
}
.masthead::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--glow), transparent 70%);
  pointer-events: none;
}
.masthead > .wrap { position: relative; z-index: 1; }
.masthead :focus-visible { outline-color: var(--focus-on-dark); }
.masthead__eyebrow {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--on-navy-muted);
}
.masthead__eyebrow b { color: var(--gold); }
.masthead__title {
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--on-navy);
}
.masthead__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  color: var(--on-navy-muted);
  max-width: 40em;
}
.masthead__desc b { color: var(--on-navy); }
.masthead--compact { padding: var(--sp-3) 0 var(--sp-5); }
.masthead--compact .masthead__title { font-size: var(--fs-xl); }
.masthead__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  margin: 0 0 var(--sp-2) calc(var(--sp-2) * -1);
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--on-navy);
  font-weight: 700;
  text-decoration: none;
}
.masthead__back:hover { text-decoration: underline; }

/* 리포트의 h2.sec — 빨간 세로 막대 + 작은 대문자 제목 */
.sec {
  position: relative;
  margin: var(--sp-10) 0 var(--sp-4);
  padding-left: 14px;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
.sec::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 4px;
  border-radius: 2px;
  background: var(--accent-decor);
}

main { padding: var(--sp-6) 0 var(--sp-12); }

.footer {
  border-top: 1px solid var(--line);
  padding: var(--sp-6) 0 var(--sp-10);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
.footer p + p { margin-top: var(--sp-2); }


/* ==========================================================================
   03 버튼
   --------------------------------------------------------------------------
   .btn              기본. 52px, 테두리
   .btn--main        그 단계(또는 본문 조각)의 **주 버튼**. 모양은 단계 상태가 정한다:
                       · 지금 할 차례(current) → 빨강 채움        "이걸 누르세요"
                       · 아직(todo)            → 남색 2px 테두리   누를 수는 있다
                       · 끝남(done)            → 초록 테두리 + ✓   "다시 복사"로 쓸 수 있다
                     화면에 빨강 채움이 늘 **하나**만 남는다(지금 할 것). 순서를 잃지 않게 하는 첫 장치.
   .btn--lg          64px. 시작하기 · 올렸어요
   .btn--block       가로 꽉 (폰에서는 주 버튼이 전부 이것)
   .btn--light       빨간 카드(.hero) 위의 흰 버튼
   .btn--quiet       글자 버튼. 되돌리기 같은 보조 행동. 그래도 44px
   [data-copy]       복사 직후 피드백 — copied(방금 됨, 2.5초) · failed(안 됨)
   [aria-busy=true]  보내는 중
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  min-width: var(--tap);
  padding: var(--sp-2) var(--sp-5);
  border: 2px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;     /* 두 번 눌러 확대 지연을 없앤다 */
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: scale(0.98); }
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.btn__sub {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.btn--block { display: flex; width: 100%; }
.btn--lg {
  min-height: var(--btn-h-lg);
  font-size: var(--fs-lg);
  padding-inline: var(--sp-6);
}

/* 주 버튼 — 기본(아직)은 남색 테두리 */
.btn--main {
  min-height: var(--btn-h);
  border-color: var(--ink);
  font-size: var(--fs-lg);
}
/* 지금 할 차례 — 빨강 채움.
   .step 은 본문 조각(.piece)을 품고 있으므로 자식 결합자(>)로 **그 단계 자신의** 버튼만 고른다.
   올렸어요(.upload)도 6단계가 current 일 때만 빨강이다 — 앞 단계를 하는 동안 빨강이 둘이 되면 안 된다.
   (6단계가 아직이어도 버튼은 **누를 수 있다**. 다른 방법으로 올린 관장도 있다. 남색 테두리로 보일 뿐)
   ⚠️ 조상 조건을 :where() 로 감쌌다(특이도 0). 그래야 아래 [data-copy] 피드백(방금 복사됨 = 초록)이
      **지금 할 차례 칸 안에서도** 이긴다. 감싸지 않으면 바로 그 칸에서 초록이 안 보인다(실측). */
:where(.step[data-state="current"] > .step__body > .step__act) .btn--main,
:where(.piece[data-state="current"]) .btn--main,
:where(.step[data-state="current"] .upload:not([data-state="done"])) .btn--main {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 16px rgba(193, 46, 36, 0.28);
}
:where(.step[data-state="current"] > .step__body > .step__act) .btn--main:hover,
:where(.piece[data-state="current"]) .btn--main:hover,
:where(.step[data-state="current"] .upload:not([data-state="done"])) .btn--main:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
/* 끝남 — 초록 테두리. 글자는 "✓ 복사함 · 다시 복사" */
:where(.step[data-state="done"] > .step__body > .step__act) .btn--main,
:where(.piece[data-state="done"]) .btn--main,
:where(.step[data-state="done"] > .step__body > .step__act) .btn--main:hover,
:where(.piece[data-state="done"]) .btn--main:hover {
  border-color: var(--ok);
  color: var(--ok);
  background: var(--card);
}

/* 복사 직후 — 색만이 아니라 글자도 바뀐다: "✓ 복사됐어요" (2.5초 뒤 done 모양으로) */
.btn[data-copy="copied"],
.btn[data-copy="copied"]:hover {
  background: var(--ok-fill);
  border-color: var(--ok-fill);
  color: var(--on-accent);
  box-shadow: none;
}
.btn[data-copy="failed"],
.btn[data-copy="failed"]:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
  box-shadow: none;
}
.btn[aria-busy="true"] {
  cursor: progress;
  opacity: 0.8;
}
.btn[aria-busy="true"]::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 3px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: dv-spin 0.8s linear infinite;
}
@keyframes dv-spin { to { transform: rotate(360deg); } }

/* 남색 채움 — "네이버 글쓰기 열기" 가 아직 차례가 아닐 때도 **바깥으로 나가는 버튼**임을 드러낸다 */
.btn__out {
  font-size: 0.95em;
  font-weight: 800;
}

.btn--light {
  background: var(--card);
  border-color: var(--card);
  color: var(--accent-text);
}
.btn--light:hover { border-color: var(--ink); }

.btn--quiet {
  min-height: var(--tap);
  padding-inline: var(--sp-3);
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn--quiet:hover { color: var(--ink); border-color: transparent; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* 나란히 둘 — 2단계 안드로이드 "[앱 열기] | [인터넷창으로 글쓰기]"(운영자 지시 2026-09-20).
   375px 폰에서 둘이 한 줄에 들어간다(실측). 더 좁으면 줄바꿈해 위아래로 쌓인다 — 둘 다 52px 이상.
   앞이 주 버튼(.btn--main)이라 '지금 할 차례' 빨강 채움은 여기서도 **하나만** 남는다. */
.btn-duo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.btn-duo > .btn {
  flex: 1 1 8.5rem;
  padding-inline: var(--sp-3);
}


/* ==========================================================================
   04 알림 상자 · 이어서 하기 · 토스트
   --------------------------------------------------------------------------
   .note          아이콘 + 제목 + 문장. 색 + 아이콘 + 글 세 겹으로 말한다
     --info       알아 두면 좋은 것(새 창 안내, PC 가 편해요)
     --warn       막힐 수 있는 것(카톡 안에서 열림, 건너뛴 조각)
     --ok         끝났다
     --danger     진짜로 안 된 것(보내지 못함). 빨강은 여기서만
   .resume        다시 들어왔을 때 맨 위 — "지난번에 4번까지 하셨어요"
   .toast-area    화면 아래(지금 할 차례 막대 위). role="status"
   ========================================================================== */
.note {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left-width: 5px;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.note__icon {
  flex: 0 0 auto;
  font-size: var(--fs-xl);
  line-height: 1.2;
}
.note__body { flex: 1 1 auto; min-width: 0; }
.note__title {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--ink);
}
.note__body p + p,
.note__body p + ul,
.note__body ul + p { margin-top: var(--sp-2); }
.note__body ul { margin: var(--sp-2) 0 0; padding-left: 1.2em; }
.note__body li + li { margin-top: var(--sp-1); }
.note__body .btn-row { margin-top: var(--sp-3); }
.note__body .fold { margin-top: var(--sp-3); }
.note--info   { background: var(--info-soft);   border-color: var(--info-line);   border-left-color: var(--info); }
.note--warn   { background: var(--wait-soft);   border-color: var(--wait-line);   border-left-color: var(--wait); }
.note--ok     { background: var(--ok-soft);     border-color: var(--ok-line);     border-left-color: var(--ok); }
.note--danger { background: var(--danger-soft); border-color: var(--danger-line); border-left-color: var(--danger); }
.note--danger .note__title { color: var(--danger); }

/* 접어 두기 — <details class="fold"> / <summary class="fold__sum">.
   운영자 지시 2026-09-20: 안내·주의·대비책은 접어 두고 필요할 때만 펼친다. **기본은 접힘.**
   여는 일은 브라우저가 한다 — JS 도 on* 도 없다(CSP script-src 'self'). JS 가 꺼져도 열린다.
   summary 는 44px 이상 · 가로 전체가 눌리는 자리다(손가락). 화살표는 ::before 로 그린다 —
   기본 삼각형(marker)은 브라우저마다 자리가 달라 지운다. */
.fold {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}
.fold__sum {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 12px;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;              /* 파이어폭스 */
  touch-action: manipulation;
}
.fold__sum::-webkit-details-marker { display: none; }   /* 사파리 · 옛 크롬 */
.fold__sum::before {
  content: "▸";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.85em;
}
.fold[open] > .fold__sum::before { content: "▾"; }
.fold[open] > .fold__sum {
  border-bottom: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
}
.fold__body {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
}
.fold__body b { color: var(--ink); }
/* 접은 안의 **맨 목록**만 점·번호를 들인다. 클래스가 붙은 목록(.tags · .howto)은 자기 모양이 있다. */
.fold__body ul:not([class]),
.fold__body ol:not([class]) { margin: 0; padding-left: 1.25em; }
.fold__body ul:not([class]) > li + li,
.fold__body ol:not([class]) > li + li { margin-top: var(--sp-2); }

.resume {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--info-line);
  border-radius: var(--radius);
  background: var(--info-soft);
}
.resume__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
}
.resume__desc { color: var(--text); }

.toast-area {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));   /* 지금 할 차례 막대 위 */
  z-index: 80;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-4);
  pointer-events: none;
}
.toast {
  max-width: 30rem;
  padding: var(--sp-3) var(--sp-5);
  border: 2px solid var(--ok-line);
  border-radius: var(--radius-pill);
  background: var(--ok-soft);
  color: var(--ok);
  font-weight: 800;
  box-shadow: var(--shadow);
  pointer-events: auto;
  animation: dv-rise var(--dur) var(--ease);
}
.toast[data-tone="warn"] { border-color: var(--wait-line); background: var(--wait-soft); color: var(--wait); }
@keyframes dv-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* ==========================================================================
   05 목록 — 이번 주 · 지난 원고 · 상태 딱지
   --------------------------------------------------------------------------
   .hero[data-state]   이번 주 원고. 맨 위. 리포트 .weekcard 와 같은 빨간 카드
                        todo(아직) · doing(하는 중) · done(올렸어요 — 빨강을 거두고 초록 면)
   .post-list > li > a.post   지난 원고. 한 줄 전체가 누르는 자리(64px 이상)
   .status[data-state] 올렸어요 / 아직 / 하는 중 / 확인 중 — **아이콘 + 낱말**. 색만으로 말하지 않는다
                        done(✓ 채움) · todo(○ 호박 테두리) · doing(◐ 파랑) · unknown(? 파선)
   .tally              "올린 글 5 · 아직 1"
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border-radius: 18px;
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: var(--on-accent);
  box-shadow: var(--shadow-hero);
}
.hero::after {
  content: "";
  position: absolute;
  right: -48px;
  top: -48px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero__eyebrow {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--on-accent);
}
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--on-accent);
  text-wrap: balance;
}
.hero__meta {
  font-size: var(--fs-body);
  color: var(--on-accent);
}
.hero :focus-visible { outline-color: var(--focus-on-dark); }
.hero .meter { background: rgba(255, 255, 255, 0.28); }
.hero .meter::-webkit-progress-bar { background: rgba(255, 255, 255, 0.28); }
.hero .meter::-webkit-progress-value { background: var(--on-accent); }
.hero .meter::-moz-progress-bar { background: var(--on-accent); }
.hero .status { justify-self: start; }
/* 올렸어요 — 이번 주 일이 끝났다. 빨강(누르세요)을 거둔다 */
.hero[data-state="done"] {
  background: var(--ok-soft);
  border: 2px solid var(--ok-line);
  color: var(--text);
  box-shadow: none;
}
.hero[data-state="done"]::after { display: none; }
.hero[data-state="done"] .hero__eyebrow,
.hero[data-state="done"] .hero__meta { color: var(--text); }
.hero[data-state="done"] .hero__title { color: var(--ink); }
.hero[data-state="done"] :focus-visible { outline-color: var(--focus); }

.tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.tally b { color: var(--ink); }

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.post {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "week   chev"
    "title  chev"
    "status chev";
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
  min-height: 64px;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow);
}
.post:hover { border-color: var(--line-strong); }
.post::after {
  content: "›";
  grid-area: chev;
  font-size: var(--fs-2xl);
  font-weight: 700;
  color: var(--muted);
}
.post__week {
  grid-area: week;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}
.post__title {
  grid-area: title;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.4;
}
.post__status { grid-area: status; justify-self: start; margin-top: var(--sp-1); }
@media (min-width: 600px) {
  .post {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "week  status chev"
      "title status chev";
  }
  .post__status { justify-self: end; margin-top: 0; }
}
/* 올렸어요 한 줄은 한 단계 가라앉힌다 — 아직인 것이 눈에 먼저 들어오게 */
.post[data-state="done"] { background: var(--card-2); box-shadow: none; }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border: 2px solid var(--wait-line);
  border-radius: var(--radius-pill);
  background: var(--wait-soft);
  color: var(--wait);
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}
.status::before { content: "○"; }
.status[data-state="done"] {
  border-color: var(--ok-fill);
  background: var(--ok-fill);
  color: var(--on-accent);
}
.status[data-state="done"]::before { content: "✓"; }
.status[data-state="doing"] {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}
.status[data-state="doing"]::before { content: "◐"; }
.status[data-state="unknown"] {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--card);
  color: var(--muted);
}
.status[data-state="unknown"]::before { content: "?"; }

/* 빈 상태 — 무엇이 없나 / 왜 / 다음에 무엇이 오나 */
.empty {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-5);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--card);
  text-align: center;
}
.empty__icon { font-size: 2.5rem; line-height: 1; }
.empty__title { font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.empty__desc { color: var(--muted); max-width: 28em; }


/* ==========================================================================
   06 단계 흐름 — .flow > .step
   --------------------------------------------------------------------------
   1 제목 복사 → 2 네이버 글쓰기 열기 → 3 본문(글·사진 조각) → 4 태그 → 5 발행 → 6 올렸어요
   왼쪽에 **둥근 번호**와 번호를 잇는 세로선. 본문 조각은 **네모 번호**(08) — 모양이 달라
   "3단계"와 "본문 3번"이 섞이지 않는다.

   data-state : todo(아직) · current(지금 할 차례) · done(끝남)
     current → 빨간 번호 + 빨간 2px 테두리 + "지금 할 차례" 깃발
     done    → 초록 번호(숫자는 그대로 둔다 — ✓ 로 바꾸면 몇 번이었는지 사라진다) + 오른쪽 위 ✓ 표시 + 끝난 흔적 문구
   ========================================================================== */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: 0 var(--sp-3);
  padding-bottom: var(--sp-6);
}
/* 번호끼리 잇는 세로선 */
.step::before {
  content: "";
  position: absolute;
  left: calc(1.375rem - 1px);
  top: 2.75rem;
  bottom: 0;
  width: 2px;
  background: var(--line-strong);
}
.step:last-child::before { display: none; }
.step[data-state="done"]::before { background: var(--ok); }

.step__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.step[data-state="current"] > .step__no { background: var(--accent); color: var(--on-accent); }
.step[data-state="done"] > .step__no { background: var(--ok-fill); color: var(--on-accent); }
/* 끝난 번호의 작은 ✓ 방울 — 숫자는 남긴다 */
.step[data-state="done"] > .step__no::after,
.piece[data-state="done"] .piece__no::after {
  content: "✓";
  position: absolute;
  right: -6px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--ok-fill);
  color: var(--on-accent);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1;
}

.step__body {
  min-width: 0;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
@media (max-width: 599px) {
  /* 폰 — 왼쪽 번호 기둥(44px)을 걷고 번호를 카드 왼쪽 위 모서리에 얹는다.
     기둥 + 단계 카드 + 본문 조각 카드 + 글 상자가 겹치면 375px 폰에서 원고 글 폭이 200px 로 줄어
     한 줄에 열세 글자가 된다(실측). 번호는 그대로 크게 남고, 글 폭은 260px 대로 돌아온다.
     세로선은 걷는다 — 카드가 위아래로 붙어 있어 순서는 번호가 말한다. */
  .step {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--sp-3);
  }
  .step::before { display: none; }
  .step__no {
    position: absolute;
    left: -4px;
    top: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--fs-body);
    box-shadow: 0 0 0 3px var(--paper);
  }
  .step__body { padding: var(--sp-4) var(--sp-3) var(--sp-4); }
  .step__head { padding-left: 2.5rem; min-height: 1.75rem; }
  .piece { padding: var(--sp-3); }
  .piece__text,
  .copy-src { padding: var(--sp-3); }
}
.step[data-state="current"] > .step__body {
  border: 2px solid var(--accent-decor);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow);
}
.step[data-state="done"] > .step__body { border-color: var(--ok-line); }

.step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.step__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--muted);
}
.step__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.step__desc { color: var(--text); }
.step__desc b { color: var(--ink); }
.step__act { display: grid; gap: var(--sp-2); }
@media (min-width: 600px) {
  .step__act { justify-items: start; }
  .step__act .btn--main { min-width: 16rem; }
}
/* 끝난 흔적 — "✓ 제목 복사함 · 오후 8:02" (시각은 이 기기 기억) */
.step__mark,
.piece__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  border: 2px solid var(--ok-fill);
  border-radius: var(--radius-pill);
  background: var(--ok-fill);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}
.step__mark[hidden],
.piece__mark[hidden] { display: none; }
/* 지금 할 차례 깃발 */
.step__flag,
.piece__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
}
.step__flag::before,
.piece__flag::before { content: "👉"; }
.step:not([data-state="current"]) > .step__body > .step__head > .step__flag { display: none; }
.piece:not([data-state="current"]) .piece__flag { display: none; }

/* 다음에 할 일 한 줄 — "다음: 2단계에서 네이버 글쓰기를 여세요" */
.step__next {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}
.step__next::before { content: "↓ "; }


/* ==========================================================================
   07 복사할 글 · 복사 실패 대안
   --------------------------------------------------------------------------
   .copy-src            복사될 글을 **그대로** 보여 주는 상자. 관장이 무엇을 복사하는지 본다
   .copy-src--title     제목 — 크게
   .copy-fallback       자동 복사가 안 될 때(오래된 폰·카톡 안 브라우저). 글이 **선택된 채로** 칸에 담긴다
                        role="alert" 로 나타난다. 버튼 옆에 조용히 뜨면 모른다
   ========================================================================== */
.copy-src {
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font-size: var(--fs-read);
  line-height: 1.75;
  white-space: pre-wrap;
}
.copy-src--title {
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
  white-space: normal;
}

.copy-fallback {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 2px solid var(--wait-line);
  border-left-width: 6px;
  border-left-color: var(--wait);
  border-radius: 12px;
  background: var(--wait-soft);
}
.copy-fallback[hidden] { display: none; }
.copy-fallback__title {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--ink);
}
.copy-fallback__title::before { content: "⚠ "; color: var(--wait); }
.copy-fallback__box {
  width: 100%;
  min-height: 8rem;
  padding: var(--sp-3);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-body);    /* 16px 미만이면 iOS 가 화면을 확대한다 */
  line-height: 1.6;
  resize: vertical;
}


/* ==========================================================================
   08 본문 조각 — .pieces > .piece
   --------------------------------------------------------------------------
   원고 blocks 를 **사진 자리(image 블록)에서 끊어** 순서대로 놓는다.
     글 조각(data-kind="text")  = 사진과 사진 사이의 소제목·문단·인용·목록 묶음. 복사 버튼 하나
     사진 조각(data-kind="photo") = image 블록 하나. **글 조각 사이 제자리에** 끼운다
   번호는 글·사진을 가리지 않고 **1부터 이어서** 매긴다(본문 1번 글, 2번 사진, 3번 글 …).
   네모 번호 — 단계의 둥근 번호와 모양부터 다르다.

   data-state : todo · current · done · skipped(뒤 조각을 먼저 했는데 이건 안 함 — 호박 파선)
   ========================================================================== */
.pieces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.piece {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--card);
}
.piece__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
  align-items: center;
}
.piece__no {
  position: relative;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 10px;
  background: var(--card-2);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-size: var(--fs-lg);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.piece__title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
}
.piece__title small {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}
.piece__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
/* 글 / 사진 — 글자 딱지. 사진은 파랑 */
.piece__kind {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--ink);
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1.7;
}
.piece[data-kind="photo"] .piece__kind {
  border-color: var(--info-line);
  background: var(--info-soft);
  color: var(--info);
}
.piece__hint {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* 원고 글 — 관장이 네이버에 붙이기 전에 읽는다. 18px */
.piece__text {
  padding: var(--sp-4);
  border-radius: 12px;
  background: var(--card-2);
  color: var(--text);
  font-size: var(--fs-read);
  line-height: 1.8;
}
.piece__text > * + * { margin-top: var(--sp-3); }
.piece__text h3 {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
}
/* 소제목 표시 — 네이버에서 '소제목'으로 바꾸면 좋은 줄(안 바꿔도 된다) */
.piece__text h3::after {
  content: "소제목";
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  vertical-align: 0.15em;
}
.piece__text blockquote {
  margin-inline: 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  border-left: 4px solid var(--accent-decor);
  color: var(--ink);
  font-weight: 700;
}
.piece__text ul,
.piece__text ol { margin-block: 0; padding-left: 1.3em; }
.piece__text li + li { margin-top: var(--sp-1); }
.piece__text hr {
  border: 0;
  border-top: 2px dashed var(--line-strong);
}
/* 원고의 강조 구절(paragraph.highlight). 복사하면 사라진다 — 네이버에서 굵게 하면 좋다 */
.piece__text mark {
  background: var(--wait-soft);
  color: inherit;
  font-weight: 800;
  padding: 0 2px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.piece__end {
  font-size: var(--fs-sm);
  color: var(--muted);
}
.piece__end b { color: var(--ink); }

/* 상태 */
.piece[data-state="current"] {
  border: 2px solid var(--accent-decor);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.piece[data-state="current"] .piece__no {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.piece[data-state="done"] {
  border-color: var(--ok-line);
  background: var(--card-2);
}
.piece[data-state="done"] .piece__no {
  background: var(--ok-fill);
  border-color: var(--ok-fill);
  color: var(--on-accent);
}
.piece[data-state="done"] .piece__text { background: var(--card); }
.piece[data-state="skipped"] {
  border: 2px dashed var(--wait);
  background: var(--wait-soft);
}
.piece[data-state="skipped"] .piece__no { border-style: dashed; border-color: var(--wait); color: var(--wait); }
.piece__skip {
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--ink);
}
.piece__skip::before { content: "⚠ "; color: var(--wait); }
.piece:not([data-state="skipped"]) .piece__skip { display: none; }

@media (min-width: 600px) {
  .piece { padding: var(--sp-5); }
  .piece__act { justify-self: start; }
  .piece__act .btn--main { min-width: 16rem; }
}


/* ==========================================================================
   09 사진
   --------------------------------------------------------------------------
   .photo[data-photo="ready"]  사진이 준비돼 있다 — 미리보기 + "사진 저장하기"(a[download])
   .photo[data-photo="none"]   없다 — "관장님이 가진 사진 중 골라 주세요" + 어떤 사진인지 + 조심할 것
   .photo__want   "여기에 넣을 사진" — image 블록의 query. 두 경우 모두 맨 위
   .photo__cap    사진 아래 설명(caption) — 있으면 따로 복사 버튼
   ========================================================================== */
.photo {
  display: grid;
  gap: var(--sp-3);
}
.photo__want {
  padding: var(--sp-3) var(--sp-4);
  border-left: 4px solid var(--info);
  border-radius: 0 10px 10px 0;
  background: var(--info-soft);
  color: var(--text);
}
.photo__want b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--info);
}
.photo__frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card-2);
}
.photo__img {
  width: 100%;
  max-height: 26rem;
  object-fit: contain;
  /* 길게 눌러 "사진 앱에 저장"(아이폰)이 되도록 기본 동작을 막지 않는다 */
  -webkit-touch-callout: default;
}
.photo__frame figcaption {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.photo__none {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 2px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--card);
  text-align: left;
}
.photo__none-title {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--ink);
}
.photo__none-title::before { content: "🖼 "; }
.photo__none ul { margin: 0; padding-left: 1.2em; color: var(--text); }
.photo__none li + li { margin-top: var(--sp-1); }
.photo__cap {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.photo__cap-label {
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--muted);
}
.photo__cap-text { color: var(--text); }


/* ==========================================================================
   10 태그
   --------------------------------------------------------------------------
   .tags > li > button.tag   태그 하나씩 복사(44px). 누르면 data-copy="copied" 로 초록 + ✓
   "태그 전부 복사"는 .btn--main 으로 따로 둔다
   ========================================================================== */
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: 0 var(--sp-4);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.tag:hover { border-color: var(--ink); }
.tag::before { content: "#"; color: var(--muted); font-weight: 800; }
.tag[data-copy="copied"] {
  border-color: var(--ok-fill);
  background: var(--ok-fill);
  color: var(--on-accent);
}
.tag[data-copy="copied"]::before { content: "✓ #"; color: var(--on-accent); }


/* ==========================================================================
   11 발행 안내 · 올렸어요
   --------------------------------------------------------------------------
   .howto        번호 매긴 짧은 안내("네이버에서 발행 누르기"). 네이버 화면 모양을 **단정하지 않는다**
                 — 버튼 색·자리는 네이버가 바꾼다. "오른쪽 위 '발행'"까지만
   .upload[data-state]
     idle     "다 올리셨나요?" + 빨간 64px "네이버에 올렸어요" (+ 남은 조각이 있으면 .upload__left)
     sending  같은 버튼 aria-busy
     done     초록 면 + 큰 ✓ + "올렸어요 · 9월 19일(금) 오후 8:14" + "담당자에게 알렸어요" + 되돌리기(글자 버튼)
     failed   "알리지 못했어요" — 빨강. 이 기기에는 기억해 두었다 + 다시 보내기
   되돌리기는 확인창 없이 바로. 대신 토스트로 한 번 더 알린다.
   ========================================================================== */
.howto {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: howto;
  display: grid;
  gap: var(--sp-3);
}
.howto > li {
  counter-increment: howto;
  position: relative;
  padding-left: 2.5rem;
  color: var(--text);
}
.howto > li::before {
  content: counter(howto);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 900;
}
.howto b { color: var(--ink); }

.upload {
  display: grid;
  gap: var(--sp-3);
}
.upload__title {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--ink);
}
.upload__desc { color: var(--text); }
.upload__left {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--wait-line);
  border-radius: 10px;
  background: var(--wait-soft);
  color: var(--text);
  font-size: var(--fs-body);
}
.upload__left b { color: var(--ink); }
.upload__left::before { content: "⚠ "; color: var(--wait); font-weight: 800; }
.upload__done {
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4);
  align-items: center;
}
.upload__check {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--ok-fill);
  color: var(--on-accent);
  font-size: var(--fs-2xl);
  font-weight: 900;
}
.upload__done-title {
  font-size: var(--fs-2xl);
  font-weight: 900;
  color: var(--ok);
}
.upload__time {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--text);
}
.upload__sent {
  font-size: var(--fs-body);
  color: var(--text);
}
.upload__sent::before { content: "✓ "; color: var(--ok); font-weight: 900; }
.upload__error {
  display: none;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--danger);
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--text);
}
.upload__error-title { font-weight: 800; color: var(--danger); }
.upload__error-title::before { content: "⚠ "; }

.upload[data-state="done"] {
  padding: var(--sp-5);
  border: 2px solid var(--ok-line);
  border-radius: var(--radius);
  background: var(--ok-soft);
}
.upload[data-state="done"] .upload__done { display: grid; }
.upload[data-state="done"] .upload__ask { display: none; }
.upload[data-state="failed"] .upload__error { display: grid; }
.upload:not([data-state="done"]) .upload__after { display: none; }
.upload__ask {
  display: grid;
  gap: var(--sp-3);
}
.upload__after {
  display: grid;
  gap: var(--sp-2);
  justify-items: start;
}


/* ==========================================================================
   12 지금 할 차례 막대 · PC 순서표 · 넓은 화면 배치
   --------------------------------------------------------------------------
   .now-bar   화면 아래에 붙어 따라온다(position: sticky; bottom: 0). **body 의 마지막 자식**으로 둔다 —
              그래야 문서 끝에서는 제자리에 앉아 마지막 내용을 가리지 않는다.
              "지금 할 차례 · 본문 4번 사진 넣기  [여기로 ↓]" + 진행 막대(본문 3 / 7).
              카톡·네이버 앱을 오가다 돌아왔을 때 **어디였는지 한 번에** 찾는 자리.
              1100px 이상에서는 왼쪽 순서표(.outline)가 이 일을 하므로 숨긴다.
   .outline   PC 넓은 화면의 왼쪽 순서표. 단계·조각 전부를 한 줄씩, 상태 기호와 함께.
              누르면 그 자리로. 화면에 붙어 따라오되 자기 안에서 스크롤된다.
   .layout    1100px 이상에서 순서표 | 본문 두 칸. 그 아래는 한 칸(순서표 숨김)
   .meter     native <progress>. style 없이 value/max 만 준다(CSP)
   ========================================================================== */
.meter {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--track);
  overflow: hidden;
}
.meter::-webkit-progress-bar { background: var(--track); border-radius: var(--radius-pill); }
.meter::-webkit-progress-value { background: var(--ok-fill); border-radius: var(--radius-pill); }
.meter::-moz-progress-bar { background: var(--ok-fill); border-radius: var(--radius-pill); }

.now-bar {
  position: sticky;
  bottom: 0;
  z-index: 70;
  border-top: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow-up);
  padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
}
.now-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
}
.now-bar__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--accent-text);
}
.now-bar__what {
  display: block;
  font-size: var(--fs-body);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.now-bar__go {
  min-height: var(--tap);
  padding-inline: var(--sp-4);
  font-size: var(--fs-body);
}
.now-bar__count {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--muted);
}
.now-bar[data-state="done"] .now-bar__label { color: var(--ok); }

.layout { display: block; }
.outline { display: none; }
@media (min-width: 1100px) {
  .layout {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, var(--wrap));
    justify-content: center;
    gap: var(--sp-8);
    padding: 0 var(--sp-6);
  }
  .layout > .wrap { max-width: none; padding: 0; margin: 0; }
  .outline {
    display: block;
    position: sticky;
    top: var(--sp-4);
    align-self: start;
    max-height: calc(100vh - var(--sp-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: var(--sp-6);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
  }
  .now-bar { display: none; }
  .toast-area { bottom: var(--sp-6); }
  /* 머리 글자를 순서표 왼쪽 끝에 맞춘다(두 칸 배치 전체 폭) */
  .masthead--compact > .wrap {
    max-width: calc(var(--rail-w) + var(--sp-8) + var(--wrap) + var(--sp-12));
    padding: 0 var(--sp-6);
  }
}
.outline__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--muted);
}
.outline__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outline__list .outline__list { padding-left: var(--sp-4); }
.outline__link {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: center;
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-2);
  border-radius: 8px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
}
.outline__link:hover { background: var(--card-2); }
.outline__link::before {
  content: "○";
  text-align: center;
  color: var(--muted);
  font-weight: 900;
}
.outline__link[data-state="done"] { color: var(--muted); }
.outline__link[data-state="done"]::before { content: "✓"; color: var(--ok); }
.outline__link[data-state="current"],
.outline__link[aria-current="step"] {
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 900;
}
.outline__link[data-state="current"]::before { content: "👉"; }
.outline__link[data-state="skipped"]::before { content: "!"; color: var(--wait); }


/* ==========================================================================
   13 움직임 줄이기 · 인쇄
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media print {
  .now-bar, .outline, .toast-area, .btn, .tag, .masthead::after { display: none !important; }
  body { background: #fff; }
  .step__body, .piece { box-shadow: none; break-inside: avoid; }
}