/* Signature sample styles are loaded only on custom sample detail routes. */

/* 001-mookju-store */
.sample-001 {
  --m-bg: #EDE5D6;
  --m-surface: #F5EFE2;
  --m-surface-2: #E4DAC4;
  --m-ink: #15140F;
  --m-ink-soft: #5A564D;
  --m-meta: #6A655A;
  --m-line: #D6CDB9;
  --m-line-soft: #E0D8C5;
  --m-sage: #5A6B4A;
  --m-sage-soft: #7A8B70;
  --m-sage-strong: #4D5C3F;
  --m-amber: #765522;
  --m-amber-soft: rgba(118,85,34,0.10);
  --m-brick: #8F493A;
}
.dark .sample-001 {
  --m-bg: #1A1814;
  --m-surface: #24211B;
  --m-surface-2: #2D2922;
  --m-ink: #F0E8D0;
  --m-ink-soft: #B8B098;
  --m-meta: #6B6760;
  --m-line: #34302A;
  --m-line-soft: #2D2922;
  --m-sage: #8FA078;
  --m-sage-soft: #7A8B70;
  --m-sage-strong: #A8B89A;
  --m-amber: #D4A86B;
  --m-amber-soft: rgba(212,168,107,0.12);
  --m-brick: #C97968;
}

.sample-001 .stripe {
  background-image: repeating-linear-gradient(135deg,
    rgba(21,20,15,0.04) 0 8px,
    rgba(21,20,15,0) 8px 16px);
}
.dark .sample-001 .stripe {
  background-image: repeating-linear-gradient(135deg,
    rgba(240,232,208,0.05) 0 8px,
    rgba(240,232,208,0) 8px 16px);
}

.sample-001 .alert-corner-label::before {
  content: var(--corner-label);
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--m-bg);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--m-amber);
}

.sample-001 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--m-sage);
  animation: sample-001-dot 2.4s ease-in-out infinite;
}
@keyframes sample-001-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

.sample-001 .hero-line {
  display: block;
  opacity: 0;
  transform: translateY(6px);
}
.sample-001 .hero-line.in {
  animation: sample-001-line-in 0.4s cubic-bezier(0.4,0,0.2,1) forwards;
}
.sample-001 .hero-line.l1.in { animation-delay: 0.05s; }
.sample-001 .hero-line.l2.in { animation-delay: 0.46s; }
@keyframes sample-001-line-in {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .sample-001 .ambient-pulse-dot { animation: none; opacity: 0.7; }
  .sample-001 .hero-line { opacity: 1; transform: none; animation: none; }
  .sample-001 .sample-001-paper-tear-num { animation: none; }
}

/* 001 paper-tear 잔여 카운터 — key 변경 시 새 숫자가 영수증 찢긴 자국처럼
   bottom→top으로 펼쳐지며 등장 + slight gravity drop */
.sample-001 .sample-001-paper-tear-num {
  display: inline-block;
  animation: sample-001-paper-tear-in 280ms cubic-bezier(0.4, 0, 1, 0.4) both;
  transform-origin: top center;
}
@keyframes sample-001-paper-tear-in {
  0% {
    clip-path: inset(0 0 100% 0);
    transform: translateY(-3px);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    opacity: 1;
  }
}


/* 002-chaekbada */
.sample-002 {
  /* Light = warm cream literary */
  --b-bg: #F8F5EC;
  --b-surface: #FDFBF6;
  --b-surface-2: #F2EEE2;
  --b-ink: #1F1A12;
  --b-ink-2: #4A4438;
  --b-meta: #716A5B;
  --b-line: #E0D9C2;
  --b-ocean: #4A6B8A;
  --b-gold: #C9A961;
  --b-leather: #8B7355;
}
.dark .sample-002 {
  /* Dark literary navy */
  --b-bg: #1F2A38;
  --b-surface: #2A3645;
  --b-surface-2: #243140;
  --b-ink: #F0E8D6;
  --b-ink-2: #B8B0A0;
  --b-meta: #7A7468;
  --b-line: #3A4757;
  --b-ocean: #8FB1D2;
  --b-gold: #D9BC75;
  --b-leather: #B5946F;
}

.sample-002 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sample-002 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.sample-002 .tilt-card {
  transition: transform .25s ease-out, box-shadow .25s ease-out;
  box-shadow: 0 6px 16px -10px rgba(15,15,15,0.35);
}
.sample-002 .tilt-card:hover, .sample-002 .tilt-card:focus-visible {
  outline: none;
  z-index: 5;
}
.sample-002 .tilt-card.even:hover, .sample-002 .tilt-card.even:focus-visible {
  transform: rotate(1.6deg) translateY(-3px);
}
.sample-002 .tilt-card:not(.even):hover, .sample-002 .tilt-card:not(.even):focus-visible {
  transform: rotate(-2deg) translateY(-3px);
}

.sample-002 .v-pulse {
  animation: sample-002-pulse 60s ease-in-out infinite;
}
@keyframes sample-002-pulse {
  0%, 100% { opacity: 0.85; letter-spacing: 0.18em; }
  50%      { opacity: 1;    letter-spacing: 0.20em; }
}

.sample-002 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--b-ocean);
  animation: sample-002-dot 2.4s ease-in-out infinite;
}
@keyframes sample-002-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sample-002 .reveal { opacity: 1; transform: none; }
  .sample-002 .tilt-card,
  .sample-002 .tilt-card:hover,
  .sample-002 .tilt-card.even:hover { transform: none; }
  .sample-002 .v-pulse { animation: none; }
  .sample-002 .ambient-pulse-dot { animation: none; opacity: 0.7; }
}


/* 003-jinjugaru */
.sample-003 {
  /* Light = warm kraft mountain */
  --j-bg: #F5EFDD;
  --j-paper: #FBF7E8;
  --j-surface: #EFE8D2;
  --j-ink: #2D2A1E;
  --j-subink: #5A5446;
  --j-meta: #6B6550;
  --j-line: #D8CFB1;
  --j-moss: #56734C;
  --j-moss-dk: #4A6541;
  --j-khaki: #8B6F4A;
  --j-gold: #76561F;
  --j-brick: #9F4C25;
  --j-herb: #52603B;
}
.dark .sample-003 {
  /* Dark = saturated deep earth (brief intent) */
  --j-bg: #2E3A2A;
  --j-paper: #3A4A35;
  --j-surface: #4A5C42;
  --j-ink: #F0E8D0;
  --j-subink: #C8C0A8;
  --j-meta: #968E76;
  --j-line: #57684D;
  --j-moss: #94B086;
  --j-moss-dk: #B0CFA0;
  --j-khaki: #B5946F;
  --j-gold: #D4B273;
  --j-brick: #E08960;
  --j-herb: #B8C49A;
}

