/* ====================================================================
   pb-tone.css — 그림책형 분할형 본문 카드 톤 시스템 (v138 1차)
   ────────────────────────────────────────────────────────────────────
   적용 대상: 그림책형 분할형(.pb--split) 일반 장면 + 분할형 엔딩.
   적용 위치: .pb-frame(외곽 공기감) + 그 자식 .pb-text(본문 카드).

   원칙:
   1) 학생 그림(.pb-illust__photo img)에는 어떤 변형도 가지 X — filter/blend/opacity 금지.
   2) 행동버튼(.pb-text__actions, .pb-choice-*)에는 톤 영향 가지 X.
   3) 옛 작품 보호: 톤 클래스가 붙어있지 않은 .pb-frame은 기존 viewer.css 그대로.
      → 모든 새 규칙은 [class*="pb-tone-color--"] selector로 한정.
   4) 본문 글자 크기·행간·폰트는 viewer.css 기존 .pb-text__body 규칙을 그대로 사용.
      여기서는 배경·테두리·그림자·구분선·외곽 공기·색만 조절.

   클래스 prefix:
   · .pb-tone-style--{default|paper|border|pastel}   (작품 단위)
   · .pb-tone-color--{white|green|yellow|blue}       (작품 단위)
   · .pb-tone--{default|bright|develop|tense|crisis} (장면 단위)
   · .pb-end-tone--{default|bright|afterglow}        (엔딩 단위)
   ==================================================================== */

/* ════════════════════════════════════════════════════════════
   1) 카드 스타일 — 질감/형태만 결정 (색 ❌)
   ════════════════════════════════════════════════════════════ */
