/* ClawPod — global: design tokens first, then the base layer (reset, primitives, glass, chat grammar, motion).
   Source of truth for every design value: the :root token block below; the root DESIGN.md only explains it (kept in sync by scripts/check-css-tokens.mjs rule K4). Origin: the Claude Design handoff bundle (design.md + its tokens CSS files).
   Rules: periwinkle atmosphere via gradients only · navy ink/CTA · violet accent only
          NO box-shadow anywhere (depth = blur glass + washes) · no pure red
   Load order: global.css → sections.css → responsive.css */
:root{
  /* type */
  --font-sans:'Pretendard Variable',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;

  /* base colors */
  --cp-periwinkle:#5d74e0;
  --cp-navy:#1d2340;
  --cp-violet:#7c5cff;
  --cp-white:#ffffff;
  --cp-ink:#2b3044;
  --cp-mist:#6d7391;
  --cp-slate:#3d4668;
  --cp-sky-light:#8fa3f2;

  /* hairlines & borders */
  --cp-hairline:rgba(43,48,68,.14);
  --cp-hairline-soft:rgba(43,48,68,.12);
  --cp-hairline-strong:rgba(43,48,68,.2);
  --cp-border:rgba(43,48,68,.25);
  --cp-hairline-glass:rgba(255,255,255,.6);

  /* glass alpha scale (white) */
  --cp-glass-0:rgba(255,255,255,0);
  --cp-glass-12:rgba(255,255,255,.12);
  --cp-glass-14:rgba(255,255,255,.14);
  --cp-glass-16:rgba(255,255,255,.16);
  --cp-glass-18:rgba(255,255,255,.18);
  --cp-glass-20:rgba(255,255,255,.2);
  --cp-glass-25:rgba(255,255,255,.25);
  --cp-glass-26:rgba(255,255,255,.26);
  --cp-glass-28:rgba(255,255,255,.28);
  --cp-glass-30:rgba(255,255,255,.3);
  --cp-glass-32:rgba(255,255,255,.32);
  --cp-glass-35:rgba(255,255,255,.35);
  --cp-glass-40:rgba(255,255,255,.4);
  --cp-glass-55:rgba(255,255,255,.55);
  --cp-glass-60:rgba(255,255,255,.6);
  --cp-glass-62:rgba(255,255,255,.62);
  --cp-glass-65:rgba(255,255,255,.65);
  --cp-glass-70:rgba(255,255,255,.7);
  --cp-glass-72:rgba(255,255,255,.72);
  --cp-glass-75:rgba(255,255,255,.75);
  --cp-glass-78:rgba(255,255,255,.78);
  --cp-glass-80:rgba(255,255,255,.8);
  --cp-glass-82:rgba(255,255,255,.82);
  --cp-glass-85:rgba(255,255,255,.85);
  --cp-glass-88:rgba(255,255,255,.88);
  --cp-glass-90:rgba(255,255,255,.9);
  --cp-glass-92:rgba(255,255,255,.92);
  --cp-glass-95:rgba(255,255,255,.95);
  --cp-glass-navy:rgba(29,35,64,.5);
  --cp-glass-tint:rgba(93,116,224,.1);

  /* ink alpha (43,48,68) */
  --cp-ink-a10:rgba(43,48,68,.1);
  --cp-ink-a15:rgba(43,48,68,.15);
  --cp-ink-a18:rgba(43,48,68,.18);
  --cp-ink-a30:rgba(43,48,68,.3);

  /* navy alpha (29,35,64) */
  --cp-navy-a35:rgba(29,35,64,.35);
  --cp-navy-a45:rgba(29,35,64,.45);
  --cp-navy-a55:rgba(29,35,64,.55);
  --cp-navy-a66:rgba(29,35,64,.66);
  --cp-navy-a82:rgba(29,35,64,.82);
  --cp-navy-a88:rgba(29,35,64,.88);

  /* periwinkle alpha (93,116,224) */
  --cp-periwinkle-a14:rgba(93,116,224,.14);
  --cp-periwinkle-a30:rgba(93,116,224,.3);
  --cp-periwinkle-a35:rgba(93,116,224,.35);
  --cp-periwinkle-a40:rgba(93,116,224,.4);
  --cp-periwinkle-a45:rgba(93,116,224,.45);
  --cp-periwinkle-a50:rgba(93,116,224,.5);

  /* section-surface alpha (251,252,255) */
  --cp-section-a18:rgba(251,252,255,.18);
  --cp-section-a20:rgba(251,252,255,.2);
  --cp-section-a25:rgba(251,252,255,.25);
  --cp-section-a30:rgba(251,252,255,.3);

  /* footer-surface alpha (23,28,51) */
  --cp-footer-a92:rgba(23,28,51,.92);

  /* washes */
  --cp-sky-wash:linear-gradient(180deg,#7c8ff0 0%,#5d74e0 55%,#8fa3f2 100%);
  --cp-stage-wash:linear-gradient(180deg,#eef1fd,#e4e9fb);
  --cp-stage-glow:0 0 120px 40px rgba(93,116,224,.14); /* the one allowed glow — not a shadow */

  /* surfaces */
  --surface-page:#ffffff;
  --surface-section:#fbfcff;
  --surface-chip:#eef1fd;
  --surface-tint:#f5f7fd;
  --surface-footer:#171c33;

  /* semantic (cool-leaning; pure red is banned) */
  --cp-success:#2f8f7a;
  --cp-caution:#b08a3e;
  --cp-critical:#b3486b;

  /* aliases */
  --text-body:var(--cp-ink);
  --text-strong:var(--cp-navy);
  --text-muted:var(--cp-mist);
  --text-placeholder:#9aa3c4;      /* chat bar placeholder line */
  --accent:var(--cp-periwinkle);
  --accent-sharp:var(--cp-violet);
  --cta-bg:var(--cp-navy);
  --cta-bg-hover:#262d52;
  --cta-fg:#ffffff;
  --timeline-dot-pending:#c9cfe8;  /* a timeline step that has not happened yet */
  --mask-opaque:#000;              /* the opaque stop of a mask-image gradient — never painted */
  --chat-fade:36px;                /* edge fade on a scrolling chat list with content past that edge (capped at 20% of the list) */

  /* typography scale */
  --type-display-size:68px; --type-display-weight:600; --type-display-track:-.03em; --type-display-line:1.08;
  --type-h2-size:48px; --type-h2-weight:460; --type-h2-track:-.02em; --type-h2-line:1.1;
  --type-lede-size:18px;
  --type-body-size:16px; --type-body-line:1.5;
  --type-chat-size:13px; --type-chat-compact:11.5px;
  --type-label-size:11px; --type-label-track:.24em; --type-label-track-tight:.18em;

  /* spacing & shape */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --section-gap:96px; --section-gap-lg:120px;
  --radius-chip:9px; --radius-bubble:12px; --radius-card:16px; --radius-pill:999px;
  --blur-glass:12px; --blur-glass-soft:10px;

  /* container */
  --container:1200px; --container-mid:1100px; --container-narrow:1000px; --gutter:32px;

  /* motion */
  --ease-out:cubic-bezier(.22,.7,.35,1);
  --dur-fast:200ms; --dur-base:300ms; --dur-slow:450ms;
  /* scroll reveal — avocadoai.org(Gamma) 실측값: 1s easeOutQuint, 셀 스태거 150ms (2026-09-17) */
  --ease-reveal:cubic-bezier(.22,1,.36,1);
  --dur-reveal:1s; --reveal-stagger:150ms;

  /* ---- CP3: the repeated values of the three stylesheets, at their current value.
          A value used once is still a literal; a semantic token above wins when the role matches. ---- */

  /* numeric font-size scale — used where no --type-* role fits */
  --fs-9:9px; --fs-10:10px; --fs-11:11px; --fs-11_5:11.5px; --fs-12:12px; --fs-12_5:12.5px;
  --fs-13:13px; --fs-13_5:13.5px; --fs-14:14px; --fs-14_5:14.5px; --fs-15:15px; --fs-15_5:15.5px;
  --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-19:19px; --fs-20:20px; --fs-21:21px; --fs-22:22px;
  --fs-24:24px; --fs-26:26px; --fs-27:27px; --fs-30:30px; --fs-34:34px; --fs-38:38px; --fs-44:44px;

  /* font weights */
  --fw-400:400; --fw-500:500; --fw-600:600; --fw-700:700;

  /* line heights */
  --lh-1_15:1.15; --lh-1_2:1.2; --lh-1_4:1.4; --lh-1_5:1.5; --lh-1_6:1.6; --lh-1_65:1.65; --lh-1_7:1.7; --lh-1_9:1.9;

  /* letter spacing — tight-1 is the heading/claim track */
  --ls-tight-1:-.01em;

  /* stacking order inside the stage and the hero */
  --z-1:1; --z-2:2; --z-3:3;

  /* spacing steps outside the 4/8/12/16/24/32 scale above */
  --space-2px:2px; --space-6px:6px; --space-7px:7px; --space-10px:10px; --space-14px:14px; --space-18px:18px;
  --space-20px:20px; --space-22px:22px; --space-28px:28px; --space-36px:36px; --space-40px:40px;
  --space-48px:48px; --space-56px:56px; --space-88px:88px;

  /* composite paddings and gaps, one token per repeated whole value */
  --pad-chip:5px 13px; --pad-chip-sm:3px 10px; --pad-chip-xs:4px 11px; --pad-chip-compact:6px 11px;
  --pad-btn:9px 20px; --pad-btn-md:9px 18px;
  --pad-pill:10px 16px; --pad-pill-sm:7px 14px; --pad-pill-md:8px 14px;
  --pad-input:11px 14px; --pad-panel:10px 12px; --pad-label:4px 12px;
  --pad-row:16px 0; --pad-section:80px 0;
  --gap-inline-tight:6px 10px;

  /* radii outside the chip/bubble/card/pill roles */
  --radius-2px:2px; --radius-10px:10px; --radius-12px:12px;

  /* durations, kept in the exact textual form the stylesheets and app.js use */
  --dur-250ms:.25s; --dur-350ms:.35s; --dur-400ms:.4s; --dur-450ms:.45s; --dur-500ms:.5s;
  --dur-700ms:.7s; --dur-1600ms:1.6s; --dur-2000ms:2s; --dur-2200ms:2.2s;
}

/* ---------- base: reset, primitives, glass, chat grammar, motion ---------- */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--type-body-size);line-height:var(--type-body-line);
  word-break:keep-all;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
h1,h2,h3,p,dl,dd,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:var(--accent-sharp);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent-sharp);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-48px;z-index:100;background:var(--cp-navy);color:var(--cp-white);padding:var(--pad-pill);border-radius:var(--radius-pill);font-weight:var(--fw-600)}
.skip:focus{top:16px;text-decoration:none}