.sample-003 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sample-003 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.sample-003 .stripe {
  background-image: repeating-linear-gradient(45deg,
    rgba(45,42,30,0.04) 0 2px,
    transparent 2px 10px);
}
.dark .sample-003 .stripe {
  background-image: repeating-linear-gradient(45deg,
    rgba(240,232,208,0.06) 0 2px,
    transparent 2px 10px);
}

.sample-003 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--j-moss);
  animation: sample-003-dot 2.4s ease-in-out infinite;
}
@keyframes sample-003-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* 003 dust drift — 약초 카드 hover 시 8개 작은 입자가 위로 흩어져 떠오름 */
.sample-003 .sample-003-dust {
  position: absolute;
  bottom: 8%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--j-khaki) 70%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate(0, 0);
  will-change: transform, opacity;
}
.sample-003 .group:hover .sample-003-dust,
.sample-003 .group:focus-visible .sample-003-dust {
  animation: sample-003-dust-drift 1.4s ease-out var(--sample-003-dust-delay, 0s);
}
@keyframes sample-003-dust-drift {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.7); }
  18%  { opacity: 0.95; transform: translate(0, -2px) scale(1); }
  100% { opacity: 0; transform: translate(var(--sample-003-dust-x, 0), -22px) scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .sample-003 .reveal { opacity: 1; transform: none; }
  .sample-003 .ambient-pulse-dot { animation: none; opacity: 0.7; }
  .sample-003 .group:hover .sample-003-dust,
  .sample-003 .group:focus-visible .sample-003-dust { animation: none; opacity: 0; }
}


/* 004-hanjang-wonjang */
.sample-004 {
  /* Light = cool clinical B2B */
  --h-bg: #F8FAFC;
  --h-surface: #FFFFFF;
  --h-surface-2: #F1F5F9;
  --h-ink: #0F172A;
  --h-ink-2: #475569;
  --h-meta: #57606C;
  --h-line: #E2E8F0;
  --h-line-soft: #EDF2F7;
  --h-blue: #1D55D1;
  --h-blue-dk: #1D4ED8;
  --h-slate: #1E293B;
  --h-warn: #DC2626;
  --h-amber: #985600;
}
.dark .sample-004 {
  --h-bg: #0B1220;
  --h-surface: #131C2D;
  --h-surface-2: #1B2640;
  --h-ink: #F1F5F9;
  --h-ink-2: #B6C2D6;
  --h-meta: #64748B;
  --h-line: #1E293B;
  --h-line-soft: #1B2640;
  --h-blue: #60A5FA;
  --h-blue-dk: #3B82F6;
  --h-slate: #94A3B8;
  --h-warn: #F87171;
  --h-amber: #FBBF24;
}

.sample-004 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sample-004 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.sample-004 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--h-blue);
  animation: sample-004-dot 2.4s ease-in-out infinite;
}
@keyframes sample-004-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sample-004 .reveal { opacity: 1; transform: none; }
  .sample-004 .ambient-pulse-dot { animation: none; opacity: 0.7; }
}


/* 006-saebyeogssum */
.sample-006 {
  /* Light = pre-dawn cool sand (alt) */
  --b-bg: #EFE9DA;
  --b-paper: #F6F1E2;
  --b-surface: #E5DDC9;
  --b-ink: #1A2030;
  --b-ink-2: #4F5A6B;
  --b-meta: #6B6A5E;
  --b-line: #D2C9B3;
  --b-dawn: #466478;
  --b-dawn-strong: #466478;
  --b-slate: #6B7A8C;
  --b-gold: #765522;
}
.dark .sample-006 {
  /* Dark = deep midnight (D scope v5 default) */
  --b-bg: #1A2030;
  --b-paper: #242B3A;
  --b-surface: #2C3343;
  --b-ink: #E8EEF5;
  --b-ink-2: #A8B2C0;
  --b-meta: #6B7488;
  --b-line: #323A4D;
  --b-dawn: #7A98B5;
  --b-dawn-strong: #8AA8C5;
  --b-slate: #4A5A6B;
  --b-gold: #C9A961;
}

.sample-006 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sample-006 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.sample-006 .breathe-circle {
  width: 240px;
  height: 240px;
  border-radius: 9999px;
  border: 1.5px solid var(--b-dawn-strong);
  background:
    radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--b-dawn) 18%, transparent), transparent 70%);
  animation: sample-006-breathe 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}
.sample-006 .breathe-glow {
  position: absolute;
  inset: -32px;
  border-radius: 9999px;
  background:
    radial-gradient(circle, color-mix(in oklab, var(--b-dawn) 12%, transparent), transparent 60%);
  animation: sample-006-breathe-glow 10s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes sample-006-breathe {
  0%   { transform: scale(1);     opacity: 0.7; }
  40%  { transform: scale(1.15);  opacity: 1;   }
  50%  { transform: scale(1.15);  opacity: 1;   }
  90%  { transform: scale(1);     opacity: 0.7; }
  100% { transform: scale(1);     opacity: 0.7; }
}
@keyframes sample-006-breathe-glow {
  0%, 100% { opacity: 0.4; }
  45%, 55% { opacity: 0.9; }
}

.sample-006 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--b-dawn);
  animation: sample-006-dot 3.4s ease-in-out infinite;
}
@keyframes sample-006-dot {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sample-006 .reveal { opacity: 1; transform: none; }
  .sample-006 .ambient-pulse-dot { animation: none; opacity: 0.7; }
  /* breathe circle intentionally preserved per brief — core UX */
}