.pb-tone-style--default {
  --pbt-card-radius:        12px;
  --pbt-card-border-width:  1px;
  --pbt-card-border-style:  solid;
  --pbt-card-texture:       none;
  --pbt-card-inner-ring:    0 0 0 0 transparent;
  --pbt-card-shadow-base:   0 2px 6px;
}
.pb-tone-style--paper {
  --pbt-card-radius:        8px;
  --pbt-card-border-width:  1px;
  --pbt-card-border-style:  solid;
  --pbt-card-texture:
    repeating-linear-gradient(135deg,
      rgba(80,50,20,0.020) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(45deg,
      rgba(80,50,20,0.015) 0 1px, transparent 1px 7px);
  --pbt-card-inner-ring:    inset 0 1px 0 rgba(255,255,255,0.5);
  --pbt-card-shadow-base:   0 1px 0 rgba(120,90,50,0.06), 0 4px 14px;
}
.pb-tone-style--border {
  --pbt-card-radius:        14px;
  --pbt-card-border-width:  2px;
  --pbt-card-border-style:  solid;
  --pbt-card-texture:       none;
  --pbt-card-inner-ring:    inset 0 0 0 1px rgba(255,255,255,0.6);
  --pbt-card-shadow-base:   0 1px 3px rgba(120,90,50,0.06), 0 6px 16px;
}
.pb-tone-style--pastel {
  --pbt-card-radius:        16px;
  --pbt-card-border-width:  1px;
  --pbt-card-border-style:  solid;
  --pbt-card-texture:       none;
  --pbt-card-inner-ring:    0 0 0 0 transparent;
  --pbt-card-shadow-base:   0 6px 22px;
}

/* ════════════════════════════════════════════════════════════
   2) 색계열 — hue만 결정. 명도·채도는 톤이 조절.
   ════════════════════════════════════════════════════════════ */
/* v138-fix10 (v135-4): 흰색 계열 — viewer.css의 --v03-card-bg(#fffaee)와
   거의 동일하게 매칭. 기본 옵션이라 "기존 화면 그대로" 보여야.
   기존 0.973·0.013·85 → 살짝 어둡고 노랑 hue → 아이보리 인상.
   · c-l   0.973 → 0.985 (#fffaee 명도 매칭, 더 흰색)
   · c-c   0.013 → 0.010 (살짝 약화 — 모든 톤에서 색 약하게)
   · c-h   85    → 92    (#fffaee hue — 중성 따뜻)
   · border-h 80 → 88   (테두리도 황색 멀리)
   · border-c 0.06 → 0.04 (테두리 채도 약화 — 갈색 선 X)
   · frame-c 0.018 → 0.012 (외곽 채도 약화 — 베이지 잠김 X) */
.pb-tone-color--white {
  --pbt-c-l: 0.985; --pbt-c-c: 0.010; --pbt-c-h: 92;
  --pbt-color-accent: oklch(0.70 0.10 80);
  --pbt-color-border-h: 88; --pbt-color-border-c: 0.04; --pbt-color-border-l: 0.40;
  --pbt-frame-h: 88; --pbt-frame-c: 0.012;
}
.pb-tone-color--green {
  --pbt-c-l: 0.952; --pbt-c-c: 0.030; --pbt-c-h: 130;
  --pbt-color-accent: oklch(0.55 0.10 145);
  --pbt-color-border-h: 140; --pbt-color-border-c: 0.10; --pbt-color-border-l: 0.42;
  --pbt-frame-h: 130; --pbt-frame-c: 0.025;
}
/* v138-fix11 (v135-3 추가 보정): 노랑 계열 — "햇살 크림" 방향.
   사용자 명세 — 현재(fix9) 베이지/낡은 종이 인상 남아있음. 더 cream 쪽으로.
   그림 속 노란 길과 본문 카드가 경쟁하지 않게 색감 더 약화.
   · c-l    0.972 → 0.975 (살짝 더 밝게)
   · c-c    0.035 → 0.025 (채도 -29% 더 — cream만 살짝)
   · color-border-c 0.08 → 0.06 (테두리 더 약화 — 갈색 선 X)
   · frame-c 0.022 → 0.018 (외곽 더 약화 — 베이지 잠김 X) */
.pb-tone-color--yellow {
  --pbt-c-l: 0.975; --pbt-c-c: 0.025; --pbt-c-h: 90;
  --pbt-color-accent: oklch(0.65 0.12 80);
  --pbt-color-border-h: 80; --pbt-color-border-c: 0.06; --pbt-color-border-l: 0.50;
  --pbt-frame-h: 85; --pbt-frame-c: 0.018;
}
.pb-tone-color--blue {
  --pbt-c-l: 0.955; --pbt-c-c: 0.026; --pbt-c-h: 230;
  --pbt-color-accent: oklch(0.55 0.10 240);
  --pbt-color-border-h: 230; --pbt-color-border-c: 0.09; --pbt-color-border-l: 0.42;
  --pbt-frame-h: 230; --pbt-frame-c: 0.020;
}

/* ════════════════════════════════════════════════════════════
   2-A) 색계열별 외곽 보정 (v138-fix3 / v135-1)
   ────────────────────────────────────────────────────────────
   사용자 명세 — 초록 계열에서 외곽 종이톤이 본문 카드보다 강하게
   보이는 문제 보정. 카드는 그대로, 외곽만 약화. 다른 색계열은 변경 X
   (white/yellow/blue는 추후 검증 후).
   ════════════════════════════════════════════════════════════ */

/* 초록 — 외곽 종이톤 채도 -20% (모든 톤에 공통 영향). */
.pb-tone-color--green {
  --pbt-frame-c: 0.020;            /* 0.025 → 0.020 */
}

/* 초록 + 진하게(crisis) — 외곽 영향력 추가 약화.
   학생 그림이 닫힌 박스 안에 갇힌 느낌 안 들게. 본문 카드 색은 그대로 진해짐. */
.pb-tone-color--green.pb-tone--crisis {
  --pbt-t-frame-l-delta: -0.025;   /* -0.045 → -0.025 */
  --pbt-t-frame-c-mul: 1.10;       /* 1.30 → 1.10 */
  --pbt-t-vignette: 0.08;          /* 0.14 → 0.08 */
}

/* v138-fix8 (v135-2): 파랑 계열 외곽 보정.
   사용자 명세 — 파랑 본문 카드 톤은 좋음. 외곽이 진하게에서 차갑게 잠기는
   문제만 약화. 본문 카드 자체는 안 건드림. */

/* 파랑 — 외곽 종이톤 채도 -25% (옛 0.020 → 0.015).
   페이지 전체가 파랗게 잠기지 않게. */
.pb-tone-color--blue {
  --pbt-frame-c: 0.015;            /* 0.020 → 0.015 */
}

/* 파랑 + 진하게(crisis) — 외곽 영향력 추가 약화.
   진하게에서도 큰 외곽이 보조 역할이어야. 본문 카드 진하기는 그대로. */
.pb-tone-color--blue.pb-tone--crisis {
  --pbt-t-frame-l-delta: -0.025;   /* -0.045 → -0.025 */
  --pbt-t-frame-c-mul: 1.10;       /* 1.30 → 1.10 */
  --pbt-t-vignette: 0.08;          /* 0.14 → 0.08 */
}

/* v138-fix13 (v135-6): 노랑 + 3단계(tense) 재조정.
   fix11에서 l-delta -0.035로 넣었는데, 4단계 crisis가 -0.025라 3단계가 더
   어두움 — 단조 증가 깨짐. tense를 crisis보다 명도 밝게 + 채도 약하게 조정.
   외곽 변수도 함께 약화 (frame/vignette). */
.pb-tone-color--yellow.pb-tone--tense {
  --pbt-t-l-delta: -0.015;         /* fix11 -0.035 → -0.015 (crisis -0.025보다 밝게) */
  --pbt-t-c-mul: 0.92;             /* fix11 1.00 → 0.92 (cream 유지) */
  --pbt-t-frame-l-delta: -0.005;   /* 기본 -0.020 → -0.005 */
  --pbt-t-frame-c-mul: 1.00;       /* 기본 1.20 → 1.00 */
  --pbt-t-vignette: 0.02;          /* 기본 0.08 → 0.02 */
}

/* v138-fix11 (v135-3 추가 보정): 노랑 + 진하게(crisis) 추가 약화.
   사용자 명세 — fix9도 탁한 종이 느낌 남음. 배경은 cream 유지, 무게감은
   테두리·그림자 중심. background 명도 더 올리고 채도는 살짝 감소(0.85). */
.pb-tone-color--yellow.pb-tone--crisis {
  --pbt-t-l-delta: -0.025;         /* fix9 -0.055 → -0.025 (배경 거의 그대로) */
  --pbt-t-c-mul: 0.85;             /* fix9 1.00 → 0.85 (채도 감소 — cream 유지) */
  /* border-mul·shadow-alpha·ring-alpha는 기본 crisis 그대로 — 테두리·그림자
     중심 무게감. 배경 자체는 거의 안 변함. */
  --pbt-t-frame-l-delta: -0.010;   /* fix9 -0.020 → -0.010 (외곽 거의 그대로) */
  --pbt-t-frame-c-mul: 1.00;
  --pbt-t-vignette: 0.04;          /* fix9 0.06 → 0.04 */
}

/* v138-fix10 (v135-4): 흰색 + 진하게(crisis) — 배경 베이지화 차단.
   기본 crisis는 l-delta -0.090·c-mul 1.20 → 흰색 카드가 베이지/갈색으로
   물듦. 사용자 명세 — 진하게도 배경 베이지 X. 무게감은 테두리·그림자만.
   l-delta 약화 + c-mul 1.00 (채도 증가 X). 단 테두리·그림자 변수는 그대로
   유지(기본 crisis 그대로) — 무게감 살림. */
.pb-tone-color--white.pb-tone--crisis {
  --pbt-t-l-delta: -0.030;         /* -0.090 → -0.030 (배경 거의 안 어두워짐) */
  --pbt-t-c-mul: 1.00;             /* 1.20 → 1.00 (베이지화 차단) */
  --pbt-t-frame-l-delta: -0.012;   /* -0.045 → -0.012 (외곽 거의 안 어두워짐) */
  --pbt-t-frame-c-mul: 1.00;       /* 1.30 → 1.00 */
  --pbt-t-vignette: 0.04;          /* 0.14 → 0.04 */
  /* 테두리·그림자(border-mul·shadow-alpha·ring-alpha)는 기본 crisis 그대로 —
     테두리·그림자 중심으로만 무게감 표현 */
}

/* v138-fix13 (v135-6): 흰색 + 3단계(tense) 신규 오버라이드.
   기본 tense는 l-delta -0.055·c-mul 1.15 → 흰색 crisis(l -0.030)보다
   3단계가 더 어두움 — 단조 증가 깨짐. crisis보다 명도 밝게 조정. */
.pb-tone-color--white.pb-tone--tense {
  --pbt-t-l-delta: -0.018;         /* 기본 -0.055 → -0.018 (crisis -0.030보다 밝게) */
  --pbt-t-c-mul: 1.00;             /* 기본 1.15 → 1.00 (베이지화 차단) */
  --pbt-t-frame-l-delta: -0.008;   /* 기본 -0.020 → -0.008 */
  --pbt-t-frame-c-mul: 1.00;       /* 기본 1.20 → 1.00 */
  --pbt-t-vignette: 0.02;          /* 기본 0.08 → 0.02 */
}

/* ════════════════════════════════════════════════════════════
   3) 본문 카드 톤 (일반 장면) — 기본/밝게/은은하게/차분하게/진하게
      release/해소는 CSS에 남기지 않음 (UI 제외). 향후 추가 시 별도 처리.
   ════════════════════════════════════════════════════════════ */
.pb-tone--default {
  --pbt-t-l-delta: 0;       --pbt-t-c-mul: 1.00; --pbt-t-border-mul: 1.00; --pbt-t-border-l-delta: 0;
  --pbt-t-shadow-alpha: 0.08; --pbt-t-shadow-spread: 10px; --pbt-t-divider-alpha: 0.50;
  --pbt-t-ring-alpha: 0;    --pbt-t-frame-l-delta: 0;     --pbt-t-frame-c-mul: 1.00; --pbt-t-vignette: 0;
  --pbt-t-extra-glow: 0 0 0 transparent;
}
.pb-tone--bright {
  --pbt-t-l-delta: 0.030;   --pbt-t-c-mul: 0.80; --pbt-t-border-mul: 0.50; --pbt-t-border-l-delta: 0.06;
  --pbt-t-shadow-alpha: 0.06; --pbt-t-shadow-spread: 6px;  --pbt-t-divider-alpha: 0.30;
  --pbt-t-ring-alpha: 0;    --pbt-t-frame-l-delta: 0.012; --pbt-t-frame-c-mul: 0.85; --pbt-t-vignette: 0;
  --pbt-t-extra-glow: 0 0 0 transparent;
}
.pb-tone--develop {
  --pbt-t-l-delta: -0.012;  --pbt-t-c-mul: 1.05; --pbt-t-border-mul: 0.85; --pbt-t-border-l-delta: -0.02;
  --pbt-t-shadow-alpha: 0.12; --pbt-t-shadow-spread: 16px; --pbt-t-divider-alpha: 0.55;
  --pbt-t-ring-alpha: 0;    --pbt-t-frame-l-delta: 0;     --pbt-t-frame-c-mul: 1.05; --pbt-t-vignette: 0.02;
  --pbt-t-extra-glow: 0 0 0 transparent;
}
.pb-tone--tense {
  --pbt-t-l-delta: -0.055;  --pbt-t-c-mul: 1.15; --pbt-t-border-mul: 1.10; --pbt-t-border-l-delta: -0.08;
  --pbt-t-shadow-alpha: 0.22; --pbt-t-shadow-spread: 32px; --pbt-t-divider-alpha: 0.75;
  --pbt-t-ring-alpha: 0.05; --pbt-t-frame-l-delta: -0.020; --pbt-t-frame-c-mul: 1.20; --pbt-t-vignette: 0.08;
  --pbt-t-extra-glow: 0 0 0 transparent;
}
.pb-tone--crisis {
  --pbt-t-l-delta: -0.090;  --pbt-t-c-mul: 1.20; --pbt-t-border-mul: 1.20; --pbt-t-border-l-delta: -0.14;
  --pbt-t-shadow-alpha: 0.32; --pbt-t-shadow-spread: 44px; --pbt-t-divider-alpha: 0.90;
  --pbt-t-ring-alpha: 0.18; --pbt-t-frame-l-delta: -0.045; --pbt-t-frame-c-mul: 1.30; --pbt-t-vignette: 0.14;
  --pbt-t-extra-glow: 0 0 0 transparent;
}

/* ════════════════════════════════════════════════════════════
   4) 엔딩 마감톤
   ════════════════════════════════════════════════════════════ */
.pb-end-tone--default {
  --pbt-t-l-delta: 0;       --pbt-t-c-mul: 1.00; --pbt-t-border-mul: 1.00; --pbt-t-border-l-delta: 0;
  --pbt-t-shadow-alpha: 0.12; --pbt-t-shadow-spread: 18px; --pbt-t-divider-alpha: 0.55;
  --pbt-t-ring-alpha: 0;    --pbt-t-frame-l-delta: 0;     --pbt-t-frame-c-mul: 1.00; --pbt-t-vignette: 0.02;
  --pbt-t-extra-glow: 0 0 0 transparent;
}
.pb-end-tone--bright {
  --pbt-t-l-delta: 0.025;   --pbt-t-c-mul: 0.85; --pbt-t-border-mul: 0.70; --pbt-t-border-l-delta: 0.04;
  --pbt-t-shadow-alpha: 0.08; --pbt-t-shadow-spread: 18px; --pbt-t-divider-alpha: 0.42;
  --pbt-t-ring-alpha: 0;    --pbt-t-frame-l-delta: 0.020; --pbt-t-frame-c-mul: 0.90; --pbt-t-vignette: 0;
  --pbt-t-extra-glow: 0 0 36px color-mix(in oklch, var(--pbt-color-accent) 18%, transparent);
}
.pb-end-tone--afterglow {
  --pbt-t-l-delta: -0.035;  --pbt-t-c-mul: 0.78; --pbt-t-border-mul: 0.50; --pbt-t-border-l-delta: 0;
  --pbt-t-shadow-alpha: 0.10; --pbt-t-shadow-spread: 36px; --pbt-t-divider-alpha: 0.42;
  --pbt-t-ring-alpha: 0;    --pbt-t-frame-l-delta: -0.020; --pbt-t-frame-c-mul: 0.90; --pbt-t-vignette: 0.06;
  --pbt-t-extra-glow: 0 0 0 transparent;
}

/* ════════════════════════════════════════════════════════════
   5) 합성 — .pb-frame에 색계열·톤 클래스가 붙어있을 때만 변수 합성.
      옛 작품(.pb-frame에 톤 클래스 없음)은 viewer.css 그대로.
   ════════════════════════════════════════════════════════════ */
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] {
  /* 본문 카드 배경 */
  --pbt-card-bg:
    oklch(
      calc(var(--pbt-c-l) + var(--pbt-t-l-delta, 0))
      calc(var(--pbt-c-c) * var(--pbt-t-c-mul, 1))
      var(--pbt-c-h)
    );
  /* 테두리 */
  --pbt-card-border:
    oklch(
      calc(var(--pbt-color-border-l) + var(--pbt-t-border-l-delta, 0))
      calc(var(--pbt-color-border-c) * var(--pbt-t-c-mul, 1))
      var(--pbt-color-border-h)
      / calc(0.70 * var(--pbt-t-border-mul, 1))
    );
  /* 본문↔선택지 구분선 */
  --pbt-card-divider:
    oklch(
      var(--pbt-color-border-l)
      calc(var(--pbt-color-border-c) * 0.7)
      var(--pbt-color-border-h)
      / var(--pbt-t-divider-alpha, 0.5)
    );
  /* 그림자 합성 (한 단 + 안쪽 ring + 부가 glow) */
  --pbt-card-shadow:
    var(--pbt-card-shadow-base, 0 2px 6px)
      oklch(0.35 0.05 var(--pbt-color-border-h) / var(--pbt-t-shadow-alpha, 0.08)),
    var(--pbt-card-inner-ring, 0 0 0 0 transparent),
    inset 0 0 0 1px oklch(0.30 0.04 var(--pbt-color-border-h) / var(--pbt-t-ring-alpha, 0)),
    var(--pbt-t-extra-glow, 0 0 0 transparent);
  /* 페이지 외곽 종이톤 */
  --pbt-frame-bg:
    oklch(
      calc(0.945 + var(--pbt-t-frame-l-delta, 0))
      calc(var(--pbt-frame-c, 0.02) * var(--pbt-t-frame-c-mul, 1))
      var(--pbt-frame-h, 80)
    );
}