/* ---------- layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.container--mid{max-width:var(--container-mid)}
.container--narrow{max-width:var(--container-narrow)}
.center{text-align:center}
.section{padding:var(--section-gap-lg) 0 110px;position:relative}
.section--white{background:var(--surface-page)}
.section--tint{background:var(--surface-section)}
.section--sky{background:linear-gradient(180deg,var(--surface-section) 0%,var(--surface-chip) 55%,var(--surface-tint) 100%);overflow:hidden}
.section--sky-soft{background:linear-gradient(180deg,var(--surface-section),var(--surface-chip) 60%,var(--surface-tint))}
.section__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
.section__veil{position:absolute;inset:0;background:linear-gradient(180deg,var(--surface-section) 0%,var(--cp-section-a30) 16%,var(--cp-section-a18) 55%,var(--surface-tint) 100%)}
.section > .container{position:relative}

/* ---------- type ---------- */
.h2{
  font-size:var(--type-h2-size);font-weight:var(--type-h2-weight);
  line-height:var(--type-h2-line);letter-spacing:var(--type-h2-track);color:var(--text-strong);
}
.h2--sm{font-size:var(--fs-34);line-height:var(--lh-1_2)}
.h2--md{font-size:var(--fs-44);line-height:var(--lh-1_2)}
.h2--lg{font-size:52px;line-height:var(--lh-1_15)}
.h2--on-dark{color:var(--cp-white)}
.lede{font-size:var(--type-lede-size);color:var(--text-muted);max-width:560px;margin:16px auto 0}
.lede--sm{font-size:var(--fs-16);line-height:var(--lh-1_6);max-width:none;margin:18px 0 0}
.eyebrow,.label{
  font-size:var(--type-label-size);font-weight:var(--fw-600);text-transform:uppercase;
  letter-spacing:var(--type-label-track);color:var(--text-muted);
}
.label{letter-spacing:var(--type-label-track-tight)}
.label--sm{font-size:var(--fs-10);letter-spacing:.16em;margin-top:3px}
.label--accent{color:var(--cp-sky-light);letter-spacing:.14em;margin-top:var(--space-1)}
.label--on-dark{color:var(--cp-glass-70)}
.label--center{display:flex;align-items:center;justify-content:center;gap:var(--space-2);color:var(--cp-slate)}
.footnote{font-size:var(--fs-13);color:var(--text-muted)}
.link-strong{display:inline-block;font-size:var(--fs-15);font-weight:var(--fw-600);color:var(--accent)}
.eyebrow[id],.h2[id]{scroll-margin-top:40px}