/* 008-harusong-i */
.sample-008 {
  /* Light = aluminum cream workshop */
  --i-bg: #F0EEEA;
  --i-paper: #E8E5DF;
  --i-surface: #DAD7D0;
  --i-ink: #1F242C;
  --i-ink-2: #4A5666;
  --i-meta: #606774;
  --i-line: #C5C2BA;
  --i-steel: #5C6B7A;
  --i-steel-strong: #44515E;
  --i-amber: #765522;
  --i-red: #E84545;
  --i-wood: #6B5C42;
}
.dark .sample-008 {
  --i-bg: #1F242C;
  --i-paper: #2A2F38;
  --i-surface: #343A45;
  --i-ink: #E8E8E2;
  --i-ink-2: #A8B2C0;
  --i-meta: #6B7488;
  --i-line: #3E4451;
  --i-steel: #A8B2C0;
  --i-steel-strong: #C5CCD9;
  --i-amber: #D4A86B;
  --i-red: #FF6464;
  --i-wood: #8E7C5F;
}

.sample-008 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sample-008 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.sample-008 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--i-steel);
  animation: sample-008-dot 3s ease-in-out infinite;
}
@keyframes sample-008-dot {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

.sample-008 .draw-stroke path,
.sample-008 .draw-stroke line,
.sample-008 .draw-stroke circle,
.sample-008 .draw-stroke rect {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  animation: sample-008-draw 3s cubic-bezier(.4,0,.2,1) forwards;
}
/* dimension annotation 그룹은 stroke-draw 제외 (자체 fade-in 사용) */
.sample-008 .draw-stroke .sample-008-dim line,
.sample-008 .draw-stroke .sample-008-dim circle {
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  animation: none;
}
@keyframes sample-008-draw {
  to { stroke-dashoffset: 0; }
}

/* 008 dimension blueprint — stroke draw 후 dimension 라벨이 subtle stagger fade-in.
   히어로 사진과 클래시 방지: 최종 opacity 0.42로 약화, 기술 액센트 정도 */
.sample-008 .sample-008-dim { opacity: 0; }
.sample-008 [data-reveal="in"] .sample-008-dim {
  animation: sample-008-dim-fade 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) var(--sample-008-dim-delay, 0s) forwards;
}
@keyframes sample-008-dim-fade {
  0%   { opacity: 0; transform: translateX(-3px); }
  100% { opacity: 0.42; transform: translateX(0); }
}

.sample-008 .spec-row { transition: background 150ms ease-out, box-shadow 150ms ease-out; }
.sample-008 .spec-row:hover, .sample-008 .spec-row:focus-visible {
  background: color-mix(in oklab, var(--i-steel) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--i-steel);
}

@media (prefers-reduced-motion: reduce) {
  .sample-008 .reveal { opacity: 1; transform: none; }
  .sample-008 .ambient-pulse-dot { animation: none; opacity: 0.7; }
  .sample-008 .draw-stroke path,
  .sample-008 .draw-stroke line,
  .sample-008 .draw-stroke circle,
  .sample-008 .draw-stroke rect {
    animation: none;
    stroke-dashoffset: 0;
  }
  .sample-008 .spec-row:hover, .sample-008 .spec-row:focus-visible {
    background: transparent;
    box-shadow: inset 2px 0 0 var(--i-steel);
  }
}


/* 009-badanaml */
.sample-009 {
  /* Light = cool sea bone */
  --o-bg: #DCE8E5;
  --o-paper: #ECF1EE;
  --o-surface: #C8DAD5;
  --o-ink: #15201E;
  --o-ink-2: #4A5C58;
  --o-meta: #5B6A67;
  --o-line: #B6C9C3;
  --o-teal: #1F4A45;
  --o-teal-strong: #0E2E2A;
  --o-sand: #C9A961;
  --o-brick: #B85A3C;
}
.dark .sample-009 {
  --o-bg: #0F1A19;
  --o-paper: #16252323;
  --o-paper: #18272524;
  --o-paper: #16221F;
  --o-surface: #1F312D;
  --o-ink: #E4ECEA;
  --o-ink-2: #B5C6C2;
  --o-meta: #7C9591;
  --o-line: #2A3B38;
  --o-teal: #6BA89F;
  --o-teal-strong: #8DC4BB;
  --o-sand: #D7B976;
  --o-brick: #D87A5C;
}

.sample-009 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sample-009 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.sample-009 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--o-teal);
  animation: sample-009-dot 3.2s ease-in-out infinite;
}
@keyframes sample-009-dot {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

.sample-009 .sun-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 30%,
    color-mix(in oklab, var(--o-sand) 24%, transparent) 50%,
    transparent 70%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: sample-009-sun 14s linear infinite;
  mix-blend-mode: lighten;
}
@keyframes sample-009-sun {
  0%   { background-position: -10% 50%; }
  100% { background-position: 110% 50%; }
}

.sample-009 .entry-card {
  transition: transform 250ms ease-out, box-shadow 250ms ease-out, border-color 200ms ease;
}
.sample-009 .entry-card:hover, .sample-009 .entry-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 20px 32px -28px rgba(15, 30, 28, 0.45);
  border-color: var(--o-teal);
}

/* 009 underwater sway — strip card images 미세하게 organic sway */
.sample-009 .sample-009-sway {
  animation: sample-009-underwater-sway 8s ease-in-out infinite;
  animation-delay: var(--sample-009-sway-delay, 0s);
  transform-origin: 50% 80%;
  will-change: transform;
}
@keyframes sample-009-underwater-sway {
  0%   { transform: translate(0, 0) rotate(0deg); }
  18%  { transform: translate(1.6px, -0.6px) rotate(0.4deg); }
  35%  { transform: translate(-1.2px, 0.8px) rotate(-0.35deg); }
  52%  { transform: translate(-1.8px, -0.4px) rotate(-0.5deg); }
  68%  { transform: translate(0.8px, 0.6px) rotate(0.25deg); }
  84%  { transform: translate(1.4px, -0.3px) rotate(0.4deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sample-009 .reveal { opacity: 1; transform: none; }
  .sample-009 .ambient-pulse-dot { animation: none; opacity: 0.7; }
  .sample-009 .sun-sweep { animation: none; background-position: 50% 50%; opacity: 0.5; }
  .sample-009 .entry-card:hover, .sample-009 .entry-card:focus-visible {
    transform: none; box-shadow: none;
  }
  .sample-009 .sample-009-sway { animation: none; }
}


/* 010-dasiitda */
.sample-010 {
  --d-bg: #F8F2E8;
  --d-paper: #F0E8DA;
  --d-surface: #E8DFCC;
  --d-ink: #1F1A12;
  --d-ink-2: #5C5446;
  --d-meta: #6D6759;
  --d-line: #D8CDB6;
  --d-brick: #8F493A;
  --d-brick-strong: #8B4536;
  --d-textile: #6B5C42;
  --d-deep-brick: #4A2E2A;
}
.dark .sample-010 {
  --d-bg: #1A1611;
  --d-paper: #221D16;
  --d-surface: #2A241B;
  --d-ink: #F2EBDA;
  --d-ink-2: #C9BEA8;
  --d-meta: #918875;
  --d-line: #3E3527;
  --d-brick: #C97560;
  --d-brick-strong: #E08D77;
  --d-textile: #97825F;
  --d-deep-brick: #C9685A;
}

.sample-010 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.sample-010 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.sample-010 .ambient-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--d-brick);
  animation: sample-010-dot 3.4s ease-in-out infinite;
}
@keyframes sample-010-dot {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

.sample-010 .textile-bg {
  background-color: var(--d-bg);
  background-image:
    repeating-linear-gradient(45deg, color-mix(in oklab, var(--d-textile) 6%, transparent) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--d-textile) 4%, transparent) 0 1px, transparent 1px 12px);
}