/* ════════════════════════════════════════════════════════════
   6) 페이지 외곽 공기감 — .pb-frame 자체 배경 + ::after 비네팅
      비네팅은 학생 그림 안쪽으로 비추지 않도록 radial 55%부터.
      pointer-events:none — 클릭 막지 X.
   ════════════════════════════════════════════════════════════ */
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] {
  background: var(--pbt-frame-bg);
  transition: background 0.45s ease;
  /* 비네팅을 위해 stacking context 확보 — 자식 z-index가 작동 */
  position: relative;
}
.scene-screen--pb .pb-frame[class*="pb-tone-color--"]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 55%,
    oklch(0.20 0.04 var(--pbt-frame-h, 80) / var(--pbt-t-vignette, 0)) 100%
  );
  border-radius: inherit;
  transition: background 0.45s ease;
  z-index: 0;
}
/* 비네팅보다 자식 콘텐츠가 위에 보이도록 */
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] > .pb-illust,
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] > .pb-text,
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] > .pb-stage {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   7) 본문 카드 렌더 — 배경/테두리/그림자만 조절.
      v138-fix4: .pb-text__inner 마크업 변경은 회귀(빈 공간 문제) 일으켜 revert.
      마크업 변경 없이 CSS만으로 처리하는 옛 정책으로 복귀. 행동버튼 wrapper
      침범 차단은 아래 8) 가드레일에서 처리.
   ════════════════════════════════════════════════════════════ */
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] > .pb-text {
  background-color: var(--pbt-card-bg);
  background-image: var(--pbt-card-texture, none);
  border-width: var(--pbt-card-border-width, 1px);
  border-style: var(--pbt-card-border-style, solid);
  border-color: var(--pbt-card-border);
  border-radius: var(--pbt-card-radius, 12px);
  box-shadow: var(--pbt-card-shadow);
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}
/* 본문↔선택지 구분선 — 기존 .pb-text__actions-label 위쪽 1px 흐릿한 선처럼 보이게.
   기존 viewer.css에 이 분리선이 별도로 정의돼 있으면 거기서 처리. 여기서는 안 넣음. */