/* ---------- glass ---------- */
.glass{border-radius:var(--radius-card);backdrop-filter:blur(var(--blur-glass));-webkit-backdrop-filter:blur(var(--blur-glass))}
.glass--14{background:var(--cp-glass-14);border:1px solid var(--cp-glass-35);color:var(--cp-glass-92)}
.glass--16{background:var(--cp-glass-16);border:1px solid var(--cp-glass-35);color:var(--cp-white)}
.glass--55{background:var(--cp-glass-55);border:1px solid var(--cp-hairline-glass)}
.glass--60{background:var(--cp-glass-60);border:1px solid var(--cp-glass-75)}
.glass--72{background:var(--cp-glass-72);border:1px solid var(--cp-glass-80)}
.glass--tint{background:var(--cp-glass-tint);border:1px solid var(--cp-glass-75)}
.glass--navy{background:var(--cp-glass-navy);border:1px solid var(--cp-glass-25);color:var(--cp-glass-92)}

/* ---------- buttons & CTA ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-pill);font-size:var(--fs-15);font-weight:var(--fw-600);white-space:nowrap;cursor:pointer;
  border:1px solid transparent;text-decoration:none;
}
.btn:hover{text-decoration:none}
/* 언어 전환은 크롤 가능한 <a>(2026-09-17) — <button> 기본값 line-height:normal 을 이어받아 높이 38px 을 그대로 둔다 */
#langToggle{line-height:normal}
.btn--glass{
  padding:var(--pad-btn-md);background:var(--cp-glass-14);border-color:var(--cp-glass-35);color:var(--cp-white);
  backdrop-filter:blur(var(--blur-glass-soft));-webkit-backdrop-filter:blur(var(--blur-glass-soft));
  transition:background var(--dur-fast) var(--ease-out);
}
.btn--glass:hover{background:var(--cp-glass-26)}
.btn--white{padding:10px 24px;background:var(--cp-white);color:var(--cp-navy);transition:background var(--dur-fast) var(--ease-out)}
.btn--white:hover{background:var(--cp-glass-88)}
.btn--accent{padding:var(--pad-btn);background:var(--accent);color:var(--cp-white);font-size:var(--fs-13_5)}
.btn--plain{padding:var(--pad-btn);background:var(--cp-glass-95);color:var(--cp-navy);border-color:var(--cp-ink-a15);font-size:var(--fs-13_5)}