.sample-010 .campaign-card { transition: transform 200ms ease-out, box-shadow 200ms ease-out, border-color 200ms ease; }
.sample-010 .campaign-card:hover, .sample-010 .campaign-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 28px -22px rgba(74, 46, 42, 0.4);
  border-color: var(--d-brick);
}

/* 010 stitch draw — 카드 외곽선이 한땀씩 그려지다가 점선으로 변환
   draw phase 0-60% — solid line, dashoffset 80→0
   stitch phase 60-100% — dasharray 80 0 → 2 1.5 (solid → dashed) */
.sample-010 .sample-010-stitch-svg { color: var(--d-brick); overflow: visible; }
.sample-010 .sample-010-stitch-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 80 0;
  stroke-dashoffset: 80;
  opacity: 0.9;
}
.sample-010 [data-reveal="in"] .sample-010-stitch-path {
  animation: sample-010-stitch-draw 1.6s linear var(--sample-010-stitch-delay, 0s) forwards;
}
@keyframes sample-010-stitch-draw {
  0%   { stroke-dasharray: 80 0; stroke-dashoffset: 80; }
  60%  { stroke-dasharray: 80 0; stroke-dashoffset: 0; }
  100% { stroke-dasharray: 2 1.4; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sample-010 .reveal { opacity: 1; transform: none; }
  .sample-010 .ambient-pulse-dot { animation: none; opacity: 0.7; }
  .sample-010 .campaign-card:hover, .sample-010 .campaign-card:focus-visible {
    transform: none; box-shadow: none;
  }
  .sample-010 [data-reveal="in"] .sample-010-stitch-path {
    animation: none;
    stroke-dasharray: 2 1.4;
    stroke-dashoffset: 0;
  }
}


/* ========================================================================
   S-Motion per-signature motion CSS
   moved here from per-page <style dangerouslySetInnerHTML> to bypass CSP
   nonce restrictions (inline <style> without nonce is blocked in production).
   ======================================================================== */

/* 002-chaekbada: book spine slide */
.sample-002 .sample-002-book-spine {
  isolation: isolate;
  transition:
    box-shadow 480ms cubic-bezier(0.34, 1.2, 0.64, 1),
    transform 480ms cubic-bezier(0.34, 1.2, 0.64, 1);
}
.sample-002 .sample-002-book-spine::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(22px, 12%, 36px);
  border-right: 1.5px solid color-mix(in oklab, var(--b-leather) 88%, transparent);
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--b-leather) 78%, transparent), color-mix(in oklab, var(--b-leather) 32%, transparent) 70%, transparent 100%),
    linear-gradient(180deg, transparent 10%, color-mix(in oklab, var(--b-gold) 78%, transparent) 10% 14%, transparent 14% 78%, color-mix(in oklab, var(--b-gold) 64%, transparent) 78% 82%, transparent 82%);
  opacity: 0.86;
  pointer-events: none;
  transform: translateX(0) scaleX(0.62);
  transform-origin: left center;
  box-shadow: 2px 0 8px color-mix(in oklab, var(--b-leather) 14%, transparent);
  transition:
    box-shadow 480ms cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 480ms cubic-bezier(0.34, 1.2, 0.64, 1),
    transform 480ms cubic-bezier(0.34, 1.2, 0.64, 1);
  z-index: 2;
}
.sample-002 .sample-002-book-spine:hover::before,
.sample-002 .sample-002-book-spine:focus-visible::before {
  box-shadow: 8px 0 22px color-mix(in oklab, var(--b-leather) 32%, transparent);
  opacity: 1;
  transform: translateX(14px) scaleX(1.55);
}
/* surface-card variant (BookSection 하단): spine 숨기고 hover 시에만 살짝 노출 */
.sample-002 .surface-card.sample-002-book-spine::before {
  opacity: 0;
  transform: translateX(-100%) scaleX(0.4);
  width: clamp(14px, 7%, 22px);
  box-shadow: none;
}
.sample-002 .surface-card.sample-002-book-spine:hover::before,
.sample-002 .surface-card.sample-002-book-spine:focus-visible::before {
  opacity: 0.92;
  transform: translateX(0) scaleX(1.15);
  box-shadow: 4px 0 14px color-mix(in oklab, var(--b-leather) 22%, transparent);
}
.sample-002 .surface-card.sample-002-book-spine:hover,
.sample-002 .surface-card.sample-002-book-spine:focus-visible {
  box-shadow: 0 22px 48px -30px color-mix(in oklab, var(--b-ink) 42%, transparent);
  transform: translateY(-2px) rotate(-0.55deg);
}
.sample-002 .sample-002-book-spine-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--b-ocean);
  animation: sample-002-book-spine-dot 2.4s ease-in-out infinite;
}
@keyframes sample-002-book-spine-dot {
  0%, 100% { opacity: 0.32; transform: translateX(-1px) scale(0.82); }
  50% { opacity: 1; transform: translateX(1px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sample-002 .sample-002-book-spine::before {
    opacity: 0.58;
    transform: translateX(0);
    transition: none;
  }
  .sample-002 .sample-002-book-spine { transition: none; }
  .sample-002 .sample-002-book-spine-dot { animation: none; opacity: 0.7; }
}

/* 004-hanjang-wonjang: row-check sequence */
.sample-004 .sample-004-mockup { color: var(--h-ink); }
.sample-004 .sample-004-mockup-row {
  background: transparent;
  transform: translateX(0);
  transition:
    background 300ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sample-004 .sample-004-mockup-row[data-checked="true"] {
  background: color-mix(in oklab, var(--h-blue) 8%, transparent);
  transform: translateX(2px);
}
.sample-004 .sample-004-mockup-check {
  display: inline-grid;
  height: 16px;
  width: 16px;
  place-items: center;
  border: 1.5px solid var(--h-meta);
  border-radius: 4px;
  background: transparent;
  color: transparent;
  transform: scale(0.7);
  transition:
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
    background 300ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 300ms cubic-bezier(0.4, 0, 0.2, 1),
    color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sample-004 .sample-004-mockup-row[data-checked="true"] .sample-004-mockup-check {
  border-color: var(--h-blue);
  background: var(--h-blue);
  color: white;
  transform: scale(1);
}
.sample-004 .sample-004-mockup-sms {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sample-004 .sample-004-mockup-sms[data-active="true"] {
  opacity: 1;
  transform: translateX(0);
}
.sample-004 .sample-004-mockup[data-paused="true"] .sample-004-mockup-status { color: var(--h-blue); }
@media (prefers-reduced-motion: reduce) {
  .sample-004 .sample-004-mockup-row,
  .sample-004 .sample-004-mockup-check,
  .sample-004 .sample-004-mockup-sms { transition: none; }
  .sample-004 .sample-004-mockup-row {
    background: color-mix(in oklab, var(--h-blue) 8%, transparent);
    transform: none;
  }
  .sample-004 .sample-004-mockup-check {
    border-color: var(--h-blue);
    background: var(--h-blue);
    color: white;
    transform: scale(1);
  }
  .sample-004 .sample-004-mockup-sms { opacity: 1; transform: none; }
}

/* 006-saebyeogssum: 4-phase respiratory breath */
.sample-006 .sample-006-breath-shell { isolation: isolate; }
.sample-006 .sample-006-breath-glow {
  position: absolute;
  inset: -42px;
  border-radius: 9999px;
  background:
    radial-gradient(circle, color-mix(in oklab, var(--b-dawn) 26%, transparent), transparent 64%);
  animation: sample-006-respiratory-glow 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
  z-index: 0;
}
.sample-006 .sample-006-breath-circle {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2.5px solid var(--b-dawn);
  background:
    radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--b-dawn) 32%, transparent), color-mix(in oklab, var(--b-dawn) 8%, transparent) 60%, transparent 78%);
  animation: sample-006-respiratory-cycle 16s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  box-shadow:
    inset 0 0 48px color-mix(in oklab, var(--b-dawn) 22%, transparent),
    0 0 28px color-mix(in oklab, var(--b-dawn) 18%, transparent);
  will-change: transform, opacity;
  z-index: 1;
}
.sample-006 .sample-006-breath-label {
  display: grid;
  min-height: 1em;
  min-width: 4.5em;
  place-items: center;
}
.sample-006 .sample-006-breath-label-phase {
  grid-area: 1 / 1;
  opacity: 0;
  animation: sample-006-respiratory-label-phase 16s steps(1, end) infinite;
  animation-delay: var(--sample-006-phase-delay, 0s);
}
.sample-006 .sample-006-dawn-breath-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--b-dawn);
  animation: sample-006-dawn-breath-dot 3.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* 4-phase 호흡 16s cycle (들숨 4s 점진 → 멈춤 4s held → 날숨 4s 점진 → 멈춤 4s held)
   page.tsx의 phase-delay (phaseIndex * 4s)와 동기화 */
@keyframes sample-006-respiratory-cycle {
  0%   { transform: scale(0.92); opacity: 0.7; }
  25%  { transform: scale(1.18); opacity: 1; }
  50%  { transform: scale(1.18); opacity: 1; }
  75%  { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(0.92); opacity: 0.7; }
}
@keyframes sample-006-respiratory-glow {
  0%   { opacity: 0.32; transform: scale(0.92); }
  25%  { opacity: 0.92; transform: scale(1.12); }
  50%  { opacity: 0.92; transform: scale(1.12); }
  75%  { opacity: 0.32; transform: scale(0.92); }
  100% { opacity: 0.32; transform: scale(0.92); }
}
@keyframes sample-006-respiratory-label-phase {
  0%, 24.99% { opacity: 1; }
  25%, 100% { opacity: 0; }
}
@keyframes sample-006-dawn-breath-dot {
  0%, 100% { opacity: 0.35; transform: scale(0.88); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .sample-006 .sample-006-breath-glow,
  .sample-006 .sample-006-breath-circle,
  .sample-006 .sample-006-breath-label-phase,
  .sample-006 .sample-006-dawn-breath-dot { animation: none; }
  .sample-006 .sample-006-breath-circle { opacity: 0.86; transform: none; }
  .sample-006 .sample-006-dawn-breath-dot { opacity: 0.7; }
  .sample-006 .sample-006-breath-label-phase:first-of-type { opacity: 1; }
}

/* Shared landing-v2 sample scaffold: imported only by samples/layout.tsx. */
.landing-v2 .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.landing-v2 .reveal[data-reveal="in"] { opacity: 1; transform: none; }

.landing-v2 .reveal-x-left  { transform: translateX(-18px); }
.landing-v2 .reveal-x-right { transform: translateX( 18px); }
.landing-v2 .reveal-x-left[data-reveal="in"],
.landing-v2 .reveal-x-right[data-reveal="in"] { transform: none; }

.landing-v2 .draw-line {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, rgba(58,90,140,0.85), rgba(58,90,140,0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1) .25s;
}
.landing-v2 .draw-line[data-reveal="in"] { transform: scaleX(1); }
.dark .landing-v2 .draw-line {
  background: linear-gradient(90deg, rgba(180,200,235,0.85), rgba(180,200,235,0));
}

.landing-v2 .dotline.dotline-draw {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.2,.7,.2,1) .15s;
}
.landing-v2 .reveal[data-reveal="in"] .dotline.dotline-draw { transform: scaleX(1); }

.landing-v2 .parallax-media {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform .12s linear;
  will-change: transform;
}

@keyframes landing-v2-stamp-in {
  0%   { opacity: 0; transform: scale(.62) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1)    rotate(0); }
}
.landing-v2 [data-reveal="in"] .num-plate-stamp {
  animation: landing-v2-stamp-in .9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--reveal-delay, 0ms) + 120ms);
}