/* ════════════════════════════════════════════════════════════
   8) 가드레일 — 학생 그림 절대 보호. 행동버튼 톤 영향 차단.
   ════════════════════════════════════════════════════════════ */
.scene-screen--pb .pb-illust__photo,
.scene-screen--pb .pb-illust__photo img,
.scene-screen--pb .pb-illust__inner {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}
/* 행동버튼은 톤 변수 inherit 받지 않게 — 변수 끊기.
   배경·테두리는 viewer.css의 기존 .pb-text__actions / 버튼 규칙 그대로. */
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] .pb-text__actions,
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] .pb-text__actions * {
  --pbt-card-bg: initial;
  --pbt-card-border: initial;
  --pbt-card-shadow: initial;
}

/* v138-fix5 (v135-1-fix2): 행동버튼 wrapper(.pb-text__actions)에는 배경 넣지 X.
   fix4에서 넣은 wrapper background가 카드 안 큰 흰 박스로 보여 디자인 망가짐.
   사용자 명세 — wrapper는 투명, 카드 흐름 자연스럽게 이어지게. */
/* (.pb-text__actions wrapper에는 background 넣지 X — 카드 톤 색 비침. 자연스러움) */

/* v138-fix15 (v135-5): 실제 행동버튼 자체 배경 공통 보정.
   원인: viewer.css의 .choice-v03--picturebook[data-pb-color="N"] 배경이
   rgba(...,0.06) — alpha 0.06이라 사실상 투명. 카드 톤 색 비침.

   fix7 옛 정책: 색계열별로 옅은 색(#f4f8f1·#f1f4f9·#faf3ee)을 넣었는데
   사용자 보니 카드 톤에 묻혀 보임. 공통 거의 흰색(#fffdf8)으로 통합 —
   카드 톤 어떤 색이든 버튼이 또렷한 독립 UI로 보임.

   유지: border-color (1=초록/2=파랑/3=코랄), 번호 원 색, 화살표, 그림자,
   크기, 위치 — viewer.css에 정의된 값 그대로 (덮어쓰기 X). 버튼 정체성 유지.

   selector specificity (0,0,4,0) > viewer.css (0,0,2,0) — 모든 색계열·
   data-pb-color에 우선 적용. data-pb-color 분기 selector 없앰 — 공통 1개.

   적용 범위:
   · 분할형 일반 (.pb-text > .pb-text__actions)
   · 분할형 엔딩 (.pb-text--ending > .pb-text__actions)
   · 그림 중심형 (.pb-text--bottom-only > .pb-text__actions)
   selector 한정 X — .pb-text__actions 어디든 매칭. */