.cta{
  display:inline-flex;align-items:center;gap:var(--space-3);
  background:var(--cta-bg);color:var(--cta-fg);border-radius:var(--radius-pill);
  padding:12px 14px 12px 26px;font-size:var(--fs-17);font-weight:var(--fw-500);text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out);
}
.cta:hover{background:var(--cta-bg-hover);text-decoration:none}
.cta__chip{
  width:36px;height:36px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--cp-violet),var(--cp-periwinkle));
  display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-16);color:var(--cp-white);
}
.cta--light{background:var(--cp-white);color:var(--cp-navy);font-size:var(--fs-16);font-weight:var(--fw-600);padding:13px 15px 13px 26px}
.cta--light:hover{background:var(--cp-glass-90)}
.cta--light .cta__chip{width:34px;height:34px;font-size:var(--fs-15)}

/* ---------- pills / chips ---------- */
.pillbar{display:flex;justify-content:center;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-36px)}
.pillbar button{
  background:none;color:var(--text-muted);border:1px solid var(--cp-hairline-strong);
  border-radius:var(--radius-pill);padding:var(--pad-btn-md);font-size:var(--fs-14);font-weight:var(--fw-500);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.pillbar button:hover{color:var(--cp-slate);border-color:var(--cp-border)}
.pillbar button[aria-selected="true"]{background:var(--cp-navy);color:var(--cp-white);border-color:var(--cp-navy)}

.chips{display:flex;gap:var(--space-6px);flex-wrap:wrap;margin-top:var(--space-3)}
.chips--push{margin-top:auto;padding-top:var(--space-4)}
.chip{
  display:inline-flex;align-items:center;white-space:nowrap;border-radius:var(--radius-pill);
  padding:var(--pad-chip-xs);font-size:var(--fs-12);font-weight:var(--fw-600);
  background:var(--surface-tint);color:var(--cp-slate);border:1px solid var(--cp-hairline);
}
.chip--accent{background:var(--surface-chip);border-color:var(--cp-periwinkle-a30)}
.chip--dashed{background:var(--cp-white);color:var(--text-muted);border:1px dashed var(--cp-ink-a30)}
.chip--outline{background:var(--cp-white);color:var(--cp-navy);border:1px solid var(--cp-periwinkle-a35);padding:var(--pad-chip);font-size:var(--fs-12_5);font-weight:var(--fw-400)}
.chip--outline-soft{background:var(--cp-white);color:var(--cp-navy);border:1px solid var(--cp-hairline);padding:var(--pad-chip);font-size:var(--fs-12_5);font-weight:var(--fw-400)}

/* ---------- chat grammar (agent = avatar+name left · human = navy bubble right) ---------- */
.msg{display:flex;gap:9px;align-items:flex-start;margin-top:var(--space-3)}
.msg--user{flex-direction:row-reverse}
.msg.is-dim{opacity:.6}
.msg.is-compact{opacity:.55}
.msg.is-fresh{animation:cp-card-in var(--dur-slow) var(--ease-out) both}
.avatar{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:var(--fs-10);font-weight:var(--fw-700);background:var(--cp-navy);color:var(--cp-white);
}
.avatar--user{background:var(--cp-white);color:var(--cp-navy);border:1px solid var(--cp-border)}
.avatar--sm{width:18px;height:18px;font-size:8px}
.avatar--lg{width:44px;height:44px;font-size:var(--fs-16)}
.bubble{
  background:var(--cp-glass-90);color:var(--cp-ink);border:1px solid var(--cp-hairline-soft);
  border-radius:4px 14px 14px 14px;padding:10px 14px;line-height:var(--lh-1_5);font-size:var(--type-chat-size);
}
.bubble__sender{font-weight:var(--fw-700);color:var(--cp-navy);margin-bottom:var(--space-2px);font-size:var(--fs-12_5)}
.bubble--user{
  background:var(--cp-navy);color:var(--cp-white);border:none;border-radius:14px 4px 14px 14px;
  width:fit-content;margin-left:auto;max-width:85%;
}
.bubble--nowrap{white-space:nowrap;max-width:none}
.bubble--compact{padding:var(--gap-inline-tight);font-size:var(--type-chat-compact);border-radius:4px 12px 12px 12px}
.bubble--user.bubble--compact{border-radius:12px 4px 12px 12px}
.bubble--compact .bubble__sender{font-size:var(--fs-11)}
.att{
  display:inline-flex;align-items:center;gap:var(--space-6px);white-space:nowrap;
  background:var(--surface-tint);border:1px solid var(--cp-hairline);border-radius:var(--radius-chip);
  padding:var(--pad-chip-compact);font-size:var(--fs-11_5);font-weight:var(--fw-600);color:var(--cp-slate);margin-top:var(--space-6px);
}
.att em{font-style:normal;font-weight:var(--fw-500);color:var(--text-muted)}
.att--est{opacity:.8;border-style:dashed}
.chip--ok{background:var(--surface-chip);color:var(--cp-slate);border:1px solid var(--cp-periwinkle-a35);font-size:var(--fs-11);padding:var(--pad-chip-sm)}
.chip--open{background:var(--cp-white);color:var(--text-muted);border:1px dashed var(--cp-ink-a30);font-size:var(--fs-11);padding:var(--pad-chip-sm)}
.chip--meta{background:var(--surface-tint);color:var(--cp-slate);border:1px solid var(--cp-hairline);font-size:var(--fs-11);padding:var(--pad-chip-sm)}

.dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block}