.landing-v2 .hero-sweep {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.landing-v2 .hero-sweep::after {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(58,90,140,0.16) 50%,
    transparent 65%
  );
  transform: translateX(-115%);
  transition: transform 1.8s cubic-bezier(.2,.7,.2,1) .15s;
}
.landing-v2 [data-reveal="in"] > .hero-sweep::after,
.landing-v2 .hero-sweep[data-reveal="in"]::after { transform: translateX(115%); }
.dark .landing-v2 .hero-sweep::after {
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(180,200,235,0.14) 50%,
    transparent 65%
  );
}

.landing-v2 .children-stagger > div > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform .75s cubic-bezier(.2,.7,.2,1),
    border-color .2s ease;
  will-change: opacity, transform;
}
.landing-v2 .children-stagger[data-reveal="in"] > div > * {
  opacity: 1;
  transform: none;
}
.landing-v2 .children-stagger[data-reveal="in"] > div > *:nth-child(1) { transition-delay: 80ms; }
.landing-v2 .children-stagger[data-reveal="in"] > div > *:nth-child(2) { transition-delay: 180ms; }
.landing-v2 .children-stagger[data-reveal="in"] > div > *:nth-child(3) { transition-delay: 280ms; }
.landing-v2 .children-stagger[data-reveal="in"] > div > *:nth-child(4) { transition-delay: 380ms; }
.landing-v2 .children-stagger[data-reveal="in"] > div > *:nth-child(5) { transition-delay: 480ms; }
.landing-v2 .children-stagger[data-reveal="in"] > div > *:nth-child(6) { transition-delay: 580ms; }
.landing-v2 .children-stagger > div > *:hover article {
  transform: translateY(-3px);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}