.scene-screen--pb .pb-frame[class*="pb-tone-color--"] .pb-text__actions
  .choice-v03--picturebook {
  background-color: #fffdf8;
}

/* ════════════════════════════════════════════════════════════
   8-A) 그림 중심형(imageCenter) 톤 적용 — v138-fix14 (v135-4)
   ────────────────────────────────────────────────────────────
   분할형(.pb--split)에는 7) 섹션에서 .pb-text에 카드 효과 적용. 그림 중심형
   (.pb--imagecenter)은 본문이 .pb-stage__body-overlay 글상자에 담겨있어
   다른 처리. 사용자 명세 — 그림이 주인공이라 외곽 강도 약화 (분할형 대비 30%).

   적용 정책:
   1) .pb-frame 외곽 공기감 강도 약화 — background mix 30% / 비네팅 opacity 0.3
   2) 본문 글상자(.pb-stage__body-overlay)는 사용자 backdropOpacity 보존 —
      background 자체는 안 건드림. 테두리·그림자만 톤 색 적용 (선택)
   3) 행동버튼 보호 — 분할형과 동일 (.choice-v03--picturebook 자체에 정의된
      배경/테두리/번호 원이 톤 영향 안 받음)
   4) 학생 그림(.pb-illust__photo) — 가드레일 그대로 (filter:none !important)
   ════════════════════════════════════════════════════════════ */