/* ---------- cards ---------- */
.card{background:var(--cp-white);border:1px solid var(--cp-hairline-soft);border-radius:var(--radius-card);padding:var(--space-6)}
.card--tall{display:flex;flex-direction:column}
.card--emphasis{border:1.5px solid var(--cp-navy-a45)}
.card--outline{border:1.5px solid var(--cp-periwinkle-a40);padding:var(--space-8)}
.card__num{font-size:var(--fs-13);font-weight:var(--fw-700);color:var(--accent)}
.card__title{font-size:var(--fs-18);font-weight:var(--fw-700);color:var(--text-strong);margin-top:var(--space-10px)}
.card__claim{font-size:var(--fs-14_5);font-weight:var(--fw-500);color:var(--cp-slate);line-height:1.45;margin-top:var(--space-6px)}
.card p{font-size:var(--fs-14);line-height:var(--lh-1_6);margin-top:var(--space-3)}
.card__kicker{font-size:var(--fs-14);font-weight:var(--fw-700);color:var(--accent)}
.card__name{font-size:var(--fs-24);font-weight:var(--fw-700);letter-spacing:var(--ls-tight-1);color:var(--text-strong);margin-top:var(--space-10px)}
.card--outline p,.card:not(.card--tall) p{font-size:var(--fs-15);line-height:var(--lh-1_65)}