.landing-v2 .children-stagger > div > * article {
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
}

.landing-v2 .faq-row {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
  opacity: 0;
}
.landing-v2 .faq-row.open { grid-template-rows: 1fr; opacity: 1; }
.landing-v2 .faq-row > .faq-row-inner { overflow: hidden; }

.landing-v2 [data-hero-variant="full-bleed"] section img {
  animation: c10-hero-kenburns 22s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  transform-origin: center 60%;
  will-change: transform;
}
@keyframes c10-hero-kenburns {
  from { transform: scale(1.0) translateY(0); }
  to   { transform: scale(1.07) translateY(-1.5%); }
}

.landing-v2 [data-hero-variant="editorial-card"] article.reveal {
  transform: translateY(28px) scale(0.97);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-v2 [data-hero-variant="editorial-card"] article.reveal[data-reveal="in"] {
  transform: translateY(0) scale(1);
}

.landing-v2 [data-hero-variant="minimal-text"] h1.reveal {
  transform: translateY(22px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}
.landing-v2 [data-hero-variant="minimal-text"] .draw-line {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

.landing-v2 [data-hero-variant="centered-stack"] > div + div.reveal {
  transform: translateY(36px) scale(0.96);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.landing-v2 [data-hero-variant="centered-stack"] > div + div.reveal[data-reveal="in"] {
  transform: translateY(0) scale(1);
}

.landing-v2 [data-services-variant="cards"] article,
.landing-v2 [data-services-variant="masonry"] article {
  transition:
    transform 0.32s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.32s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
.landing-v2 [data-services-variant="cards"] article:hover,
.landing-v2 [data-services-variant="masonry"] article:hover {
  transform: translateY(-3px);
}
.landing-v2 [data-services-variant="list"] li {
  transition: background-color 0.22s ease-out;
}
.landing-v2 [data-services-variant="list"] li:hover {
  background-color: rgb(0 0 0 / 0.025);
}
.landing-v2 [data-services-variant="table"] tbody tr {
  transition: background-color 0.22s ease-out;
}
.landing-v2 [data-services-variant="table"] tbody tr:hover {
  background-color: rgb(0 0 0 / 0.025);
}

@media (prefers-reduced-motion: reduce) {
  .landing-v2 .reveal,
  .landing-v2 .reveal-x-left,
  .landing-v2 .reveal-x-right { opacity: 1; transform: none; }
  .landing-v2 .draw-line,
  .landing-v2 .dotline.dotline-draw { transform: scaleX(1); }
  .landing-v2 .parallax-media { transform: none; }
  .landing-v2 .hero-sweep::after { display: none; }
  .landing-v2 [data-hero-variant="full-bleed"] section img,
  .landing-v2 [data-hero-variant="editorial-card"] article.reveal,
  .landing-v2 [data-hero-variant="centered-stack"] > div + div.reveal {
    animation: none !important;
    transform: none !important;
  }
  .landing-v2 [data-services-variant="cards"] article:hover,
  .landing-v2 [data-services-variant="masonry"] article:hover {
    transform: none;
  }
}

/* 011-haetsalgongin: stamp impact */
.landing-v2 .sample-011-stamp {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  overflow: visible;
  color: #b13428;
  transform: scale(2.4) rotate(8deg);
  transform-origin: center;
  opacity: 0;
  filter: blur(0.5px);
  transition:
    transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 320ms ease-out,
    filter 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}
.dark .landing-v2 .sample-011-stamp { color: #ef6a5e; }
.landing-v2 .sample-011-stamp[data-stamped="true"] {
  transform: scale(1) rotate(-4deg);
  opacity: 1;
  filter: none;
  animation: sample-011-stamp-shake 480ms cubic-bezier(0.34, 1.56, 0.64, 1) 700ms;
}
@keyframes sample-011-stamp-shake {
  0% { transform: scale(1) rotate(-4deg); }
  35% { transform: scale(1.06) rotate(-2deg); }
  60% { transform: scale(0.98) rotate(-5deg); }
  85% { transform: scale(1.01) rotate(-3.6deg); }
  100% { transform: scale(1) rotate(-4deg); }
}
.landing-v2 .sample-011-stamp-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border: 2.5px solid currentColor;
  border-radius: 6px;
  padding: 9px 14px;
  background: color-mix(in oklab, currentColor 8%, transparent);
  font-family: var(--font-geist-mono), var(--font-mono), monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-shadow: 0 0 1px color-mix(in oklab, currentColor 36%, transparent);
}
.landing-v2 .sample-011-stamp-ink {
  position: absolute;
  inset: -12px;
  border-radius: 14px;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, color-mix(in oklab, currentColor 38%, transparent), transparent 56%),
    radial-gradient(circle at 70% 60%, color-mix(in oklab, currentColor 22%, transparent), transparent 64%);
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 520ms ease-out 360ms,
    transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) 360ms;
}
.landing-v2 .sample-011-stamp[data-stamped="true"] .sample-011-stamp-ink {
  opacity: 0.9;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .landing-v2 .sample-011-stamp,
  .landing-v2 .sample-011-stamp-ink { transition: none; animation: none; }
  .landing-v2 .sample-011-stamp {
    transform: scale(1) rotate(-4deg);
    opacity: 1;
    filter: none;
  }
  .landing-v2 .sample-011-stamp-ink { opacity: 0.9; transform: scale(1); }
}


/* ========================================================================
   S4 — UNIVERSAL footer 'TEMPLATE · USAN' label ambient pulse
   12 시그니처 footer marker 한 군데만 universal motion 허용 (audit § Forbidden
   patterns의 단일 예외). 시그니처별 dot은 그대로 두고 외곽 라벨에 subtle
   opacity breathing 추가.
   ======================================================================== */
.landing-v2 .template-marker-pulse {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .landing-v2 .template-marker-pulse { opacity: 1; }
}

/* Text and disabled-step state must retain WCAG contrast. State remains visible
   through borders, fills, and labels instead of reducing an entire text tree. */
.samples-root :is(
  a,
  button,
  dd,
  dt,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  input,
  label,
  legend,
  li,
  p,
  select,
  small,
  span,
  td,
  textarea,
  th
) {
  opacity: 1 !important;
}

.samples-root .s019 .ticker-row,
.samples-root .s021 .ticker-row,
.samples-root .s036 .gate-card--locked,
.samples-root .s036 .gate-card--pending,
.samples-root .s037 .s037-dcard.dim,
.samples-root .s040 .surface-card,
.samples-root .s044 .step-block.inactive,
.samples-root .s053 .mood-card.reveal {
  opacity: 1 !important;
}

.samples-root .s013 p.font-mono,
.samples-root .s024 [style*="opacity: 0."],
.samples-root .s028 [style*="opacity: 0.18"],
.samples-root .s035 [aria-label="산지 구간 목록"] > div,
.samples-root .s035 [style*="opacity: 0.42"],
.samples-root .s035 [style*="opacity: 0.55"],
.samples-root .s041 .opacity-60,
.samples-root .s045 [style*="opacity: 0.45"],
.samples-root .s049 .timeline-nodes > div {
  opacity: 1 !important;
}

.samples-root .s026 [style*="opacity:0.55"],
.samples-root .s028 [style*="opacity:0.18"],
.samples-root .s035 [style*="opacity:0.55"],
.samples-root .s035 [style*="opacity:0.85"],
.samples-root .s038 .s038-pulse-dot,
.samples-root .s045 [style*="opacity:0.45"] {
  opacity: 1 !important;
}

.samples-root .s024 [style*="color:#5A8A6B"],
.samples-root .s024 [style*="color: #5A8A6B"] {
  color: #41634d !important;
}

.samples-root .s024 [style*="color:#8B7E6B"],
.samples-root .s024 [style*="color: #8B7E6B"] {
  color: #62594b !important;
}

.samples-root .s024 [style*="color:#F0F0E2"],
.samples-root .s024 [style*="color: #F0F0E2"] {
  color: #050505 !important;
}

.samples-root .s029 [style*="color:var(--accent-2)"],
.samples-root .s029 [style*="color: var(--accent-2)"] {
  color: #64a7bb !important;
}

.samples-root .s039 [style*="color:var(--accent-violet)"],
.samples-root .s039 [style*="color: var(--accent-violet)"],
.samples-root .s039 .s039-btn-outline,
.samples-root .s039 .s039-chip-violet,
.samples-root .s039 .s039-lvl-v,
.samples-root .s039 .s039-n-head {
  color: #a080ec !important;
}

.samples-root .s039 .s039-btn-violet,
.samples-root .s039 .s039-chip-solid-violet {
  background: #5a2fca !important;
  color: #f7f3ff !important;
}

.samples-root .s044 .cat-exhibit,
.samples-root .s044 .cat-gugak,
.samples-root .s044 .cat-pick.plum-fill {
  color: #151512 !important;
}

.samples-root .s045 [style*="background:#C58432"],
.samples-root .s045 [style*="background: #C58432"],
.samples-root .s045 [style*="color:#BC647A"],
.samples-root .s045 [style*="color: #BC647A"] {
  color: #1f140d !important;
}

.samples-root .s058 .cat-chip.cool,
.samples-root .s059 .s059-btn-primary,
.samples-root .s059 .s059-plan-rec {
  color: #070907 !important;
}

.samples-root .s051 .ledger-paper > div:first-child [style*="color:var(--ink-meta)"],
.samples-root .s051 .ledger-paper > div:first-child [style*="color: var(--ink-meta)"],
.samples-root .s051 .ledger-paper > div:first-child [style*="color:var(--accent-1)"],
.samples-root .s051 .ledger-paper > div:first-child [style*="color: var(--accent-1)"],
.samples-root .s051 .ledger-paper > div:first-child .ledger-grid-6 {
  color: #4e5e78 !important;
}

.samples-root .s051 .ledger-paper-row [style*="color:var(--brass)"],
.samples-root .s051 .ledger-paper-row [style*="color: var(--brass)"],
.samples-root .s051 .row-append [style*="color:var(--brass)"],
.samples-root .s051 .row-append [style*="color: var(--brass)"] {
  color: #746752 !important;
}

.samples-root .s051 [style*="background:var(--accent-1)"],
.samples-root .s051 [style*="background: var(--accent-1)"] {
  color: #131922 !important;
}

.samples-root .s027 .tag.sky {
  color: #ffffff !important;
}

.samples-root .s028 [style*="background:var(--aqua-2)"],
.samples-root .s028 [style*="background: var(--aqua-2)"] {
  color: #f6f7f7 !important;
}

.samples-root .s028 [style*="background:var(--coral)"],
.samples-root .s028 [style*="background: var(--coral)"] {
  color: #ffffff !important;
}

.samples-root .s033 [style*="background:var(--sand)"],
.samples-root .s033 [style*="background: var(--sand)"] {
  color: #fbf6f1 !important;
}

.samples-root .s050 [style*="background:var(--sunhwan-earth-yellow)"],
.samples-root .s050 [style*="background: var(--sunhwan-earth-yellow)"] {
  color: #f2eddd !important;
}

.samples-root .s057 .s057-nav-mid a,
.samples-root .s057 .s057-pct {
  color: #c9baa0 !important;
}

.samples-root .s057 .s057-chip {
  color: #554024 !important;
}

.samples-root .s029 .filter-chip[style*="background:var(--accent-2)"],
.samples-root .s029 .filter-chip[style*="background: var(--accent-2)"] {
  background: #236177 !important;
  color: #f4f8fb !important;
}

.samples-root .s029 .merchant-grid [style*="background:var(--meta)"],
.samples-root .s029 .merchant-grid [style*="background: var(--meta)"] {
  background: #44516a !important;
  color: #f4f8fb !important;
}

.samples-root .s034 .s034-nfc-grid > div:first-child [style*="color:var(--accent-1)"],
.samples-root .s034 .s034-nfc-grid > div:first-child [style*="color: var(--accent-1)"] {
  color: #bb7366 !important;
}

.samples-root .s028 .ink-pulse {
  color: #52605a !important;
  opacity: 1 !important;
}

.samples-root .s032 .amber-submit {
  color: #f7f8fa !important;
}

.samples-root .s035 footer > div:nth-child(2) .container > span:first-child {
  color: #5a492b !important;
}

.samples-root .s037 [style*="background:#e8b343"],
.samples-root .s037 [style*="background: #e8b343"] {
  color: #2c1f08 !important;
}

.samples-root .s045 [style*="color:#C58432"],
.samples-root .s045 [style*="color: #C58432"] {
  color: #704a19 !important;
}

.samples-root .s051 .ledger-paper .ledger-grid-6.mono:first-child {
  color: #53688c !important;
}

.samples-root .s051 .ledger-paper-row [style*="color:var(--ink-meta)"],
.samples-root .s051 .ledger-paper-row [style*="color: var(--ink-meta)"],
.samples-root .s051 #ledger .ledger-paper > .mono:nth-child(3) {
  color: #575e6b !important;
}

/* Bitgyeol renders four palettes at once. Keep each preview's text bound to
   that preview instead of inheriting the currently active phase variables. */
.samples-root .s053 :is(
  .ambient-label,
  .cell-badge,
  .footer-col h5,
  .kicker,
  .layer-badge,
  .tier .rec
) {
  color: #c0bdca !important;
}

.samples-root .s053 :is(
  .case-demo,
  .cell p,
  .chip-opt,
  .consent span,
  .layer-item p,
  .tier .incl,
  .tier .lic,
  .tier .where,
  .tier .price-note
) {
  color: #c6c4cf !important;
  opacity: 1 !important;
}

.samples-root .s053 :is(.cell .ch, .case-meta, .footer-copy, .hint, .seq-timeline) {
  color: #c0bdca !important;
  opacity: 1 !important;
}

.samples-root .s053 .hero-meta {
  color: #8d8e99 !important;
  opacity: 1 !important;
}

.samples-root .s053 a[style*="color:var(--ph-core)"],
.samples-root .s053 a[style*="color: var(--ph-core)"] {
  color: #c0bdca !important;
}

.samples-root .s053 .mood-card:nth-child(1) :is(.mood-scenario, .phase-angle, .phase-haze-d) {
  color: #b9b7c6 !important;
}

.samples-root .s053 .mood-card:nth-child(2) :is(.mood-scenario, .phase-angle, .phase-haze-d, .swatch span) {
  color: #4f4e4a !important;
}

.samples-root .s053 .mood-card:nth-child(3) :is(.mood-scenario, .phase-angle, .phase-haze-d) {
  color: #cfb9a8 !important;
}

.samples-root .s053 .mood-card:nth-child(4) :is(.mood-scenario, .phase-angle, .phase-haze-d) {
  color: #9aa5be !important;
}

.samples-root .s053 #phase-1 :is(.phase-angle, .phase-haze-d) {
  color: #c0becb !important;
}

.samples-root .s053 #phase-2 :is(.phase-angle, .phase-haze-d) {
  color: #53514d !important;
}