/* .pb-frame 외곽 — frame 배경은 톤 color 살리되 명도는 페이지 외곽과 mix 30%.
   분할형 대비 약 30% 강도. 사용자 명세 "그림 주변 프레임은 약하게만 톤 반영". */
.scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"] {
  background: color-mix(in oklch, var(--pbt-frame-bg) 35%, #f4ecd8);
}
/* 비네팅 강도 30% — 그림 위로 그림자 안 깔리게.
   :after의 mask가 radial 55%부터라 그림 영역엔 안 비치지만 안전망. */
.scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]::after {
  opacity: 0.3;
}

/* v138-fix16 (v135-6 마지막 보정): fix14에서 .pb-stage__body-overlay에 넣은
   1px solid var(--pbt-card-border) 규칙 제거. 그림 중심형에서 본문 글상자
   테두리가 어색하게 보임(차분한 파랑인데 다른 색으로 보임 — sketch-note
   테마/다듬기 outline 등 다른 요소와 시각 충돌).

   정책 단순화: 그림 중심형에서 톤 적용은 .pb-frame 외곽만 (위 background
   color-mix + 비네팅 약화). 본문 글상자는 사용자가 backdropOpacity로
   직접 조절 — 톤 영향 X. 사용자 명세 "그림 중심형은 분할형보다 약하게"
   부합. 분할형 본문 카드(.pb-text) 톤 적용은 그대로 유지. */