/* ---------- motion ---------- */
@keyframes cp-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cp-card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cp-pop-in{0%{opacity:0;transform:scale(.82) translateY(10px)}70%{transform:scale(1.03)}100%{opacity:1;transform:none}}
@keyframes cp-agent-in{from{opacity:0;transform:translateY(6px)}to{opacity:.5;transform:none}}
@keyframes cp-scale-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
@keyframes cp-fade-out{from{opacity:1}to{opacity:0}}
@keyframes cp-reveal-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
html{scroll-behavior:smooth}

/* ---------- scroll reveal (1회 재생) ----------
   html.js 가 있을 때만 숨긴다 — JS 가 죽어도 콘텐츠는 보여야 한다.
   avocadoai.org(Gamma) 와 동일: 블록은 지연 없이, 그룹(다단 셀)의 자식은 1번째부터 150ms 씩 — 지연 상한 없음(사용자 결정 2026-09-17).
   공용 cp-fade-up/cp-card-in 은 히어로·채팅·룸 카드도 쓰므로 등장 전용 cp-reveal-up 을 따로 둔다. */
html.js [data-reveal]{opacity:0}
html.js [data-reveal].is-in{animation:cp-reveal-up var(--dur-reveal) var(--ease-reveal) both}
html.js [data-reveal="scale"].is-in{animation-name:cp-scale-in}
html.js [data-reveal-group]>*{opacity:0}
html.js [data-reveal-group].is-in>*{animation:cp-reveal-up var(--dur-reveal) var(--ease-reveal) both;animation-delay:calc((var(--i,0) + 1)*var(--reveal-stagger))}
html.js [data-reveal-group="scale"].is-in>*{animation-name:cp-scale-in}

/* ---------- reduced motion ----------
   이동(translate/scale)만 제거하고 opacity 페이드와 타이밍은 유지한다.
   design.md 의 "즉시 표시"보다 한 단계 부드러운 해석 — 안무 자체가 사라져 보이는 것을 막는다. */
@media(prefers-reduced-motion:reduce){
  @keyframes cp-fade-up{from{opacity:0}to{opacity:1}}
  @keyframes cp-card-in{from{opacity:0}to{opacity:1}}
  @keyframes cp-pop-in{from{opacity:0}to{opacity:1}}
  @keyframes cp-agent-in{from{opacity:0}to{opacity:.5}}
  @keyframes cp-scale-in{from{opacity:0}to{opacity:1}}
  @keyframes cp-reveal-up{from{opacity:0}to{opacity:1}}
  html{scroll-behavior:auto}
}