.samples-root .s053 #phase-2 .swatch span {
  color: #515057 !important;
}

.samples-root .s053 #phase-3 :is(.phase-angle, .phase-haze-d) {
  color: #d2bcab !important;
}

.samples-root .s053 #phase-4 :is(.phase-angle, .phase-haze-d) {
  color: #8c94a8 !important;
}

.samples-root .s053 .case-card:nth-child(1) .case-phase {
  color: #c0bdca !important;
}

.samples-root .s053 .case-card:nth-child(2) .case-phase,
.samples-root .s053 .case-card:nth-child(4) .case-phase {
  color: #b7b9bf !important;
}

.samples-root .s053 .case-card:nth-child(3) .case-phase {
  color: #dbb09a !important;
}

.samples-root .s053 :is(
  .case-card:nth-child(1) .case-chip,
  .mood-card:nth-child(1) .mood-chip
) {
  color: #f7f3ff !important;
}

.samples-root .s053 :is(
  .case-card:nth-child(3) .case-chip,
  .mood-card:nth-child(3) .mood-chip
) {
  color: #100e0d !important;
}

/* Korean web typography baseline for all signature samples (web-slop-check #2,
   2026-06-03). word-break/overflow-wrap are inherited, so setting them on the
   samples root cascades to every sample's Korean copy and prevents mid-eojeol
   line breaks (the canonical Korean web AI-slop tell). text-wrap:balance is
   scoped to headings only (h1–h3) per MDN guidance — never body/long text. */
.samples-root {
  max-width: 100%;
  overflow-x: hidden;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.samples-root :where(section, main, header, footer, nav, div, article, aside) {
  min-width: 0;
}
.samples-root :where(img, svg, canvas, video) {
  max-width: 100%;
}
.samples-root :is(h1, h2, h3) {
  text-wrap: balance;
}

/* Generated sample themes can contain broad element resets. These explicit
   utility classes keep shared sandbox controls and metadata above WCAG AA. */
.samples-root .sample-sandbox-submit {
  background-color: #9a401a !important;
  color: #ffffff !important;
}
.samples-root .sample-sandbox-submit:hover {
  background-color: #7f3415 !important;
}
.samples-root .sample-accessible-meta {
  color: #5f5a52 !important;
}
.dark .samples-root .sample-accessible-meta {
  color: #cbc6bc !important;
}