/* (.pb-stage__body-overlay에는 톤 적용 X — viewer.css 그대로) */

/* 학생 그림 보호 — 분할형 가드레일 강화. imageCenter에서 그림이 핵심. */
.scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]
  .pb-illust__photo,
.scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]
  .pb-illust__photo img,
.scene-screen--pb.pb--imagecenter .pb-frame[class*="pb-tone-color--"]
  .pb-illust__inner {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════
   9) 다듬기 패널 UI — 톤 선택 버튼 그룹 (v138)
      기존 .edit-submode-block 패턴 따라 시각 통일.
   ════════════════════════════════════════════════════════════ */
.edit-submode-block--pb-tone {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(80, 50, 20, 0.18);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 2026-05-27: 본문 카드 톤 펼침 body 내부 묶음 간격.
   옛엔 부모 flex가 아니라 row들이 거의 붙어 보였음.
   .edit-tone-row 세 묶음(스타일/색계열/톤 또는 엔딩 마감톤) 사이를
   12px로 지정 — 촘촘함 해소 + 태블릿 세로 부담 최소. */
.edit-pb-tone-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edit-tone-row {
  display: flex;
  flex-direction: column;
  /* 2026-05-27: head ↔ hint ↔ btn-grid 사이 여백 6 → 8.
     설명문장과 버튼 사이 여백 약간 확보. */
  gap: 8px;
}
.edit-tone-row__head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.edit-tone-row__label {
  /* 2026-05-27: 12.5 → 13 (다른 .edit-label 13px와 통일 — 묶음 제목 명확). */
  font-size: 13px;
  font-weight: 700;
  color: #4a3820;
  letter-spacing: 0.02em;
}
.edit-tone-row__hint {
  font-size: 11px;
  color: #8a7556;
  line-height: 1.55;
}
/* 인스펙터 폭에 따라 자동 줄바꿈 — 좁으면 2~3 columns, 넓으면 한 줄.
   minmax 64px: "은은하게"(4글자) 같은 라벨이 안 잘릴 최소 폭. */
.edit-tone-btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  /* 2026-05-27: 버튼 사이 간격 4 → 6 (한 덩어리처럼 붙어 보이는 거 해소). */
  gap: 6px;
}
/* --5, --3 modifier 폐기 — auto-fit으로 통일.
   기존 셀렉터는 호환 위해 그대로 두되 같은 규칙 적용. */
.edit-tone-btn-grid--5,
.edit-tone-btn-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
}

.edit-tone-btn {
  appearance: none;
  background: #fffaee;
  border: 1px solid rgba(80, 50, 20, 0.20);
  color: #4a3820;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 7px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;     /* 한 칸 안에서는 안 줄바꿈 — 줄바꿈 필요하면 그리드가 wrap */
  min-width: 0;            /* grid 안에서 안전하게 줄어들 수 있게 */
}
.edit-tone-btn:hover:not(.edit-tone-btn--locked) {
  background: #fdf4dd;
  border-color: rgba(198, 111, 74, 0.42);
}
.edit-tone-btn--active {
  background: #c66f4a;
  color: #ffffff;
  border-color: #c66f4a;
}
.edit-tone-btn--locked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* viewer-edit.js의 잠금 클래스 (body.viewer-edit-readonly)와 동조 — 추가 안전망 */
body.viewer-edit-readonly .edit-tone-btn {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}