/* ============================================================================
 * 김기흥 이사장 · 웰쉐어 사회적협동조합 · ㈜웰쉐어로지스 · 희망나르미 경기지역본부
 * 디지털 스마트 전자명함 v6.0 Mobile-First Signature Portrait Card OS 스타일시트
 * - 공식 인물 프로필 사진 탑재 · 모바일 한 화면 맞춤 네이티브 앱 레이아웃 · 하단 5탭 앱 바
 * - 3대 실물 명함 스킨 (로열 메탈 골드 · 홀로그램 프리즘 · 스위스 화이트) & 한/영 실시간 전환
 * - 김기흥 16년 현장 프로필 총람 · 사협(40.5억)/로지스(163,903포·AI/AX) 기업소개 · 직인 견적서 · OCR 스캔
 * - 이모지 제로(0) · 100% 벡터 라인 아이콘 · 모바일(360~430px) & 데스크톱(1260px) 무결점 반응형
 * ============================================================================ */

:root {
  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif-en: "Cormorant Garamond", Georgia, serif;
  --font-serif-kr: "Gowun Batang", "Batang", Georgia, serif;
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* 기본 브랜드 팔레트: 웰쉐어 사협 (Sovereign Navy & Brushed Champagne Bronze) */
  --hero-bg-1: #061120;
  --hero-bg-2: #0B2240;
  --hero-bg-3: #103258;
  --hero-glow-a: rgba(212, 168, 83, 0.22);
  --hero-glow-b: rgba(30, 88, 158, 0.24);
  --brand-accent: #0B284B;
  --brand-accent-strong: #061A33;
  --brand-accent-soft: rgba(11, 40, 75, 0.08);
  --brand-accent-border: rgba(11, 40, 75, 0.20);
  --brand-gold: #9A7226;
  --brand-gold-soft: rgba(154, 114, 38, 0.13);
  --brand-edge-grad: linear-gradient(180deg, rgba(245, 212, 135, 0.92) 0%, rgba(196, 148, 61, 0.55) 52%, rgba(245, 212, 135, 0.85) 100%);
  --cta-primary-grad: linear-gradient(135deg, #07162B 0%, #0F2D54 100%);
}

html[data-brand="mill"] {
  --hero-bg-1: #231205;
  --hero-bg-2: #582E0C;
  --hero-bg-3: #854D0E;
  --hero-glow-a: rgba(245, 158, 11, 0.30);
  --hero-glow-b: rgba(217, 119, 6, 0.24);
  --brand-accent: #B45309;
  --brand-accent-strong: #92400E;
  --brand-accent-soft: rgba(180, 83, 9, 0.10);
  --brand-accent-border: rgba(180, 83, 9, 0.28);
  --brand-gold: #B45309;
  --brand-edge-grad: linear-gradient(180deg, #D97706 0%, #F59E0B 50%, #78350F 100%);
  --cta-primary-grad: linear-gradient(135deg, #3B1D06 0%, #B45309 100%);
}

html[data-brand="logis"] {
  --hero-bg-1: #050C1D;
  --hero-bg-2: #10204A;
  --hero-bg-3: #17346E;
  --hero-glow-a: rgba(56, 139, 253, 0.24);
  --hero-glow-b: rgba(212, 168, 83, 0.20);
  --brand-accent: #13366E;
  --brand-accent-strong: #0C244D;
  --brand-accent-soft: rgba(19, 54, 110, 0.09);
  --brand-accent-border: rgba(19, 54, 110, 0.22);
  --brand-gold: #9A7226;
  --brand-edge-grad: linear-gradient(180deg, rgba(245, 212, 135, 0.92) 0%, rgba(138, 174, 232, 0.65) 52%, rgba(245, 212, 135, 0.85) 100%);
  --cta-primary-grad: linear-gradient(135deg, #071126 0%, #163870 100%);
}

html[data-brand="narami"] {
  --hero-bg-1: #04241C;
  --hero-bg-2: #084C3A;
  --hero-bg-3: #0F766E;
  --hero-glow-a: rgba(16, 185, 129, 0.32);
  --hero-glow-b: rgba(212, 163, 89, 0.25);
  --brand-accent: #047857;
  --brand-accent-strong: #065F46;
  --brand-accent-soft: rgba(4, 120, 87, 0.10);
  --brand-accent-border: rgba(4, 120, 87, 0.28);
  --brand-gold: #B07D2B;
  --brand-edge-grad: linear-gradient(180deg, #059669 0%, #10B981 52%, #C99A49 100%);
  --cta-primary-grad: linear-gradient(135deg, #052E24 0%, #047857 100%);
}

/* ── 시그니처 라이트 테마 ── */
html,
html[data-theme="signature"] {
  --bg-canvas: #F5F3EE;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-subtle: #F7F5F0;
  --surface-tinted: #FAF8F4;
  --card-paper-bg: linear-gradient(155deg, #FFFFFF 0%, #FDFCFA 56%, #F6F3EC 100%);
  --card-paper-back: linear-gradient(155deg, #FCFBF8 0%, #F3EFE6 100%);
  --ink-primary: #111827;
  --ink-secondary: #374151;
  --ink-muted: #6B7280;
  --hairline: rgba(17, 24, 39, 0.08);
  --hairline-strong: rgba(17, 24, 39, 0.14);
  --card-border: rgba(17, 24, 39, 0.12);
  --shell-bg: rgba(15, 23, 42, 0.16);
  --shell-border: rgba(255, 255, 255, 0.26);
  --tabs-shell-bg: rgba(255, 255, 255, 0.96);
  --tabs-active-bg: var(--ink-primary);
  --tabs-active-fg: #FFFFFF;
  --tabbar-bg: rgba(255, 255, 255, 0.96);
  --tabbar-border: rgba(15, 23, 42, 0.10);
  --dock-glass: rgba(15, 23, 42, 0.92);
  --dock-fg: rgba(255, 255, 255, 0.88);
  --input-bg: #FFFFFF;
  --foil-sheen-color: rgba(245, 212, 135, 0.18);
  --foil-sheen-gold: rgba(196, 148, 61, 0.16);
  --shadow-card: 0 20px 44px -14px rgba(15, 23, 42, 0.26), 0 6px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-surface: 0 10px 28px -12px rgba(15, 23, 42, 0.09), 0 2px 6px rgba(15, 23, 42, 0.03);
}

/* ── 오브시디언 다크 메탈 테마 ── */
html[data-theme="obsidian"] {
  --bg-canvas: #070A10;
  --surface: #111621;
  --surface-elevated: #161C2A;
  --surface-subtle: #1A2233;
  --surface-tinted: #141B29;
  --card-paper-bg: linear-gradient(155deg, #1B2232 0%, #121723 58%, #0C1018 100%);
  --card-paper-back: linear-gradient(155deg, #171D2B 0%, #0E131D 100%);
  --ink-primary: #F8FAFC;
  --ink-secondary: #CBD5E1;
  --ink-muted: #8B98AD;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-strong: rgba(255, 255, 255, 0.17);
  --card-border: rgba(212, 163, 89, 0.30);
  --shell-bg: rgba(255, 255, 255, 0.05);
  --shell-border: rgba(255, 255, 255, 0.13);
  --tabs-shell-bg: rgba(20, 26, 39, 0.95);
  --tabs-active-bg: #F8FAFC;
  --tabs-active-fg: #0F172A;
  --tabbar-bg: rgba(13, 18, 28, 0.96);
  --tabbar-border: rgba(255, 255, 255, 0.11);
  --dock-glass: rgba(17, 22, 34, 0.94);
  --dock-fg: #CBD5E1;
  --input-bg: #0D121B;
  --brand-accent: #38BDF8;
  --brand-accent-strong: #7DD3FC;
  --brand-accent-soft: rgba(56, 189, 248, 0.14);
  --brand-accent-border: rgba(56, 189, 248, 0.32);
  --brand-gold: #D4A85F;
  --brand-gold-soft: rgba(212, 168, 95, 0.16);
  --foil-sheen-color: rgba(56, 189, 248, 0.18);
  --foil-sheen-gold: rgba(212, 168, 95, 0.22);
  --shadow-card: 0 26px 56px -16px rgba(0, 0, 0, 0.78), 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-surface: 0 16px 38px -14px rgba(0, 0, 0, 0.56);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  background: var(--bg-canvas);
}

body {
  margin: 0;
  padding: 0 0 calc(86px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-sans);
  background: var(--bg-canvas);
  color: var(--ink-primary);
  line-height: 1.54;
  letter-spacing: -0.015em;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* ── 상단 브랜드 오라 백드롭 ── */
.hero-aura-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 268px;
  background: linear-gradient(132deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 52%, var(--hero-bg-3) 100%);
  overflow: hidden;
  z-index: 0;
  transition: background 380ms var(--ease-luxury);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
  box-shadow: 0 12px 30px -12px rgba(7, 25, 46, 0.35);
}

.hero-aura-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  pointer-events: none;
}

.hero-aura-glow.glow-a {
  width: 340px;
  height: 340px;
  top: -110px;
  right: -50px;
  background: var(--hero-glow-a);
}

.hero-aura-glow.glow-b {
  width: 280px;
  height: 280px;
  bottom: -120px;
  left: -40px;
  background: var(--hero-glow-b);
}

.hero-aura-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.78), transparent 95%);
}

/* ── 정밀 벡터 아이콘 공통 ── */
.ico-svg,
.ico-svg-sm,
.ico-svg-xs {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.ico-svg { width: 18px; height: 18px; }
.ico-svg-sm { width: 15px; height: 15px; }
.ico-svg-xs { width: 13px; height: 13px; }

.card-brand-light { display: inline-flex; align-items: center; }
.card-brand-dark { display: none; align-items: center; gap: 0.38rem; }
html[data-theme="obsidian"] .card-brand-light { display: none; }
html[data-theme="obsidian"] .card-brand-dark { display: inline-flex; }

.theme-icon-sun { display: none; }
html[data-theme="obsidian"] .theme-icon-moon { display: none; }
html[data-theme="obsidian"] .theme-icon-sun { display: block; }

/* ── 입력 폼 공통 (iOS 자동 줌 방지 16px 필수) ── */
input,
textarea,
select {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--ink-primary);
  background: var(--input-bg);
  border: 1.5px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 0.68rem 0.84rem;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-muted);
  opacity: 0.75;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 3px var(--brand-accent-soft);
}

button,
a,
[role="button"] {
  touch-action: manipulation;
}

button,
[role="button"],
.nav-tab-btn,
.m-tab-item,
.dock-btn {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  font-family: var(--font-sans);
  cursor: pointer;
}

.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--brand-gold);
}

.eyebrow-tag::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.72;
  flex-shrink: 0;
}

.exec-card-face .eyebrow-tag::before {
  display: none;
}

/* ── 슬림 고정 상단 헤더 & 5대 프로필 스트립 ── */
.top-shell {
  position: sticky;
  top: 0;
  z-index: 45;
  background: rgba(7, 23, 44, 0.84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  padding-top: env(safe-area-inset-top, 0px);
}

.top-bar-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0.48rem 0.88rem 0.34rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.brand-home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  text-decoration: none;
  color: #FFFFFF;
  min-width: 0;
  flex-shrink: 0;
}

.brand-lockup-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.ci-logo-petals {
  height: 20px;
  width: auto;
  display: block;
}

.ci-wordmark-hero {
  font-size: 1.02rem;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  font-weight: 400;
}

.ci-wordmark-hero strong {
  font-weight: 800;
}

.brand-divider {
  width: 1px;
  height: 13px;
  background: rgba(255, 255, 255, 0.24);
  flex-shrink: 0;
}

.brand-edition-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.80);
  background: rgba(255, 255, 255, 0.10);
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

.ghost-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.26rem;
  background: rgba(255, 255, 255, 0.11);
  color: #F8FAFC;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.28rem 0.56rem;
  min-height: 31px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 140ms var(--ease-luxury), background-color 180ms ease;
}

.ghost-pill-btn:active {
  transform: scale(0.95);
}

@media (max-width: 520px) {
  .brand-divider,
  .brand-edition-tag,
  .hide-xs {
    display: none;
  }

  .ghost-pill-btn {
    padding: 0.28rem 0.48rem;
  }
}

.profile-strip-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 0.08rem 0.88rem 0.5rem;
}

.profile-strip {
  display: flex;
  gap: 0.36rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.profile-strip::-webkit-scrollbar {
  display: none;
}

.profile-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.3rem 0.76rem;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 160ms var(--ease-luxury), color 160ms var(--ease-luxury), border-color 160ms var(--ease-luxury), transform 120ms var(--ease-luxury);
}

.profile-chip:active {
  transform: scale(0.96);
}

.profile-chip.active {
  background: #FFFFFF;
  color: #0F172A;
  border-color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 5px 14px -4px rgba(0, 0, 0, 0.32);
}

/* ── 모바일 서브탭 열람 전용 미니 프로필 바 (기업소개 · 수의증빙 · 2칸스캔 시 한 화면 즉시 진입) ── */
.mobile-mini-card-bar {
  display: none;
  position: relative;
  z-index: 30;
  max-width: 580px;
  margin: 0.55rem auto 0;
  padding: 0.48rem 0.65rem;
  width: calc(100% - 1.5rem);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  box-shadow: var(--shadow-surface);
}

.mini-bar-identity {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--ink-primary);
}

.mini-bar-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: cover;
  object-position: center 15%;
  border: 1.5px solid var(--brand-gold);
  background: #0B1324;
  flex-shrink: 0;
}

.mini-bar-texts {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mini-bar-texts strong {
  font-size: 0.81rem;
  font-weight: 800;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-bar-texts span {
  font-size: 0.7rem;
  color: var(--ink-muted);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-bar-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  flex-shrink: 0;
}

.mini-bar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.38rem 0.62rem;
  border-radius: 10px;
  font-size: 0.73rem;
  font-weight: 800;
  text-decoration: none;
  background: var(--surface-subtle);
  color: var(--ink-primary);
  border: 1px solid var(--hairline-strong);
  white-space: nowrap;
}

.mini-bar-btn.accent {
  background: var(--brand-accent);
  color: #FFFFFF;
  border-color: var(--brand-accent);
}
html[data-theme="obsidian"] .mini-bar-btn.accent {
  color: #0F172A;
}

@media (max-width: 979px) {
  .desktop-only-tabs,
  .desktop-only-dock {
    display: none !important;
  }
}

/* ── 메인 컨테이너 ── */
.app-container {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 0 auto;
  padding: 0.62rem 0.78rem 1.4rem;
}

/* ── 슬림 가로 스크롤 겸직 직함 스위처 (김기흥 5대 직함) ── */
.role-switcher-strip {
  margin-bottom: 0.5rem;
}

.role-pills-scroll {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0.08rem 0.04rem;
  scroll-snap-type: x proximity;
}

.role-pills-scroll::-webkit-scrollbar {
  display: none;
}

.role-chip-btn {
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.36rem 0.72rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: background-color 150ms var(--ease-luxury), color 150ms var(--ease-luxury), border-color 150ms var(--ease-luxury), transform 120ms var(--ease-luxury);
}

/* 히어로 상단 직함 스트립 안의 칩은 다크 글래스 스타일 */
.role-switcher-strip .role-chip-btn {
  background: rgba(15, 23, 42, 0.44);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.86);
  border-color: rgba(255, 255, 255, 0.22);
  padding: 0.3rem 0.7rem;
  font-size: 0.73rem;
}

.role-switcher-strip .role-chip-btn.active {
  background: linear-gradient(135deg, #F5C451 0%, #D99B26 100%);
  color: #091326;
  border-color: #FDE68A;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(245, 196, 81, 0.34);
}

.role-chip-btn.active {
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
  border-color: var(--brand-accent);
  font-weight: 800;
}

/* ── 인물 프로필 사진 탑재 + 엣지 컬러링 + 3D 홀로그램 실물 명함 ── */
.card-stage-3d {
  perspective: 1400px;
  margin-bottom: 0.65rem;
}

.exec-card-tilt-rig {
  transform: perspective(1400px) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  will-change: transform;
}

.card-bezel-shell {
  background: var(--shell-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--shell-border);
  border-radius: 16px;
  padding: 4px;
}

.exec-card-flipper {
  position: relative;
  width: 100%;
  min-height: 246px;
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease-out);
}

.exec-card-flipper.is-flipped {
  transform: rotateY(180deg);
}

.exec-card-flipper .exec-card-front { pointer-events: auto; }
.exec-card-flipper .exec-card-back { pointer-events: none; }
.exec-card-flipper.is-flipped .exec-card-front { pointer-events: none; }
.exec-card-flipper.is-flipped .exec-card-back { pointer-events: auto; }

.exec-card-face {
  width: 100%;
  min-height: 246px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 19px;
  padding: 0.96rem 0.98rem 0.88rem 1.15rem;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-edge-accent {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2.5px;
  background: var(--brand-edge-grad);
  z-index: 2;
}

.card-guilloche-watermark {
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 170px;
  fill: none;
  stroke: var(--brand-accent);
  stroke-width: 1;
  opacity: 0.085;
  pointer-events: none;
  z-index: 0;
}

.exec-card-foil-sheen {
  position: absolute;
  inset: 0;
  background: radial-gradient(300px circle at var(--gx) var(--gy), var(--foil-sheen-color), var(--foil-sheen-gold) 38%, transparent 70%);
  opacity: var(--sheen-opacity);
  transition: opacity 260ms ease;
  pointer-events: none;
  z-index: 1;
}

.exec-card-front {
  background: var(--card-paper-bg);
}

.exec-card-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: var(--card-paper-back);
}

/* 명함 상단 로고 + 인라인 스킨 선택 + 뒷면 원부 버튼 */
.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  z-index: 2;
}

.card-logo-cluster {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}

.card-ci-img { height: 17px; width: auto; display: block; }
.card-petals-img { height: 18px; width: auto; display: block; }
.card-wslogis-img { height: 19px; width: auto; display: block; flex-shrink: 0; }

.card-wordmark-dark {
  font-size: 0.94rem;
  letter-spacing: -0.02em;
  color: #F8FAFC;
  font-weight: 400;
}
.card-wordmark-dark strong { font-weight: 800; }

.card-logo-hairline {
  width: 1px;
  height: 13px;
  background: var(--hairline-strong);
  flex-shrink: 0;
}

.card-jahwal-img {
  height: 18px;
  width: 18px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.card-top-controls {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.card-skin-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.14rem;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 2px;
}

.skin-dot-btn {
  background: transparent;
  color: var(--ink-muted);
  border: none;
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 160ms var(--ease-luxury), color 160ms var(--ease-luxury), box-shadow 160ms var(--ease-luxury), transform 120ms var(--ease-luxury);
}

.skin-dot-btn.active {
  background: linear-gradient(135deg, #F5C451 0%, #D99B26 100%);
  color: #091326;
  font-weight: 800;
}

@media (max-width: 374px) {
  .card-skin-dots {
    display: none;
  }
}

.flip-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.22rem 0.52rem;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 140ms var(--ease-luxury);
}

.flip-trigger-btn:active {
  transform: scale(0.94);
}

/* 명함 중단: 인물 프로필 사진 + 성함/직함 + 스캔 QR */
.card-identity-block {
  margin: 0.68rem 0 0.64rem;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.68rem;
}

.card-portrait-frame {
  position: relative;
  width: 72px;
  height: 88px;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  flex-shrink: 0;
  background: #080E1C;
  border: 1.8px solid rgba(245, 196, 81, 0.72);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.48);
  transition: transform 160ms var(--ease-luxury);
}

.card-portrait-frame:active {
  transform: scale(0.96);
}

.card-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 14%;
  display: block;
}

.card-portrait-frame.is-emblem-mode {
  background: linear-gradient(145deg, #0D1E3A 0%, #091326 100%);
}

.card-portrait-frame.is-emblem-mode img.is-logo-fit {
  object-fit: contain;
  object-position: center;
  padding: 12px 10px 20px;
  background: #FFFFFF;
}

.portrait-zoom-pill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(7, 13, 25, 0) 0%, rgba(7, 13, 25, 0.88) 70%);
  color: #FDE68A;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.34rem 0.15rem 0.16rem;
}

.card-identity-main {
  min-width: 0;
  flex: 1 1 auto;
}

.card-verified-row {
  display: flex;
  align-items: center;
  gap: 0.34rem;
  margin-bottom: 0.12rem;
  flex-wrap: wrap;
}

.card-serial-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  white-space: nowrap;
  color: var(--brand-gold);
}

.card-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
  border: 1px solid var(--brand-accent-border);
  border-radius: 999px;
  padding: 0.04rem 0.38rem;
  font-size: 0.59rem;
  font-weight: 800;
  line-height: 1.28;
}

.card-verified-pill svg {
  width: 9px;
  height: 9px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-org-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-bottom: 0.08rem;
  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-person-row {
  display: flex;
  align-items: baseline;
  gap: 0.38rem;
  flex-wrap: wrap;
}

.card-person-name {
  font-size: 1.44rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-primary);
  margin: 0;
  line-height: 1.14;
}

.card-person-name.is-long-title {
  font-size: clamp(1.04rem, 3.6vw, 1.28rem);
  letter-spacing: -0.03em;
  word-break: keep-all;
}

.card-person-sub {
  font-family: var(--font-serif-kr);
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 700;
}

.card-role-title {
  font-size: 0.79rem;
  font-weight: 800;
  color: var(--brand-accent);
  margin-top: 0.22rem;
  line-height: 1.32;
  word-break: keep-all;
}

.card-dept-line {
  font-size: 0.68rem;
  color: var(--ink-muted);
  margin-top: 0.1rem;
  line-height: 1.34;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-mini-qr-wrap {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16rem;
}

.card-mini-qr-box {
  width: 58px;
  height: 58px;
  background: #FFFFFF;
  border: 1.5px solid var(--brand-accent-border);
  border-radius: 11px;
  padding: 3.5px;
  box-shadow: 0 6px 14px -5px rgba(15, 23, 42, 0.25);
  cursor: pointer;
  transition: transform 150ms var(--ease-luxury);
}

.card-mini-qr-box:active { transform: scale(0.94); }
.card-mini-qr-box svg { width: 100%; height: 100%; display: block; }

.card-mini-qr-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-accent);
}

/* 명함 하단 연락처 그리드 */
.card-contact-footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hairline);
  padding-top: 0.52rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.22rem 0.55rem;
  font-size: 0.72rem;
  color: var(--ink-secondary);
}

.card-meta-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-weight: 600;
}

.card-meta-item svg { color: var(--brand-accent); }

.card-meta-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-contact-footer .full-span {
  grid-column: 1 / -1;
  color: var(--ink-muted);
  font-size: 0.69rem;
  font-weight: 500;
}

.card-meta-item.copyable-meta {
  cursor: pointer;
  border-radius: 6px;
  padding: 0.08rem 0.18rem;
  margin: -0.08rem -0.18rem;
  transition: background-color 140ms ease;
}

.card-meta-item.copyable-meta:active {
  transform: scale(0.98);
  background: var(--brand-accent-soft);
}

/* 명함 뒷면 */
.back-ledger-heading {
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}
.back-ledger-heading strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--ink-primary);
}

.back-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 0.65rem;
  align-items: center;
  margin: 0.36rem 0;
}

.back-spec-dl {
  margin: 0;
  display: grid;
  gap: 0.2rem;
  font-size: 0.71rem;
}

.back-spec-dl > div {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.3rem;
}

.back-spec-dl dt {
  color: var(--ink-muted);
  font-weight: 700;
}

.back-spec-dl dd {
  margin: 0;
  color: var(--ink-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back-qr-large {
  width: 90px;
  height: 90px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 4px;
  border: 1.5px solid var(--brand-accent-border);
}
.back-qr-large svg { width: 100%; height: 100%; display: block; }

.back-footer-bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--hairline);
  padding-top: 0.42rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.68rem;
  color: var(--ink-muted);
}
.back-footer-bar strong {
  color: var(--brand-accent);
  font-weight: 800;
}

/* ── 원터치 핵심 액션 버튼 2종 ── */
.primary-cta-row {
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 0.48rem;
  margin-bottom: 0.52rem;
}

.btn-save-vcard,
.btn-open-send-hub {
  border-radius: 999px;
  padding: 0.5rem 0.52rem 0.5rem 0.96rem;
  min-height: 44px;
  font-size: 0.83rem;
  font-weight: 800;
  word-break: keep-all;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.38rem;
  transition: transform 140ms var(--ease-luxury), box-shadow 180ms ease;
}

.btn-save-vcard {
  background: var(--cta-primary-grad);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 22px -10px rgba(7, 25, 46, 0.55);
}

html[data-theme="obsidian"] .btn-save-vcard {
  background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
  color: #0F172A;
}

.btn-open-send-hub {
  background: var(--surface);
  color: var(--ink-primary);
  border: 1.5px solid var(--brand-accent-border);
  box-shadow: var(--shadow-surface);
}

.btn-save-vcard:active,
.btn-open-send-hub:active {
  transform: scale(0.97);
}

.cta-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 180ms var(--ease-luxury);
}

.btn-save-vcard .cta-icon-circle {
  background: rgba(255, 255, 255, 0.18);
  color: currentColor;
}
html[data-theme="obsidian"] .btn-save-vcard .cta-icon-circle {
  background: rgba(15, 23, 42, 0.12);
}

.btn-open-send-hub .cta-icon-circle {
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
}

.full-width-cta {
  width: 100%;
}

/* ── 엄지 영역 직통 연락 타일 4종 ── */
.quick-contact-matrix {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.42rem;
  margin-bottom: 0.55rem;
}

.quick-action-tile {
  background: var(--surface);
  color: var(--ink-secondary);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0.5rem 0.2rem;
  min-height: 56px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.24rem;
  font-size: 0.71rem;
  font-weight: 700;
  box-shadow: var(--shadow-surface);
  transition: transform 140ms var(--ease-luxury), border-color 160ms ease;
}

.quick-action-tile:active {
  transform: scale(0.95);
}

.tile-icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 실시간 라이브 인사이트 바 */
.live-insight-pillbar {
  display: flex;
  align-items: center;
  gap: 0.44rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.36rem 0.78rem;
  font-size: 0.69rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 0.72rem;
  box-shadow: var(--shadow-surface);
}

.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
}

/* ── 데스크톱 섹션 탭 ── */
.section-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.26rem;
  background: var(--tabs-shell-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 0.3rem;
  margin-bottom: 0.9rem;
  box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.16);
}

.nav-tab-btn {
  background: transparent;
  color: var(--ink-secondary);
  border: none;
  border-radius: 12px;
  padding: 0.56rem 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-luxury), color 180ms var(--ease-luxury), box-shadow 180ms var(--ease-luxury), transform 120ms var(--ease-luxury);
}

.nav-tab-btn .tab-short-txt { display: none; }

.nav-tab-btn.active {
  background: var(--tabs-active-bg);
  color: var(--tabs-active-fg);
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.tab-panel { display: none; }
.tab-panel.active {
  display: block;
  animation: fadeSlideUp 200ms var(--ease-luxury);
}

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 서피스 카드 공통 ── */
.surface-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 1.05rem;
  margin-bottom: 0.78rem;
  box-shadow: var(--shadow-surface);
}

.hero-visual-surface,
.company-showcase-card {
  padding: 0;
  overflow: hidden;
}

.surface-body-pad {
  padding: 1.05rem 1.1rem 1.15rem;
}

/* ── [탭 1-A] 김기흥 공식 프로필 · 현장 이력 총람 카드 ── */
.exec-dossier-card {
  border: 1.5px solid var(--brand-accent-border);
}

.dossier-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
}

.dossier-person-summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.dossier-mini-portrait {
  width: 48px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 14%;
  border: 1.5px solid var(--brand-gold);
  background: #080E1C;
  flex-shrink: 0;
}

.dossier-role-line {
  margin: 0.14rem 0 0;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-muted);
  word-break: keep-all;
}

.dossier-subtabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 0.22rem;
  margin-bottom: 0.75rem;
}

.dossier-subtab {
  background: transparent;
  color: var(--ink-secondary);
  border: none;
  border-radius: 9px;
  padding: 0.44rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 160ms var(--ease-luxury), color 160ms var(--ease-luxury), box-shadow 160ms var(--ease-luxury);
}

.dossier-subtab.active {
  background: var(--surface);
  color: var(--brand-accent);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.dossier-subpanel { display: none; }
.dossier-subpanel.active { display: block; }

.timeline-compact-list {
  display: grid;
  gap: 0.5rem;
}

.tl-row {
  display: grid;
  grid-template-columns: 98px 1fr;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  align-items: baseline;
}

@media (max-width: 420px) {
  .tl-row {
    grid-template-columns: 1fr;
    gap: 0.16rem;
  }
}

.tl-period {
  font-size: 0.69rem;
  font-weight: 800;
  color: var(--brand-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tl-body strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-primary);
  word-break: keep-all;
}

.tl-body span {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-secondary);
  margin-top: 0.12rem;
  line-height: 1.45;
  word-break: keep-all;
}

.subpanel-caption-bar {
  font-size: 0.73rem;
  font-weight: 800;
  color: var(--brand-accent);
  margin-bottom: 0.44rem;
}

.founded-5grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.44rem;
}

@media (max-width: 420px) {
  .founded-5grid {
    grid-template-columns: 1fr;
  }
}

.founded-item {
  background: var(--surface-tinted);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 0.58rem 0.72rem;
}

.founded-item.full-col {
  grid-column: 1 / -1;
}

.founded-item strong {
  display: block;
  font-size: 0.79rem;
  font-weight: 800;
  color: var(--ink-primary);
}

.founded-item span {
  display: block;
  font-size: 0.71rem;
  color: var(--ink-secondary);
  margin-top: 0.1rem;
  line-height: 1.42;
}

.awards-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}

@media (max-width: 410px) {
  .awards-2col {
    grid-template-columns: 1fr;
  }
}

.award-pill-box {
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0.58rem 0.68rem;
}

.award-year {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: 800;
  color: var(--brand-gold);
  background: var(--brand-gold-soft);
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  margin-bottom: 0.2rem;
}

.award-pill-box strong {
  display: block;
  font-size: 0.79rem;
  font-weight: 800;
  color: var(--ink-primary);
}

.award-pill-box span:last-child {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.1rem;
}

.license-strip-box {
  background: var(--surface-tinted);
  border: 1px dashed var(--hairline-strong);
  border-radius: 12px;
  padding: 0.62rem 0.76rem;
  font-size: 0.73rem;
  color: var(--ink-secondary);
  line-height: 1.58;
  display: grid;
  gap: 0.2rem;
}

/* ── 기관 비주얼 배너 & 공통 지표 ── */
.profile-hero-banner {
  position: relative;
  height: 176px;
  width: 100%;
  overflow: hidden;
  background: #0F172A;
}

.profile-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.profile-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 16, 32, 0.14) 0%, rgba(7, 16, 32, 0.86) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.9rem 1.1rem;
}

.hero-overlay-badge {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #FFFFFF;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.18rem 0.56rem;
  border-radius: 999px;
  margin-bottom: 0.3rem;
}

.hero-overlay-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.section-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  margin-bottom: 0.24rem;
}

.verified-period-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-accent);
  background: var(--brand-accent-soft);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}

.surface-card-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--ink-primary);
  margin: 0 0 0.72rem;
  letter-spacing: -0.02em;
}

.surface-card-sub {
  font-size: 0.79rem;
  color: var(--ink-secondary);
  margin: -0.25rem 0 0.82rem;
  line-height: 1.54;
  word-break: keep-all;
}

.surface-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.editorial-tagline {
  margin: 0 0 0.82rem;
  padding: 0.78rem 0.94rem;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-tinted);
  border-radius: 14px;
  font-family: var(--font-serif-kr);
  font-size: 0.82rem;
  color: var(--ink-primary);
  line-height: 1.62;
  word-break: keep-all;
}

.kpi-bento-4grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
  margin-bottom: 0.82rem;
}

.kpi-bento-cell {
  background: var(--surface-tinted);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 0.68rem 0.78rem;
}

.kpi-num {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--ink-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.18;
}

.kpi-unit {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand-accent);
  margin-left: 0.12rem;
}

.kpi-label {
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.18rem;
  font-weight: 600;
  word-break: keep-all;
}

.highlights-ledger {
  border-top: 1px solid var(--hairline);
}

.highlight-ledger-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.52rem 0.08rem;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.78rem;
  color: var(--ink-secondary);
  line-height: 1.48;
  word-break: keep-all;
}

.highlight-idx {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--brand-accent);
  background: var(--brand-accent-soft);
  border-radius: 6px;
  text-align: center;
  padding: 0.08rem 0;
}

.utility-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

@media (max-width: 390px) {
  .utility-action-grid {
    grid-template-columns: 1fr;
  }
}

.btn-small-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.34rem;
  background: var(--surface);
  color: var(--ink-primary);
  border: 1px solid var(--hairline-strong);
  border-radius: 11px;
  padding: 0.48rem 0.7rem;
  min-height: 38px;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 140ms var(--ease-luxury), border-color 160ms ease;
}

.btn-small-action.accent {
  background: var(--brand-accent-soft);
  border-color: var(--brand-accent-border);
  color: var(--brand-accent);
}

.btn-small-action:active {
  transform: scale(0.96);
}

/* 연대 기관 네트워크 디렉터리 */
.network-directory-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.48rem;
}

.network-dir-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.72rem 0.88rem;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink-primary);
  transition: transform 140ms var(--ease-luxury), border-color 160ms ease;
}

.network-dir-item:active { transform: scale(0.98); }

.dir-tag {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: 800;
  padding: 0.08rem 0.44rem;
  border-radius: 999px;
  margin-bottom: 0.16rem;
}
.tag-wssc { background: rgba(11, 40, 75, 0.09); color: #0B284B; }
.tag-logis { background: rgba(19, 54, 110, 0.10); color: #13366E; }
.tag-narami { background: rgba(4, 120, 87, 0.10); color: #065F46; }
.tag-media { background: rgba(154, 114, 38, 0.12); color: #8A621C; }

html[data-theme="obsidian"] .tag-wssc { color: #38BDF8; }
html[data-theme="obsidian"] .tag-logis { color: #C4B5FD; }
html[data-theme="obsidian"] .tag-narami { color: #34D399; }
html[data-theme="obsidian"] .tag-media { color: #FDA4AF; }

.network-dir-item strong {
  display: block;
  font-size: 0.83rem;
  font-weight: 800;
  margin-bottom: 0.08rem;
}

.network-dir-item div > span:last-child {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.network-dir-item svg { color: var(--brand-accent); }

/* ============================================================================
 * [탭 2] 기업소개 — 『웰쉐어 사회적협동조합』 & 『㈜웰쉐어로지스』
 * ============================================================================ */
.company-filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.34rem;
  margin-bottom: 0.78rem;
}

.company-filter-pill {
  background: var(--surface);
  color: var(--ink-secondary);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.48rem 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-surface);
  transition: background-color 150ms var(--ease-luxury), color 150ms var(--ease-luxury), border-color 150ms var(--ease-luxury), transform 120ms var(--ease-luxury);
}

.company-filter-pill.active {
  background: var(--brand-accent);
  color: #FFFFFF;
  border-color: var(--brand-accent);
  font-weight: 800;
}
html[data-theme="obsidian"] .company-filter-pill.active {
  color: #0F172A;
}

.corp-hero-banner {
  position: relative;
  height: 186px;
  width: 100%;
  overflow: hidden;
  background: #0B192C;
}

.corp-hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.corp-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 25, 46, 0.20) 0%, rgba(7, 25, 46, 0.90) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.1rem;
}

.corp-hero-gradient.logis-grad {
  background: linear-gradient(180deg, rgba(13, 18, 48, 0.22) 0%, rgba(13, 18, 48, 0.92) 100%);
}

.corp-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-bottom: 0.4rem;
}

.corp-pill-gold,
.corp-pill-cyan,
.corp-pill-glass {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.15rem 0.52rem;
  border-radius: 999px;
}

.corp-pill-gold { background: #D4A359; color: #0F172A; }
.corp-pill-cyan { background: #38BDF8; color: #0F172A; }
.corp-pill-glass {
  background: rgba(255, 255, 255, 0.16);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.corp-title-with-logo {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

img.corp-wslogis-emblem {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 5px;
  flex-shrink: 0;
}

.corp-hero-title {
  margin: 0;
  color: #FFFFFF;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.corp-hero-sub {
  margin: 0.12rem 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.73rem;
  font-weight: 500;
}

.corp-lead-copy {
  margin: 0 0 0.88rem;
  font-size: 0.81rem;
  color: var(--ink-secondary);
  line-height: 1.62;
  word-break: keep-all;
}

.corp-lead-copy strong {
  color: var(--ink-primary);
}

.corp-mini-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.44rem;
  margin-bottom: 0.88rem;
}

.corp-mini-stats > div {
  background: var(--surface-tinted);
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  padding: 0.6rem 0.74rem;
  font-variant-numeric: tabular-nums;
}

.corp-mini-stats strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink-primary);
}

.corp-mini-stats span {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-muted);
  margin-top: 0.08rem;
}

.corp-division-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-bottom: 0.88rem;
}

.corp-div-item {
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 13px;
  padding: 0.75rem 0.85rem;
}

.corp-div-num {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--brand-gold);
  margin-bottom: 0.16rem;
}

.corp-div-num.logis-c { color: var(--brand-gold); }
html[data-theme="obsidian"] .corp-div-num.logis-c { color: #F3D592; }

.corp-div-item strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 0.2rem;
  word-break: keep-all;
}

.corp-div-item p {
  margin: 0;
  font-size: 0.76rem;
  color: var(--ink-secondary);
  line-height: 1.52;
  word-break: keep-all;
}

.corp-meta-strip {
  background: var(--surface-tinted);
  border: 1px dashed var(--hairline-strong);
  border-radius: 11px;
  padding: 0.6rem 0.75rem;
  font-size: 0.72rem;
  color: var(--ink-secondary);
  line-height: 1.56;
  margin-bottom: 0.88rem;
}

.corp-links-box {
  display: grid;
  gap: 0.5rem;
}

.btn-corp-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.76rem 1rem;
  border-radius: 13px;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 0.83rem;
  font-weight: 800;
  transition: transform 140ms var(--ease-luxury);
}

.btn-corp-primary.wssc-btn {
  background: linear-gradient(135deg, #07162B 0%, #103258 100%);
  border: 1px solid rgba(226, 185, 100, 0.34);
  box-shadow: 0 10px 22px -12px rgba(7, 22, 43, 0.48);
}

.btn-corp-primary.logis-btn {
  background: linear-gradient(135deg, #071126 0%, #173870 100%);
  border: 1px solid rgba(165, 196, 244, 0.32);
  box-shadow: 0 10px 22px -12px rgba(7, 17, 38, 0.48);
}

.btn-corp-primary:active {
  transform: scale(0.98);
}

.corp-sublinks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.38rem;
}

.corp-sublink-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  padding: 0.48rem 0.65rem;
  text-decoration: none;
  color: var(--ink-primary);
  font-size: 0.73rem;
  font-weight: 700;
}

.corp-sublink-chip svg { color: var(--brand-accent); }

.corp-action-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* ============================================================================
 * [탭 3] 수의계약 증빙 · A4 지명원/프로필 · 직인 견적서 자동 발급기
 * ============================================================================ */
.legal-basis-banner {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  padding: 1.05rem 1.1rem;
  margin-bottom: 0.78rem;
  box-shadow: var(--shadow-surface);
}

.legal-banner-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.48rem;
}

.legal-banner-title {
  font-size: 0.94rem;
  font-weight: 800;
  margin: 0.1rem 0 0;
  color: var(--ink-primary);
}

.legal-banner-desc {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-secondary);
  line-height: 1.58;
  word-break: keep-all;
}

.vault-doc-grid {
  display: grid;
  gap: 0.5rem;
}

.vault-doc-item {
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 0.76rem 0.86rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

@media (max-width: 420px) {
  .vault-doc-item {
    flex-direction: column;
    align-items: stretch;
  }
}

.vault-doc-badge {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--brand-accent);
  background: var(--brand-accent-soft);
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  margin-bottom: 0.2rem;
}

.vault-doc-badge.locked {
  color: #B45309;
  background: rgba(245, 158, 11, 0.14);
}

.vault-doc-title {
  font-size: 0.83rem;
  font-weight: 800;
  color: var(--ink-primary);
  word-break: keep-all;
}

.vault-doc-meta {
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 0.12rem;
  word-break: keep-all;
}

/* 직인 견적서 자동 발급기 */
.quote-items-list {
  display: grid;
  gap: 0.46rem;
  margin-bottom: 0.72rem;
}

.quote-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 13px;
  padding: 0.64rem 0.76rem;
}

.quote-item-info {
  min-width: 0;
  flex: 1 1 auto;
}

.quote-item-info strong {
  display: block;
  font-size: 0.81rem;
  font-weight: 800;
  color: var(--ink-primary);
  word-break: keep-all;
}

.quote-item-info span {
  display: block;
  font-size: 0.71rem;
  color: var(--ink-muted);
  margin-top: 0.1rem;
}

.quote-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.quote-step-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--ink-primary);
  font-size: 1rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quote-step-btn:active {
  background: var(--brand-accent-soft);
}

.quote-qty-val {
  min-width: 32px;
  text-align: center;
  font-size: 0.84rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-primary);
}

.quote-custom-box {
  border: 1px dashed var(--hairline-strong);
  background: var(--surface-tinted);
  border-radius: 13px;
  padding: 0.68rem 0.76rem;
  margin-bottom: 0.75rem;
}

.quote-custom-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 78px;
  gap: 0.44rem;
}

@media (max-width: 460px) {
  .quote-custom-grid {
    grid-template-columns: 1fr 1fr;
  }
  .quote-custom-grid input:first-child {
    grid-column: 1 / -1;
  }
}

.quote-total-banner {
  background: #0F172A;
  color: #FFFFFF;
  border-radius: 15px;
  padding: 0.84rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.68rem;
}

.quote-total-label {
  display: block;
  font-size: 0.69rem;
  color: rgba(255, 255, 255, 0.72);
}

.quote-total-kor {
  display: block;
  font-size: 0.84rem;
  color: #F5C451;
  margin-top: 0.1rem;
}

.quote-total-num {
  font-size: 1.28rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================================
 * [탭 4] 2칸(이름 · 연락처) 원터치 즉시 전달 & 종이명함 스캔 & 명함첩
 * ============================================================================ */
.instant-exchange-card {
  border: 1.5px solid var(--brand-accent-border);
}

.instant-2field-box {
  display: grid;
  gap: 0.68rem;
}

.instant-2col-inputs {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 0.55rem;
}

@media (max-width: 460px) {
  .instant-2col-inputs {
    grid-template-columns: 1fr;
  }
}

.field-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-secondary);
  margin-bottom: 0.28rem;
}

.autosave-check-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-accent-soft);
  border: 1px solid var(--brand-accent-border);
  border-radius: 12px;
  padding: 0.58rem 0.78rem;
  font-size: 0.76rem;
  color: var(--ink-primary);
  cursor: pointer;
}

.autosave-check-bar input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-accent);
  flex-shrink: 0;
}

.instant-cta-stack {
  display: grid;
  gap: 0.48rem;
}

.instant-2col-subbtns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

@media (max-width: 500px) {
  .instant-2col-subbtns {
    grid-template-columns: 1fr;
  }
}

.instant-2col-subbtns .btn-open-send-hub {
  justify-content: center;
  padding: 0.62rem 0.8rem;
  font-size: 0.78rem;
  text-align: center;
}

.reciprocal-btn {
  background: var(--surface-subtle);
}

.saved-wallet-list {
  display: grid;
  gap: 0.48rem;
}

.wallet-contact-row {
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 13px;
  padding: 0.72rem 0.82rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.wallet-contact-info strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink-primary);
}

.wallet-contact-info span {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-top: 0.08rem;
}

.wallet-contact-actions {
  display: flex;
  align-items: center;
  gap: 0.32rem;
}

.wallet-empty-box {
  background: var(--surface-subtle);
  border: 1px dashed var(--hairline-strong);
  border-radius: 13px;
  padding: 1rem;
  text-align: center;
  font-size: 0.77rem;
  color: var(--ink-muted);
}

.atelier-form {
  display: grid;
  gap: 0.72rem;
}

.form-2col-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (max-width: 440px) {
  .form-2col-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
 * 모바일 전용 하단 5탭 네이티브 앱 네비게이션 바 (< 980px)
 * ============================================================================ */
.mobile-app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--tabbar-bg);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid var(--tabbar-border);
  padding: 0.28rem 0.4rem calc(0.38rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 0.15rem;
  box-shadow: 0 -8px 26px -8px rgba(15, 23, 42, 0.16);
}

.m-tab-item {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  padding: 0.34rem 0.1rem 0.22rem;
  min-height: 48px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  font-size: 0.67rem;
  font-weight: 700;
  white-space: nowrap;
  transition: color 150ms ease, transform 130ms ease;
}

.m-tab-item:active {
  transform: scale(0.93);
}

.m-tab-item.active {
  color: var(--brand-accent);
  font-weight: 800;
}

.m-tab-item.active svg {
  stroke-width: 2.25;
}

.m-tab-qr-center {
  background: transparent;
  border: none;
  color: var(--ink-primary);
  padding: 0 0.1rem 0.22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.18rem;
  font-size: 0.67rem;
  font-weight: 800;
  white-space: nowrap;
}

.m-tab-qr-center:active {
  transform: scale(0.94);
}

.m-qr-orb {
  width: 44px;
  height: 44px;
  margin-top: -16px;
  border-radius: 15px;
  background: linear-gradient(135deg, #0B2545 0%, #0284C7 58%, #D99B26 100%);
  color: #FFFFFF;
  border: 2.5px solid var(--surface);
  box-shadow: 0 10px 20px -6px rgba(7, 25, 46, 0.48);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 데스크톱 하단 플로팅 독 */
.bottom-send-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0.45rem 0.85rem calc(0.58rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}

.bottom-dock-inner {
  pointer-events: auto;
  max-width: 470px;
  margin: 0 auto;
  background: var(--dock-glass);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 0.34rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.26rem;
  box-shadow: 0 20px 44px -10px rgba(7, 15, 30, 0.46);
}

.dock-btn {
  background: transparent;
  color: var(--dock-fg);
  border: none;
  border-radius: 999px;
  padding: 0.46rem 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  font-size: 0.69rem;
  font-weight: 700;
  transition: transform 150ms var(--ease-luxury);
}

.dock-btn:active { transform: scale(0.94); }

.dock-btn.primary-qr {
  background: #FFFFFF;
  color: #0F172A;
  font-weight: 800;
}

/* ── 모달 / 바텀 시트 공통 ── */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7, 13, 25, 0.64);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: none;
  align-items: flex-end;
  justify-content: center;
}

.sheet-backdrop.open { display: flex; }

.bottom-sheet {
  width: 100%;
  max-width: 540px;
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--surface-elevated);
  border: 1px solid var(--hairline-strong);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 1.2rem 1.15rem calc(1.35rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.34);
  animation: sheetRise 220ms var(--ease-luxury);
}

.bottom-sheet.admin-sheet { max-width: 650px; }

@keyframes sheetRise {
  from { transform: translateY(32px); opacity: 0.65; }
  to { transform: translateY(0); opacity: 1; }
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.sheet-title {
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0.12rem 0 0;
  color: var(--ink-primary);
}

.sheet-desc {
  font-size: 0.79rem;
  color: var(--ink-secondary);
  margin: 0 0 0.82rem;
  line-height: 1.54;
}

.sheet-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  border: 1px solid var(--hairline-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sheet-section-block { margin-bottom: 0.85rem; }

.segmented-2grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.36rem;
}

.sheet-2col-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.46rem;
}

.sheet-2col-actions .btn-open-send-hub,
.sheet-2col-actions .btn-save-vcard {
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 0.64rem 0.55rem;
}

.sheet-inner-card {
  padding: 1rem;
  margin-bottom: 0.8rem;
}

.sheet-subcard-title {
  font-size: 0.91rem;
  font-weight: 800;
  margin: 0.16rem 0 0.38rem;
  color: var(--ink-primary);
}

/* 프로필 사진 고화질 확대 모달 */
.portrait-modal-layout {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0.85rem;
  align-items: start;
}

@media (max-width: 430px) {
  .portrait-modal-layout {
    grid-template-columns: 1fr;
  }
  .portrait-modal-photo {
    max-width: 190px;
    margin: 0 auto;
  }
}

.portrait-modal-photo {
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(245, 196, 81, 0.65);
  background: #080E1C;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.45);
}

.portrait-modal-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 12%;
  display: block;
}

.bio-pill-line {
  display: inline-block;
  font-size: 0.69rem;
  font-weight: 800;
  color: var(--brand-gold);
  background: var(--brand-gold-soft);
  padding: 0.18rem 0.56rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}

.bio-clean-list {
  margin: 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.34rem;
  font-size: 0.77rem;
  color: var(--ink-secondary);
  line-height: 1.48;
}

.bio-clean-list strong {
  color: var(--ink-primary);
}

/* 대면 고대비 순백 QR 패스포트 */
.qr-passport-card {
  background: #FFFFFF;
  color: #0F172A;
  border-radius: 20px;
  padding: 1.15rem 1rem;
  text-align: center;
  margin-bottom: 0.85rem;
  border: 1.5px solid var(--brand-accent-border);
  box-shadow: 0 12px 30px -12px rgba(15, 23, 42, 0.18);
}

.qr-pass-org {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0369A1;
}

.qr-pass-person {
  font-size: 1.08rem;
  font-weight: 800;
  color: #0F172A;
  margin-top: 0.12rem;
}

.qr-passport-svg-wrap {
  width: 210px;
  height: 210px;
  margin: 0.75rem auto;
  position: relative;
}
.qr-passport-svg-wrap svg { width: 100%; height: 100%; display: block; }

.qr-center-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-center-badge img { width: 100%; height: 100%; object-fit: contain; }

.qr-pass-guide { font-size: 0.8rem; color: #334155; }
.qr-pass-caption { font-size: 0.72rem; color: #64748B; margin-top: 0.2rem; }

.guide-note-box {
  margin-top: 0.7rem;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
  border-radius: 11px;
  padding: 0.64rem 0.76rem;
  font-size: 0.74rem;
  color: var(--ink-secondary);
  line-height: 1.58;
}

.nfc-status-caption {
  margin-top: 0.55rem;
  font-size: 0.73rem;
  color: var(--ink-muted);
  line-height: 1.48;
}

/* 관리자 스튜디오 */
.admin-auth-row { display: flex; gap: 0.48rem; }
.admin-auth-btn { width: auto; justify-content: center; padding: 0.62rem 1.25rem; flex-shrink: 0; }

.admin-leads-list {
  max-height: 230px;
  overflow-y: auto;
  margin-top: 0.6rem;
  display: grid;
  gap: 0.42rem;
  font-size: 0.77rem;
}

.admin-lead-card {
  padding: 0.6rem 0.74rem;
  border-radius: 11px;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline);
}

.pin-lock-toggle {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.79rem;
  color: var(--ink-secondary);
  cursor: pointer;
}
.pin-lock-toggle input { width: auto; }

.admin-pin-row { display: flex; gap: 0.46rem; align-items: center; }
.admin-pin-row input { max-width: 210px; }

/* 토스트 알림 */
.wssc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(14px);
  z-index: 120;
  width: max-content;
  max-width: min(92vw, 420px);
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 0.56rem 1.05rem;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.38;
  word-break: keep-all;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-luxury), transform 180ms var(--ease-luxury);
  text-align: center;
}

.wssc-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================================
 * 3대 실물 명함 스킨 (Royal Metal Gold / Hologram Prism / Swiss White Cotton)
 * ============================================================================ */
html[data-card-skin="royal"] .card-bezel-shell {
  background: linear-gradient(145deg, rgba(245, 196, 81, 0.30) 0%, rgba(56, 189, 248, 0.16) 52%, rgba(15, 23, 42, 0.44) 100%);
  border-color: rgba(245, 196, 81, 0.42);
}

html[data-card-skin="royal"] .exec-card-front {
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(245, 196, 81, 0.17) 0%, transparent 54%),
    radial-gradient(90% 80% at 10% 95%, rgba(56, 189, 248, 0.15) 0%, transparent 55%),
    linear-gradient(145deg, #071327 0%, #0F2548 52%, #081529 100%);
  border-color: rgba(245, 196, 81, 0.36);
  box-shadow: 0 22px 48px -14px rgba(5, 12, 26, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

html[data-card-skin="royal"][data-brand="mill"] .exec-card-front {
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(251, 191, 36, 0.22) 0%, transparent 55%),
    linear-gradient(145deg, #1E1006 0%, #3E2009 52%, #190D04 100%);
}

html[data-card-skin="royal"][data-brand="logis"] .exec-card-front {
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(168, 85, 247, 0.22) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 95%, rgba(56, 189, 248, 0.18) 0%, transparent 55%),
    linear-gradient(145deg, #070F26 0%, #182358 52%, #09132C 100%);
}

html[data-card-skin="royal"][data-brand="narami"] .exec-card-front {
  background:
    radial-gradient(120% 90% at 92% 8%, rgba(245, 196, 81, 0.18) 0%, transparent 55%),
    radial-gradient(90% 80% at 12% 95%, rgba(16, 185, 129, 0.2) 0%, transparent 55%),
    linear-gradient(145deg, #041C16 0%, #093B2E 52%, #041914 100%);
}

html[data-card-skin="royal"] .exec-card-back {
  background: linear-gradient(145deg, #0B1930 0%, #071120 100%);
  border-color: rgba(245, 196, 81, 0.34);
}

html[data-card-skin="prism"] .card-bezel-shell {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.34) 0%, rgba(168, 85, 247, 0.32) 50%, rgba(244, 114, 182, 0.32) 100%);
  border-color: rgba(165, 243, 252, 0.45);
}

html[data-card-skin="prism"] .exec-card-front {
  background:
    radial-gradient(95% 85% at 88% 14%, rgba(232, 121, 249, 0.28) 0%, transparent 56%),
    radial-gradient(95% 85% at 14% 88%, rgba(34, 211, 238, 0.25) 0%, transparent 58%),
    linear-gradient(135deg, #0F172A 0%, #1E1B4B 46%, #0C4A6E 100%);
  border-color: rgba(165, 243, 252, 0.38);
  box-shadow: 0 22px 48px -14px rgba(15, 23, 42, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

html[data-card-skin="prism"] .exec-card-back {
  background: linear-gradient(135deg, #131B36 0%, #1B1642 52%, #0B2D48 100%);
  border-color: rgba(165, 243, 252, 0.34);
}

html[data-card-skin="cotton"] .card-portrait-frame {
  border-color: var(--brand-accent);
  box-shadow: 0 8px 18px -6px rgba(15, 23, 42, 0.22);
}

html[data-card-skin="royal"] .exec-card-face .card-brand-light,
html[data-card-skin="prism"] .exec-card-face .card-brand-light {
  display: none;
}

html[data-card-skin="royal"] .exec-card-face .card-brand-dark,
html[data-card-skin="prism"] .exec-card-face .card-brand-dark {
  display: inline-flex;
}

html[data-card-skin="royal"] .exec-card-face .card-logo-hairline,
html[data-card-skin="prism"] .exec-card-face .card-logo-hairline {
  background: rgba(255, 255, 255, 0.24);
}

html[data-card-skin="royal"] .exec-card-face .card-guilloche-watermark,
html[data-card-skin="prism"] .exec-card-face .card-guilloche-watermark {
  stroke: #F5C451;
  opacity: 0.16;
}

html[data-card-skin="royal"] .exec-card-face .card-skin-dots,
html[data-card-skin="prism"] .exec-card-face .card-skin-dots {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

html[data-card-skin="royal"] .exec-card-face .skin-dot-btn:not(.active),
html[data-card-skin="prism"] .exec-card-face .skin-dot-btn:not(.active) {
  color: rgba(255, 255, 255, 0.78);
}

html[data-card-skin="royal"] .exec-card-face .flip-trigger-btn,
html[data-card-skin="prism"] .exec-card-face .flip-trigger-btn {
  background: rgba(255, 255, 255, 0.10);
  color: #F8FAFC;
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-card-skin="royal"] .exec-card-face .card-serial-eyebrow,
html[data-card-skin="royal"] .exec-card-face .eyebrow-tag {
  color: #F5C451;
}

html[data-card-skin="prism"] .exec-card-face .card-serial-eyebrow,
html[data-card-skin="prism"] .exec-card-face .eyebrow-tag {
  color: #67E8F9;
}

html[data-card-skin="royal"] .exec-card-face .card-verified-pill,
html[data-card-skin="prism"] .exec-card-face .card-verified-pill {
  background: rgba(245, 196, 81, 0.16);
  color: #FDE68A;
  border-color: rgba(245, 196, 81, 0.38);
}

html[data-card-skin="royal"] .exec-card-face .card-org-name,
html[data-card-skin="prism"] .exec-card-face .card-org-name {
  color: #E2E8F0;
}

html[data-card-skin="royal"] .exec-card-face .card-person-name,
html[data-card-skin="prism"] .exec-card-face .card-person-name,
html[data-card-skin="royal"] .exec-card-face .back-ledger-heading strong,
html[data-card-skin="prism"] .exec-card-face .back-ledger-heading strong,
html[data-card-skin="royal"] .exec-card-face .back-spec-dl dd,
html[data-card-skin="prism"] .exec-card-face .back-spec-dl dd {
  color: #FFFFFF;
}

html[data-card-skin="royal"] .exec-card-face .card-person-sub,
html[data-card-skin="prism"] .exec-card-face .card-person-sub,
html[data-card-skin="royal"] .exec-card-face .card-dept-line,
html[data-card-skin="prism"] .exec-card-face .card-dept-line,
html[data-card-skin="royal"] .exec-card-face .back-spec-dl dt,
html[data-card-skin="prism"] .exec-card-face .back-spec-dl dt,
html[data-card-skin="royal"] .exec-card-face .back-footer-bar,
html[data-card-skin="prism"] .exec-card-face .back-footer-bar {
  color: rgba(226, 232, 240, 0.80);
}

html[data-card-skin="royal"] .exec-card-face .card-role-title,
html[data-card-skin="royal"] .exec-card-face .back-footer-bar strong {
  color: #F3D592;
}
html[data-card-skin="royal"][data-brand="mill"] .exec-card-face .card-role-title { color: #FCD34D; }
html[data-card-skin="royal"][data-brand="narami"] .exec-card-face .card-role-title { color: #A7F3D0; }
html[data-card-skin="prism"] .exec-card-face .card-role-title,
html[data-card-skin="prism"] .exec-card-face .back-footer-bar strong {
  color: #E2E8F0;
}

html[data-card-skin="royal"] .exec-card-face .card-mini-qr-label,
html[data-card-skin="prism"] .exec-card-face .card-mini-qr-label {
  color: #FDE68A;
}

html[data-card-skin="royal"] .exec-card-face .card-contact-footer,
html[data-card-skin="prism"] .exec-card-face .card-contact-footer,
html[data-card-skin="royal"] .exec-card-face .back-footer-bar,
html[data-card-skin="prism"] .exec-card-face .back-footer-bar {
  border-top-color: rgba(255, 255, 255, 0.14);
  color: #E2E8F0;
}

html[data-card-skin="royal"] .exec-card-face .card-contact-footer .full-span,
html[data-card-skin="prism"] .exec-card-face .card-contact-footer .full-span {
  color: rgba(226, 232, 240, 0.80);
}

html[data-card-skin="royal"] .exec-card-face .card-meta-item svg,
html[data-card-skin="prism"] .exec-card-face .card-meta-item svg {
  color: #F5C451;
}

/* ── 6대 스마트 명함 툴킷 런처 ── */
.super-launcher-card {
  position: relative;
  border: 1px solid var(--hairline-strong);
  background:
    radial-gradient(120% 100% at 100% 0%, var(--brand-accent-soft) 0%, transparent 55%),
    var(--surface);
}

.super-6grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.46rem;
}

@media (min-width: 680px) {
  .super-6grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.super-tool-tile {
  display: flex;
  align-items: center;
  gap: 0.54rem;
  text-align: left;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  padding: 0.62rem 0.66rem;
  color: var(--ink-primary);
  transition: transform 140ms var(--ease-luxury), border-color 160ms ease;
}

.super-tool-tile:active {
  transform: scale(0.97);
}

.super-tile-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(11, 40, 75, 0.07);
  color: #0B284B;
  border: 1px solid rgba(11, 40, 75, 0.14);
  box-shadow: none;
}

.super-tile-ico.ico-gold,
.super-tile-ico.ico-emerald {
  background: rgba(154, 114, 38, 0.10);
  color: #8A621C;
  border-color: rgba(154, 114, 38, 0.22);
}

.super-tile-ico.ico-magenta,
.super-tile-ico.ico-cobalt,
.super-tile-ico.ico-cyan,
.super-tile-ico.ico-purple {
  background: rgba(11, 40, 75, 0.07);
  color: #0B284B;
  border-color: rgba(11, 40, 75, 0.14);
}

html[data-theme="obsidian"] .super-tile-ico {
  background: rgba(245, 212, 135, 0.10);
  color: #F3D592;
  border-color: rgba(245, 212, 135, 0.22);
}

.super-tile-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.super-tile-body strong {
  font-size: 0.77rem;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.24;
  word-break: keep-all;
}

.super-tile-body span {
  font-size: 0.66rem;
  color: var(--ink-muted);
  font-weight: 600;
  line-height: 1.28;
  word-break: keep-all;
}

/* ── 공식 홍보 · 발표 영상 인앱 시네마 쇼케이스 (모바일 스와이프 캐러셀) ── */
.cinema-player-stage {
  background: #070D19;
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 0.82rem;
  border: 1px solid rgba(56, 189, 248, 0.35);
  box-shadow: 0 16px 32px -14px rgba(7, 13, 25, 0.55);
}

.cinema-player-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.78rem;
  background: #0F172A;
  color: #F8FAFC;
  font-size: 0.78rem;
}

.cinema-player-bar strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cinema-iframe-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000000;
}

.cinema-iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-thumb-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.2rem;
}
.video-thumb-grid::-webkit-scrollbar { display: none; }

@media (min-width: 640px) {
  .video-thumb-grid {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }
}

.video-thumb-item {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline-strong);
  border-radius: 15px;
  padding: 0;
  overflow: hidden;
  color: var(--ink-primary);
  transition: transform 150ms var(--ease-luxury), border-color 160ms ease;
}

.video-thumb-item:active {
  transform: scale(0.98);
}

.video-thumb-item.is-playing {
  border-color: var(--brand-accent);
  box-shadow: 0 10px 22px -12px rgba(15, 23, 42, 0.28);
}

.video-thumb-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0B1324;
  overflow: hidden;
}

.video-thumb-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 300ms var(--ease-luxury);
}

.video-play-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.68);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
}

.video-play-circle svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  margin-left: 2px;
}

.video-cat-pill {
  position: absolute;
  top: 0.48rem;
  left: 0.48rem;
  font-size: 0.63rem;
  font-weight: 800;
  padding: 0.14rem 0.48rem;
  border-radius: 999px;
  color: #FFFFFF;
  backdrop-filter: blur(6px);
}
.video-cat-pill.pill-wssc { background: rgba(3, 105, 161, 0.90); }
.video-cat-pill.pill-logis { background: rgba(109, 40, 217, 0.90); }
.video-cat-pill.pill-narami { background: rgba(4, 120, 87, 0.90); }

.video-thumb-meta {
  padding: 0.65rem 0.78rem 0.74rem;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.video-thumb-meta strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ink-primary);
  word-break: keep-all;
}

.video-thumb-meta span {
  font-size: 0.7rem;
  color: var(--ink-muted);
  word-break: keep-all;
}

/* ── 종이명함 카메라 스캔(OCR) & 음성 입력 & 명함첩 ── */
.smart-capture-bar {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0.46rem;
  margin-bottom: 0.72rem;
}

@media (max-width: 500px) {
  .smart-capture-bar {
    grid-template-columns: 1fr;
  }
}

.btn-smart-capture {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  border-radius: 12px;
  padding: 0.64rem 0.8rem;
  min-height: 44px;
  font-size: 0.79rem;
  font-weight: 800;
  background: var(--surface-subtle);
  color: var(--ink-primary);
  border: 1.5px solid var(--hairline-strong);
  transition: transform 140ms var(--ease-luxury);
}

.btn-smart-capture:active {
  transform: scale(0.97);
}

.btn-smart-capture.primary-scan {
  background: linear-gradient(135deg, #07162B 0%, #0F2D54 100%);
  color: #FFFFFF;
  border-color: rgba(226, 185, 100, 0.45);
  box-shadow: 0 10px 22px -12px rgba(7, 22, 43, 0.48);
}

.btn-smart-capture.is-listening {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #EF4444;
}

.ocr-preview-strip {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--surface-subtle);
  border: 1.5px solid var(--brand-accent-border);
  border-radius: 13px;
  padding: 0.58rem 0.72rem;
  margin-bottom: 0.72rem;
}

.ocr-thumb-img {
  width: 64px;
  height: 42px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--hairline-strong);
  flex-shrink: 0;
  background: #0F172A;
}

.ocr-preview-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.ocr-preview-info strong {
  font-size: 0.77rem;
  font-weight: 800;
  color: var(--brand-accent);
}

.ocr-preview-info span {
  font-size: 0.7rem;
  color: var(--ink-secondary);
  word-break: keep-all;
}

.peer-tag-selector {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  flex-wrap: wrap;
}

.tag-sel-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.peer-tag-chip {
  background: var(--surface-subtle);
  color: var(--ink-secondary);
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  padding: 0.26rem 0.62rem;
  font-size: 0.71rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 150ms var(--ease-luxury), color 150ms var(--ease-luxury), border-color 150ms var(--ease-luxury), transform 120ms var(--ease-luxury);
}

.peer-tag-chip.active {
  background: var(--brand-accent);
  color: #FFFFFF;
  border-color: var(--brand-accent);
  font-weight: 800;
}
html[data-theme="obsidian"] .peer-tag-chip.active {
  color: #0F172A;
}

.wallet-filter-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.wallet-filter-pills {
  display: flex;
  gap: 0.32rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.wallet-filter-pills::-webkit-scrollbar { display: none; }

.wallet-tag-badge {
  display: inline-block;
  font-size: 0.63rem;
  font-weight: 800;
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.wallet-card-thumb {
  width: 50px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  cursor: pointer;
  flex-shrink: 0;
}

.photo-viewer-frame {
  background: #0B1120;
  border-radius: 15px;
  padding: 0.48rem;
  text-align: center;
}

.photo-viewer-frame img {
  max-width: 100%;
  max-height: 68vh;
  border-radius: 10px;
  object-fit: contain;
}

/* ── 태블릿 & 데스크톱 확장 (640px / 980px 2단 이그제큐티브 레이아웃) ── */
@media (min-width: 640px) {
  .kpi-bento-4grid,
  .corp-mini-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .corp-division-grid,
  .network-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card-portrait-frame {
    width: 84px;
    height: 102px;
  }
  .card-person-name {
    font-size: 1.68rem;
  }
  .card-mini-qr-box {
    width: 66px;
    height: 66px;
  }
  .profile-hero-banner { height: 220px; }
  .corp-hero-banner { height: 230px; }
  .sheet-backdrop {
    align-items: center;
    padding: 1.2rem;
  }
  .bottom-sheet {
    border-radius: 24px;
    border-bottom: 1px solid var(--hairline-strong);
  }
}

@media (min-width: 980px) {
  body {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-app-tabbar,
  .mobile-mini-card-bar {
    display: none !important;
  }

  .hero-aura-backdrop {
    height: 294px;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .top-bar-inner,
  .profile-strip-wrap {
    max-width: 1260px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .app-container.atelier-layout {
    max-width: 1260px;
    padding: 1.5rem 2rem 4.8rem;
    display: grid;
    grid-template-columns: 454px minmax(0, 1fr);
    gap: 2.1rem;
    align-items: start;
  }

  .atelier-left-stage {
    position: sticky;
    top: 102px;
    display: block !important;
  }

  .role-pills-scroll {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 0.36rem;
  }

  .exec-card-flipper,
  .exec-card-face {
    min-height: 282px;
    padding: 1.15rem 1.2rem 1.05rem 1.38rem;
  }

  .surface-card {
    padding: 1.3rem;
    margin-bottom: 0.95rem;
  }

  .hero-visual-surface,
  .company-showcase-card {
    padding: 0;
  }

  .surface-body-pad {
    padding: 1.35rem 1.5rem 1.5rem;
  }
}

/* 터치 기기 끈적한 호버 방지: 마우스 포인터 기기에서만 호버 활성 */
@media (hover: hover) and (pointer: fine) {
  .ghost-pill-btn:hover { background: rgba(255, 255, 255, 0.22); }
  .profile-chip:not(.active):hover { background: rgba(255, 255, 255, 0.2); }
  .flip-trigger-btn:hover,
  .btn-small-action:hover,
  .corp-sublink-chip:hover,
  .network-dir-item:hover,
  .vault-doc-item:hover {
    border-color: var(--brand-accent);
  }
  .quick-action-tile:hover,
  .super-tool-tile:hover,
  .video-thumb-item:hover {
    border-color: var(--brand-accent);
    transform: translateY(-2px);
  }
  .video-thumb-item:hover .video-thumb-media img {
    transform: scale(1.04);
  }
  .card-meta-item.copyable-meta:hover {
    background: var(--brand-accent-soft);
  }
  html[data-card-skin="royal"] .exec-card-face .card-meta-item.copyable-meta:hover,
  html[data-card-skin="prism"] .exec-card-face .card-meta-item.copyable-meta:hover {
    background: rgba(255, 255, 255, 0.11);
  }
  .btn-save-vcard:hover .cta-icon-circle,
  .btn-open-send-hub:hover .cta-icon-circle {
    transform: translate(1.5px, -1px);
  }
  .btn-corp-primary:hover {
    filter: brightness(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .exec-card-tilt-rig,
  .exec-card-flipper,
  .bottom-sheet,
  .tab-panel,
  .wssc-toast {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}


/* ============================================================================
 * v7.0 SOVEREIGN FULL-SCREEN SLIDE DECK & AUTO PHONE-TO-PHONE BEAM ARCHITECTURE
 * - 모바일 첫 화면(Slide 1): 100svh 엣지-투-엣지 풀스크린 네이비·샴페인골드 실물 명함
 * - 아래로 슬라이드 시: Slide 2(폰 자동전송) -> Slide 3(프로필) -> Slide 4(기업소개)
 *   -> Slide 5(수의·견적) -> Slide 6(종이명함 스캔·명함첩) 연속 수직 슬라이드 전개
 * - Emil Kowalski & UI/UX Pro Max: 100svh, safe-area, 44px 터치, 커스텀 ease-out
 * ============================================================================ */
:root {
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* 카드 내부 공인 신뢰 증명 배지 바 */
/* 명함 내 공인 신뢰 증명 3대 핵심 실적 벤토 */
.card-trust-proof-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-bottom: 0.52rem;
  padding: 0.42rem 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  font-variant-numeric: tabular-nums;
}

html[data-card-skin="royal"] .exec-card-face .card-trust-proof-strip,
html[data-card-skin="prism"] .exec-card-face .card-trust-proof-strip {
  border-top-color: rgba(226, 185, 100, 0.26);
  border-bottom-color: rgba(226, 185, 100, 0.26);
}

.trust-proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.1rem;
  padding: 0.14rem 0.28rem;
  border-radius: 0;
  background: transparent;
  border: none;
  min-width: 0;
}

.trust-proof-item + .trust-proof-item {
  border-left: 1px solid var(--hairline-strong);
}

.trust-kpi-head {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.trust-kpi-sub {
  display: block;
  font-size: 0.59rem;
  font-weight: 600;
  color: var(--ink-muted);
  line-height: 1.2;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

html[data-card-skin="royal"] .exec-card-face .trust-proof-item,
html[data-card-skin="prism"] .exec-card-face .trust-proof-item {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-card-skin="royal"] .exec-card-face .trust-proof-item + .trust-proof-item,
html[data-card-skin="prism"] .exec-card-face .trust-proof-item + .trust-proof-item {
  border-left: 1px solid rgba(226, 185, 100, 0.22);
}

html[data-card-skin="royal"] .exec-card-face .trust-kpi-head,
html[data-card-skin="prism"] .exec-card-face .trust-kpi-head {
  color: #FDE68A;
}

html[data-card-skin="royal"] .exec-card-face .trust-kpi-sub,
html[data-card-skin="prism"] .exec-card-face .trust-kpi-sub {
  color: rgba(226, 232, 240, 0.88);
}

.trust-proof-dot {
  display: none;
}

/* 데스크톱에서는 모바일 전용 슬라이드 장식 숨김 */
.mobile-slide-dots,
.mobile-slide-chapter-head,
.hero-slide-down-cue,
.mobile-card-menu-btn {
  display: none;
}

/* ── Slide 2 & 모달 8: 다른 핸드폰 1초 자동 전송(Auto Beam) 컴포넌트 ── */
.beam-hub-card {
  border: 1.5px solid var(--brand-accent-border);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--brand-accent-soft) 0%, transparent 58%),
    var(--surface);
}

.beam-3grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.52rem;
  margin-top: 0.65rem;
}

@media (min-width: 640px) {
  .beam-3grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.beam-method-tile {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  width: 100%;
  text-align: left;
  padding: 0.78rem 0.88rem;
  min-height: 62px;
  border-radius: 16px;
  background: var(--surface-subtle);
  border: 1.5px solid var(--hairline-strong);
  color: var(--ink-primary);
  transition: transform 130ms var(--ease-out-strong), border-color 160ms ease, box-shadow 160ms ease;
}

.beam-method-tile:active {
  transform: scale(0.975);
}

.beam-method-tile.primary-beam {
  background: linear-gradient(135deg, #07192E 0%, #0C355E 58%, #0369A1 100%);
  border-color: rgba(245, 196, 81, 0.45);
  color: #FFFFFF;
  box-shadow: 0 14px 28px -12px rgba(7, 25, 46, 0.46);
}

.beam-method-ico {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(245, 196, 81, 0.20);
  color: #FDE68A;
  border: 1px solid rgba(245, 196, 81, 0.38);
}

.beam-method-ico.gold-ico {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.beam-method-ico.navy-ico {
  background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.beam-method-texts {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.beam-method-texts strong {
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.26;
  word-break: keep-all;
}

.beam-method-texts span {
  font-size: 0.73rem;
  opacity: 0.84;
  line-height: 1.32;
  word-break: keep-all;
}

.beam-method-tile:not(.primary-beam) .beam-method-texts span {
  color: var(--ink-muted);
}

.beam-inline-form {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.65rem;
}

.beam-tpl-grid {
  margin-top: 0.05rem;
}

.inline-qr-showcase {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 0.88rem;
  align-items: center;
  background: var(--surface-subtle);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 0.82rem;
}

@media (max-width: 380px) {
  .inline-qr-showcase {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 0.68rem;
    padding: 0.68rem;
  }
}

.inline-qr-svg-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  border-radius: 14px;
  padding: 7px;
  border: 1.5px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.2);
  cursor: pointer;
}

.inline-qr-svg-box svg {
  width: 100%;
  height: 100%;
  display: block;
}

.inline-qr-guide strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ink-primary);
  word-break: keep-all;
}

.inline-qr-guide p {
  margin: 0.25rem 0 0.58rem;
  font-size: 0.74rem;
  color: var(--ink-secondary);
  line-height: 1.44;
  word-break: keep-all;
}

.inline-qr-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

/* 모달 8 패스트 빔 3단 그리드 */
.beam-modal-quick3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.46rem;
  margin-bottom: 0.85rem;
}

@media (max-width: 385px) {
  .beam-modal-quick3 {
    grid-template-columns: 1fr;
  }
}

.beam-quick-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.22rem;
  padding: 0.72rem 0.42rem;
  min-height: 76px;
  border-radius: 16px;
  background: var(--surface-subtle);
  border: 1.5px solid var(--hairline-strong);
  color: var(--ink-primary);
  transition: transform 120ms var(--ease-out-strong), border-color 160ms ease;
}

.beam-quick-pill:active {
  transform: scale(0.96);
}

.beam-quick-pill.primary {
  background: linear-gradient(135deg, #07192E 0%, #0369A1 100%);
  color: #FFFFFF;
  border-color: rgba(245, 196, 81, 0.45);
}

.beam-quick-pill strong {
  font-size: 0.76rem;
  font-weight: 800;
  word-break: keep-all;
}

.beam-quick-pill span {
  font-size: 0.65rem;
  opacity: 0.8;
  word-break: keep-all;
}

.modal-beam-number-box {
  background: var(--surface-subtle);
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  padding: 0.82rem;
}

/* 모달 9 기관별 프로필 선택 그리드 */
.mobile-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.segmented-3grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.36rem;
}

/* ============================================================================
 * 모바일 전용 (< 980px): 빈 여백 제로 · 화면 100% 꽉 찬 풀스크린 전자명함 + 6단 슬라이드
 * ============================================================================ */
@media (max-width: 979px) {
  html {
    scroll-snap-type: y proximity;
  }

  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .top-shell,
  .hero-aura-backdrop {
    display: none !important;
  }

  .app-container.atelier-layout {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  /* ── [SLIDE 01] 100svh 풀스크린 엣지-투-엣지 이그제큐티브 모놀리스 ── */
  .atelier-left-stage {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(0.36rem, 1vh, 0.56rem);
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding:
      max(7px, calc(env(safe-area-inset-top, 0px) + 6px))
      11px
      max(7px, calc(env(safe-area-inset-bottom, 0px) + 6px))
      9px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    background:
      radial-gradient(125% 75% at 92% 4%, rgba(245, 196, 81, 0.22) 0%, transparent 55%),
      radial-gradient(100% 70% at 8% 95%, rgba(56, 189, 248, 0.18) 0%, transparent 58%),
      linear-gradient(164deg, #040D1B 0%, #0B2242 48%, #051122 100%);
    color: #F8FAFC;
  }

  html[data-brand="logis"] .atelier-left-stage {
    background:
      radial-gradient(125% 75% at 90% 5%, rgba(245, 196, 81, 0.20) 0%, transparent 54%),
      radial-gradient(100% 70% at 10% 94%, rgba(56, 189, 248, 0.24) 0%, transparent 58%),
      linear-gradient(164deg, #050B1D 0%, #142052 50%, #061026 100%);
  }

  html[data-brand="narami"] .atelier-left-stage {
    background:
      radial-gradient(125% 75% at 90% 5%, rgba(245, 196, 81, 0.21) 0%, transparent 54%),
      radial-gradient(100% 70% at 10% 94%, rgba(16, 185, 129, 0.22) 0%, transparent 58%),
      linear-gradient(164deg, #031611 0%, #08382C 50%, #041914 100%);
  }

  html[data-brand="mill"] .atelier-left-stage {
    background:
      radial-gradient(125% 75% at 90% 5%, rgba(251, 191, 36, 0.26) 0%, transparent 56%),
      linear-gradient(164deg, #190D04 0%, #3C1F0A 50%, #160B03 100%);
  }

  html[data-card-skin="prism"] .atelier-left-stage {
    background:
      radial-gradient(110% 75% at 88% 8%, rgba(192, 132, 252, 0.26) 0%, transparent 56%),
      radial-gradient(110% 75% at 12% 92%, rgba(34, 211, 238, 0.24) 0%, transparent 58%),
      linear-gradient(160deg, #090F22 0%, #1A1947 48%, #093552 100%);
  }

  html[data-card-skin="cotton"] .atelier-left-stage {
    background:
      radial-gradient(120% 70% at 92% 4%, rgba(180, 131, 46, 0.14) 0%, transparent 52%),
      linear-gradient(165deg, #FFFFFF 0%, #F4F7FC 55%, #E8EEF7 100%);
    color: #0F172A;
  }

  .mobile-card-menu-btn {
    display: inline-flex;
  }

  @media (max-width: 440px) {
    .mobile-card-menu-btn span {
      display: none;
    }
    .mobile-card-menu-btn {
      padding: 0.34rem 0.46rem;
    }
  }

  @media (max-width: 480px) {
    .atelier-left-stage .card-skin-dots {
      display: none;
    }
  }

  /* 상단 5대 겸직 직함 스위처 */
  .atelier-left-stage .role-switcher-strip {
    position: relative;
    z-index: 3;
    margin: 0;
    flex-shrink: 0;
  }

  .atelier-left-stage .role-switcher-strip .role-chip-btn {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(245, 196, 81, 0.30);
    color: rgba(248, 250, 252, 0.92);
    padding: 0.36rem 0.78rem;
    font-size: 0.75rem;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .role-switcher-strip .role-chip-btn {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.16);
    color: #334155;
  }

  .atelier-left-stage .role-switcher-strip .role-chip-btn.active {
    background: linear-gradient(135deg, #F7D27A 0%, #D6992A 100%);
    color: #071325;
    border-color: #FEF08A;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(214, 153, 42, 0.38);
  }

  /* 카드 스테이지가 남은 세로 공간을 100% 꽉 채움 */
  .atelier-left-stage .card-stage-3d {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    margin: 0;
  }

  .atelier-left-stage .exec-card-tilt-rig,
  .atelier-left-stage .card-bezel-shell,
  .atelier-left-stage .exec-card-flipper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .atelier-left-stage .card-bezel-shell {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
  }

  .atelier-left-stage .exec-card-face {
    flex: 1 1 auto;
    border-radius: 20px;
    border: 1.3px solid rgba(245, 196, 81, 0.42);
    box-shadow:
      0 22px 48px -16px rgba(0, 0, 0, 0.74),
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 -30px 60px rgba(245, 196, 81, 0.05);
  }

  html[data-card-skin="cotton"] .atelier-left-stage .exec-card-face {
    border-color: rgba(15, 23, 42, 0.16);
    box-shadow: 0 18px 40px -14px rgba(15, 23, 42, 0.18);
  }

  .atelier-left-stage .card-guilloche-watermark {
    width: 330px;
    height: 250px;
    opacity: 0.14;
  }

  /* ── 명함 앞면: 빈 여백 제로 · 4존 풀스크린 매거진 그리드 ── */
  .atelier-left-stage .exec-card-front {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "toprow   toprow   toprow"
      "portrait idmain   idmain"
      "trust    trust    trust"
      "contacts contacts qrbox";
    align-content: space-between;
    column-gap: 0;
    row-gap: clamp(0.54rem, 1.55vh, 0.96rem);
    padding:
      clamp(0.88rem, 2vh, 1.18rem)
      0.96rem
      clamp(0.88rem, 2vh, 1.16rem)
      1.12rem;
  }

  /* [Zone 1] 상단 브랜드 CI + 원부/설정 컨트롤 바 */
  .atelier-left-stage .exec-card-front .card-top-row {
    grid-area: toprow;
    padding-bottom: clamp(0.48rem, 1.2vh, 0.68rem);
    border-bottom: 1px solid rgba(245, 196, 81, 0.20);
  }

  html[data-card-skin="cotton"] .atelier-left-stage .exec-card-front .card-top-row {
    border-bottom-color: rgba(15, 23, 42, 0.10);
  }

  .atelier-left-stage .card-ci-img,
  .atelier-left-stage .card-petals-img,
  .atelier-left-stage .card-jahwal-img {
    height: 22px;
  }

  .atelier-left-stage .card-jahwal-img {
    width: 22px;
  }

  .atelier-left-stage .card-wordmark-dark {
    font-size: 1.08rem;
  }

  .atelier-left-stage .flip-trigger-btn {
    padding: 0.32rem 0.64rem;
    font-size: 0.72rem;
    min-height: 32px;
  }

  /* [Zone 2] 대형 인물 프로필 사진 + 가로 폭 전체를 쓰는 당당한 성함·직함 */
  .atelier-left-stage .card-identity-block {
    display: contents;
  }

  .atelier-left-stage .card-portrait-frame {
    grid-area: portrait;
    align-self: center;
    width: clamp(104px, 29.5vw, 132px);
    height: clamp(134px, 19vh, 172px);
    margin-right: 0.88rem;
    border-radius: 18px;
    border: 2.2px solid rgba(245, 196, 81, 0.85);
    box-shadow:
      0 16px 32px -10px rgba(0, 0, 0, 0.68),
      0 0 0 4px rgba(245, 196, 81, 0.11);
  }

  .atelier-left-stage .portrait-zoom-pill {
    font-size: 0.65rem;
    padding: 0.44rem 0.2rem 0.22rem;
  }

  .atelier-left-stage .card-identity-main {
    grid-area: idmain;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .atelier-left-stage .card-serial-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.015em;
  }

  .atelier-left-stage .card-verified-pill {
    font-size: 0.64rem;
    padding: 0.08rem 0.46rem;
  }

  .atelier-left-stage .card-org-name {
    font-size: clamp(0.88rem, 3.6vw, 1.02rem);
    font-weight: 800;
    margin-top: 0.1rem;
    margin-bottom: 0.14rem;
    white-space: normal;
  }

  .atelier-left-stage .card-person-name {
    font-size: clamp(1.88rem, 7.6vw, 2.34rem);
    letter-spacing: 0.06em;
    line-height: 1.12;
  }

  .atelier-left-stage .card-person-name.is-long-title {
    font-size: clamp(1.32rem, 5.2vw, 1.62rem);
    letter-spacing: -0.02em;
  }

  .atelier-left-stage .card-person-sub {
    font-size: 0.9rem;
  }

  .atelier-left-stage .card-role-title {
    font-size: clamp(0.88rem, 3.65vw, 1.02rem);
    margin-top: 0.28rem;
    line-height: 1.28;
  }

  .atelier-left-stage .card-dept-line {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    font-size: clamp(0.73rem, 2.95vw, 0.81rem);
    line-height: 1.42;
    margin-top: 0.24rem;
    opacity: 0.92;
  }

  /* [Zone 3] 3대 공인 수상·매출·수행실적 건축적 헤어라인 원장 밴드 (중첩 박스 제로) */
  .atelier-left-stage .card-trust-proof-strip {
    grid-area: trust;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: clamp(0.52rem, 1.25vh, 0.74rem) 0;
    background: transparent !important;
    border-top: 1px solid rgba(226, 185, 100, 0.28) !important;
    border-bottom: 1px solid rgba(226, 185, 100, 0.28) !important;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .card-trust-proof-strip {
    border-top-color: rgba(17, 24, 39, 0.13) !important;
    border-bottom-color: rgba(17, 24, 39, 0.13) !important;
  }

  .atelier-left-stage .trust-proof-item {
    min-height: 0;
    padding: 0.16rem 0.28rem;
    border-radius: 0;
    gap: 0.18rem;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .atelier-left-stage .trust-proof-item + .trust-proof-item {
    border-left: 1px solid rgba(226, 185, 100, 0.22) !important;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .trust-proof-item {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .trust-proof-item + .trust-proof-item {
    border-left-color: rgba(17, 24, 39, 0.12) !important;
  }

  .atelier-left-stage .trust-kpi-head {
    font-size: clamp(0.84rem, 3.55vw, 0.98rem);
    font-weight: 800;
  }

  .atelier-left-stage .trust-kpi-sub {
    font-size: clamp(0.64rem, 2.65vw, 0.72rem);
  }

  /* [Zone 4] 좌측 직통 타이포 원장 + 우측 세로 헤어라인 분리 순백 QR 패스 */
  .atelier-left-stage .card-contact-footer {
    grid-area: contacts;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.28rem, 0.78vh, 0.44rem);
    padding: 0.2rem 0.62rem 0.2rem 0.08rem;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: clamp(0.76rem, 3.15vw, 0.84rem);
  }

  html[data-card-skin="cotton"] .atelier-left-stage .card-contact-footer {
    background: transparent;
    border-color: transparent;
  }

  .atelier-left-stage #card-mobile-line {
    font-size: clamp(0.84rem, 3.5vw, 0.94rem);
    font-weight: 800;
    color: #FDE68A;
  }

  html[data-card-skin="cotton"] .atelier-left-stage #card-mobile-line {
    color: #0369A1;
  }

  .atelier-left-stage .card-contact-footer .full-span {
    font-size: clamp(0.69rem, 2.8vw, 0.75rem);
    line-height: 1.32;
  }

  .atelier-left-stage .card-contact-footer .full-span span {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .atelier-left-stage .card-mini-qr-wrap {
    grid-area: qrbox;
    align-self: stretch;
    justify-content: center;
    margin-left: 0.16rem;
    padding: 0.16rem 0.06rem 0.12rem 0.7rem;
    border-radius: 0;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(226, 185, 100, 0.24);
    gap: 0.24rem;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .card-mini-qr-wrap {
    background: transparent;
    border-left-color: rgba(17, 24, 39, 0.13);
  }

  .atelier-left-stage .card-mini-qr-box {
    width: clamp(74px, 21vw, 92px);
    height: clamp(74px, 21vw, 92px);
    border-radius: 12px;
    padding: 4.5px;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.42);
  }

  .atelier-left-stage .card-mini-qr-label {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }

  /* ── 명함 뒷면(공공기관 법인원부): 빈 공간 없이 꽉 찬 카드형 스펙 시트 + 중앙 대형 QR ── */
  .atelier-left-stage .exec-card-back {
    padding: clamp(0.95rem, 2.1vh, 1.25rem) 1.05rem clamp(0.9rem, 2vh, 1.15rem) 1.15rem;
    justify-content: space-between;
  }

  .atelier-left-stage .exec-card-back .back-grid {
    grid-template-columns: 1fr;
    gap: clamp(0.55rem, 1.5vh, 0.9rem);
    margin: auto 0;
  }

  .atelier-left-stage .exec-card-back .back-spec-dl {
    display: grid;
    gap: clamp(0.32rem, 0.9vh, 0.5rem);
  }

  .atelier-left-stage .exec-card-back .back-spec-dl > div {
    padding: clamp(0.38rem, 1vh, 0.54rem) 0.65rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.10);
    font-size: 0.77rem;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .exec-card-back .back-spec-dl > div {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.10);
  }

  .atelier-left-stage .exec-card-back .back-spec-dl dd {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }

  .atelier-left-stage .exec-card-back .back-qr-large {
    width: clamp(92px, 13.5vh, 120px);
    height: clamp(92px, 13.5vh, 120px);
    margin: 0 auto;
    border-radius: 14px;
    padding: 6px;
  }

  /* 소형 스마트폰(360x800 이하) 및 짧은 화면 비례 자동 최적화 */
  @media (max-width: 374px), (max-height: 760px) {
    .atelier-left-stage .exec-card-front {
      row-gap: 0.46rem;
      padding: 0.78rem 0.84rem 0.78rem 0.96rem;
    }
    .atelier-left-stage .card-portrait-frame {
      width: 94px;
      height: 120px;
      margin-right: 0.72rem;
    }
    .atelier-left-stage .card-person-name {
      font-size: 1.68rem;
    }
    .atelier-left-stage .trust-proof-item {
      min-height: 0;
      padding: 0.12rem 0.18rem;
    }
    .atelier-left-stage .card-mini-qr-box {
      width: 68px;
      height: 68px;
    }
  }

  /* [Zone 5] 하단 일체형 골드 메탈 & 로열 글래스 커맨드 도크 */
  .atelier-left-stage .primary-cta-row {
    position: relative;
    z-index: 3;
    margin: 0;
    gap: 0.44rem;
    grid-template-columns: 1fr 1.06fr;
  }

  .atelier-left-stage .btn-save-vcard {
    background: linear-gradient(135deg, #F8D88B 0%, #DCA642 54%, #B98220 100%);
    color: #071325;
    border: 1px solid #FEF08A;
    box-shadow: 0 12px 24px -10px rgba(220, 166, 66, 0.58);
    min-height: clamp(47px, 6vh, 54px);
    font-size: 0.84rem;
    border-radius: 16px;
  }

  .atelier-left-stage .btn-save-vcard .cta-icon-circle {
    background: rgba(7, 19, 37, 0.14);
    color: #071325;
  }

  .atelier-left-stage .btn-open-send-hub {
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #FFFFFF;
    border: 1.2px solid rgba(245, 196, 81, 0.48);
    box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.48);
    min-height: clamp(47px, 6vh, 54px);
    font-size: 0.83rem;
    border-radius: 16px;
  }

  .atelier-left-stage .btn-open-send-hub .cta-icon-circle {
    background: rgba(245, 196, 81, 0.22);
    color: #FDE68A;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .btn-save-vcard {
    background: linear-gradient(135deg, #0B2545 0%, #0369A1 100%);
    color: #FFFFFF;
    border-color: transparent;
  }
  html[data-card-skin="cotton"] .atelier-left-stage .btn-save-vcard .cta-icon-circle {
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
  }
  html[data-card-skin="cotton"] .atelier-left-stage .btn-open-send-hub {
    background: #FFFFFF;
    color: #0F172A;
    border-color: rgba(3, 105, 161, 0.35);
  }
  html[data-card-skin="cotton"] .atelier-left-stage .btn-open-send-hub .cta-icon-circle {
    background: rgba(3, 105, 161, 0.12);
    color: #0369A1;
  }

  .atelier-left-stage .quick-contact-matrix {
    position: relative;
    z-index: 3;
    margin: 0;
    gap: 0.38rem;
  }

  .atelier-left-stage .quick-action-tile {
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #F1F5F9;
    min-height: clamp(52px, 6.8vh, 62px);
    padding: 0.42rem 0.18rem;
    border-radius: 15px;
    box-shadow: none;
  }

  .atelier-left-stage .tile-icon-badge {
    width: 30px;
    height: 30px;
    background: rgba(245, 196, 81, 0.16);
    color: #F5C451;
  }

  html[data-card-skin="cotton"] .atelier-left-stage .quick-action-tile {
    background: #FFFFFF;
    border-color: rgba(15, 23, 42, 0.12);
    color: #1E293B;
  }
  html[data-card-skin="cotton"] .atelier-left-stage .tile-icon-badge {
    background: rgba(3, 105, 161, 0.10);
    color: #0369A1;
  }

  .atelier-left-stage .live-insight-pillbar {
    display: none;
  }

  .hero-slide-down-cue {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.36rem;
    width: 100%;
    margin: 0;
    padding: 0.3rem 0.65rem;
    min-height: 32px;
    background: rgba(245, 196, 81, 0.09);
    border: 1px solid rgba(245, 196, 81, 0.24);
    border-radius: 999px;
    color: #FDE68A;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  html[data-card-skin="cotton"] .hero-slide-down-cue {
    background: rgba(3, 105, 161, 0.08);
    border-color: rgba(3, 105, 161, 0.22);
    color: #0369A1;
  }

  .slide-cue-chevron {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: gentleCueFloat 2.1s ease-in-out infinite;
  }

  @keyframes gentleCueFloat {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(3px); opacity: 1; }
  }

  /* ── [SLIDE 02 ~ 06] 아래로 슬라이드하면 펼쳐지는 풀스크린 챕터 화면들 ── */
  .atelier-right-workbench {
    width: 100%;
    background: var(--bg-canvas);
  }

  .atelier-right-workbench .tab-panel.slide-section {
    display: block !important;
    min-height: 100svh;
    scroll-snap-align: start;
    padding: 4.7rem 0.86rem 1.9rem;
    max-width: 580px;
    margin: 0 auto;
    border-bottom: 1px solid var(--hairline-strong);
    animation: none;
  }

  .mobile-slide-chapter-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.55rem;
    margin-bottom: 0.82rem;
    padding-bottom: 0.58rem;
    border-bottom: 1.5px solid var(--hairline-strong);
  }

  .slide-step-pill {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--brand-gold);
    margin-bottom: 0.14rem;
  }

  .slide-chapter-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    color: var(--ink-primary);
    letter-spacing: -0.02em;
    word-break: keep-all;
  }

  .slide-back-hero-btn {
    flex-shrink: 0;
    background: var(--surface);
    color: var(--ink-primary);
    border: 1px solid var(--hairline-strong);
    border-radius: 999px;
    padding: 0.34rem 0.68rem;
    min-height: 32px;
    font-size: 0.71rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: var(--shadow-surface);
  }

  .slide-back-hero-btn:active {
    transform: scale(0.95);
  }

  .mobile-mini-card-bar {
    display: flex !important;
    position: fixed;
    top: max(6px, env(safe-area-inset-top, 0px));
    left: 0.65rem;
    right: 0.65rem;
    width: auto;
    margin: 0 auto;
    z-index: 58;
    background: var(--tabbar-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-130%);
    transition: opacity 200ms var(--ease-out-strong), transform 220ms var(--ease-out-strong);
  }

  body.is-past-hero .mobile-mini-card-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .mobile-app-tabbar {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding: 0.24rem 0.28rem calc(0.34rem + env(safe-area-inset-bottom, 0px));
    gap: 0.08rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(115%);
    transition: opacity 200ms var(--ease-out-strong), transform 220ms var(--ease-out-strong);
  }

  body.is-past-hero .mobile-app-tabbar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .m-tab-item,
  .m-tab-hero-return {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    padding: 0.32rem 0.06rem 0.2rem;
    min-height: 46px;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.16rem;
    font-size: 0.64rem;
    font-weight: 700;
    white-space: nowrap;
    transition: color 150ms ease, transform 120ms var(--ease-out-strong);
  }

  .m-tab-hero-return {
    color: var(--brand-gold);
    font-weight: 800;
  }

  .m-tab-hero-return:active {
    transform: scale(0.93);
  }

  .mobile-slide-dots {
    position: fixed;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 5px 2.5px;
    border-radius: 999px;
    background: rgba(6, 17, 32, 0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .slide-dot-btn {
    width: 5px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    transform: scaleY(0.34);
    transform-origin: center center;
    transition: transform 200ms var(--ease-out-strong), background-color 180ms ease;
  }

  .slide-dot-btn.active {
    transform: scaleY(1);
    background: #F5C451;
  }
}

/* ============================================================================
 * v9.0 STUDIO MONOGRAPH & PHYSICAL CARD ATELIER (AI-SLOP ZERO · EMIL MOTION)
 * - 상단 잘린 네이비 띠 제거 · 전체 뷰포트 일체형 아키텍처 페이퍼(#F4F2ED) / 오브시디언(#0B0D12)
 * - 카드 속 카드(Card-in-Card) 3중 중첩 완전 해체 → 1px 헤어라인 에디토리얼 원장(Ledger)
 * - 알약(Pill) 버튼 남발 제거 → GPU 슬라이딩 언더라인 탭(translate3d + scaleX)
 * - 모션사이트 Text-Roll CTA(translateY(-100%)) + 중단 가능한(Interruptible) 바텀시트 물리
 * ============================================================================ */
html,
html[data-theme="signature"] {
  --bg-canvas: #F4F2ED;
  --surface: #FAF9F6;
  --surface-elevated: #FCFBF9;
  --surface-subtle: rgba(22, 21, 19, 0.032);
  --surface-tinted: rgba(22, 21, 19, 0.025);
  --ink-primary: #161513;
  --ink-secondary: #4E4A44;
  --ink-muted: #7C756C;
  --hairline: rgba(22, 21, 19, 0.08);
  --hairline-strong: rgba(22, 21, 19, 0.14);
  --brand-accent: #0E243E;
  --brand-accent-strong: #081729;
  --brand-accent-soft: rgba(14, 36, 62, 0.07);
  --brand-accent-border: rgba(14, 36, 62, 0.22);
  --brand-gold: #8E6824;
  --brand-gold-soft: rgba(142, 104, 36, 0.11);
  --input-bg: #FCFBF9;
}

html[data-theme="obsidian"] {
  --bg-canvas: #0B0D12;
  --surface: #12161F;
  --surface-elevated: #151A25;
  --surface-subtle: rgba(244, 241, 234, 0.038);
  --surface-tinted: rgba(244, 241, 234, 0.028);
  --ink-primary: #F4F1EA;
  --ink-secondary: #B4AEA3;
  --ink-muted: #7F7A70;
  --hairline: rgba(244, 241, 234, 0.09);
  --hairline-strong: rgba(244, 241, 234, 0.15);
  --brand-accent: #8EC5F5;
  --brand-accent-strong: #BAE0FF;
  --brand-accent-soft: rgba(142, 197, 245, 0.12);
  --brand-accent-border: rgba(142, 197, 245, 0.28);
  --brand-gold: #D6B06A;
  --brand-gold-soft: rgba(214, 176, 106, 0.14);
  --input-bg: #11151E;
}

.page-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

::selection {
  background: rgba(142, 104, 36, 0.20);
  color: inherit;
}

input,
textarea,
select {
  caret-color: var(--brand-gold);
  border-radius: 6px;
  border-width: 1px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* ── GPU 합성 전용 슬라이딩 탭 언더라인 인디케이터 ── */
.sliding-tab-indicator {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100px;
  height: 2px;
  background: var(--ink-primary);
  transform-origin: left center;
  transform: translate3d(0, 0, 0) scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 240ms cubic-bezier(0.23, 1, 0.32, 1),
    opacity 160ms ease;
  will-change: transform;
}

html[data-theme="obsidian"] .sliding-tab-indicator {
  background: var(--brand-gold);
}

/* ── 모션사이트 Text-Roll 듀얼 레이어 버튼 모션 ── */
.cta-roll-viewport {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.28em;
  line-height: 1.28;
  vertical-align: middle;
}

.cta-roll-track {
  display: flex;
  flex-direction: column;
  transform: translate3d(0, 0, 0);
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.cta-roll-track > span {
  display: block;
  height: 1.28em;
  line-height: 1.28;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .has-text-roll:hover .cta-roll-track {
    transform: translate3d(0, -50%, 0);
  }
}

.btn-save-vcard,
.btn-open-send-hub {
  position: relative;
  overflow: hidden;
  transition:
    transform 120ms cubic-bezier(0.23, 1, 0.32, 1),
    background-color 180ms ease,
    border-color 180ms ease;
}

.btn-save-vcard:active,
.btn-open-send-hub:active {
  transform: scale(0.975);
}

.cta-icon-circle {
  transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
  .btn-save-vcard:hover .cta-icon-circle,
  .btn-open-send-hub:hover .cta-icon-circle {
    transform: translate3d(2px, 0, 0);
  }
}

/* ── 데스크톱 & 울트라와이드 아키텍처 모노그래프 (>= 980px) ── */
@media (min-width: 980px) {
  body {
    padding-bottom: 0;
    background: var(--bg-canvas);
  }

  /* 단일 1줄 아키텍처 상단 헤더 (네이비 박스 제거 · 종이 캔버스 일체형) */
  .top-shell {
    background: rgba(244, 242, 237, 0.90);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline-strong);
  }

  html[data-theme="obsidian"] .top-shell {
    background: rgba(11, 13, 18, 0.90);
  }

  .top-bar-inner {
    max-width: 1520px;
    height: 62px;
    padding: 0 clamp(24px, 3.4vw, 52px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
  }

  .brand-home-link {
    color: var(--ink-primary);
    gap: 0.6rem;
  }

  .ci-wordmark-hero {
    color: var(--ink-primary);
    font-size: 1.06rem;
    letter-spacing: -0.025em;
  }

  .brand-divider {
    background: var(--hairline-strong);
    height: 14px;
  }

  .brand-edition-tag {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    color: var(--ink-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  /* 중앙 통합 타이포그래피 프로필 네비게이션 (알약 제거 · 슬라이딩 언더라인) */
  .profile-strip-wrap {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 0;
    height: 62px;
    display: flex;
    align-items: stretch;
    justify-self: center;
  }

  .profile-strip {
    display: flex;
    align-items: stretch;
    gap: 1.45rem;
    overflow-x: auto;
  }

  .profile-chip {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0.15rem;
    height: 62px;
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-muted);
    transition: color 160ms ease;
  }

  .profile-chip.active {
    color: var(--ink-primary);
    font-weight: 800;
  }

  .profile-chip:active {
    transform: none;
  }

  /* 우측 절제된 텍스트 유틸리티 컨트롤 (알약 테두리 제거) */
  .top-actions {
    gap: 0.25rem;
  }

  .ghost-pill-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--ink-secondary);
    padding: 0.32rem 0.56rem;
    min-height: 30px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 150ms ease, background-color 150ms ease, transform 120ms var(--ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    .profile-chip:not(.active):hover {
      color: var(--ink-primary);
    }
    .ghost-pill-btn:hover {
      background: var(--surface-subtle);
      color: var(--ink-primary);
    }
  }

  /* 1520px 와이드 2단 에디토리얼 그리드 + 1px 수직 아키텍처 구분선 */
  .app-container.atelier-layout {
    max-width: 1520px;
    padding: 0 clamp(24px, 3.4vw, 52px);
    display: grid;
    grid-template-columns: 468px minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .atelier-left-stage {
    position: sticky;
    top: 62px;
    align-self: start;
    padding: 2rem 2.75rem 2.6rem 0;
    border-right: 1px solid var(--hairline-strong);
    min-height: calc(100vh - 62px);
  }

  .atelier-right-workbench {
    padding: 1.55rem 0 4.5rem 3.1rem;
    min-width: 0;
  }

  /* 좌측 겸직 직함 선택바: 노란/남색 2줄 알약 제거 → 정갈한 에디토리얼 직함 인덱스 */
  .role-switcher-strip {
    margin-bottom: 1.05rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--hairline-strong);
  }

  .role-pills-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem 0.9rem;
    padding: 0;
  }

  .role-switcher-strip .role-chip-btn {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.18rem 0 !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: var(--ink-muted) !important;
    position: relative;
    transition: color 150ms ease;
  }

  .role-switcher-strip .role-chip-btn.active {
    color: var(--ink-primary) !important;
    font-weight: 800 !important;
  }

  .role-switcher-strip .role-chip-btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1.5px;
    background: var(--brand-gold);
  }

  @media (hover: hover) and (pointer: fine) {
    .role-switcher-strip .role-chip-btn:not(.active):hover {
      color: var(--ink-primary) !important;
    }
  }

  /* 좌측 실물 명함 아티팩트 마감 정제 (유일한 실물 카드 오브제) */
  .card-stage-3d {
    margin-bottom: 1.05rem;
  }

  .card-bezel-shell {
    padding: 0;
    background: transparent !important;
    border: none !important;
    border-radius: 14px;
  }

  .exec-card-flipper,
  .exec-card-face {
    min-height: 274px;
    border-radius: 14px;
    padding: 1.18rem 1.25rem 1.08rem 1.38rem;
  }

  .card-portrait-frame {
    border-radius: 8px;
    border-width: 1px;
  }

  .card-skin-dots {
    border-radius: 5px;
    padding: 2px;
  }

  .skin-dot-btn {
    border-radius: 3px;
    padding: 0.16rem 0.44rem;
  }

  .flip-trigger-btn {
    border-radius: 5px;
  }

  .card-verified-pill {
    border-radius: 4px;
  }

  /* 좌측 하단 CTA & 4분할 헤어라인 연락처 스트립 (둥근 알약·개별 흰색 카드 제거) */
  .primary-cta-row {
    gap: 0.55rem;
    margin-bottom: 0.85rem;
  }

  .primary-cta-row .btn-save-vcard,
  .primary-cta-row .btn-open-send-hub {
    border-radius: 6px;
    min-height: 46px;
    padding: 0.62rem 0.92rem;
    font-size: 0.83rem;
  }

  .primary-cta-row .btn-save-vcard {
    background: var(--ink-primary);
    color: var(--bg-canvas);
    border: 1px solid var(--ink-primary);
    box-shadow: none;
  }

  .primary-cta-row .btn-save-vcard .cta-icon-circle {
    background: rgba(255, 255, 255, 0.14);
    color: currentColor;
    border-radius: 4px;
  }

  html[data-theme="obsidian"] .primary-cta-row .btn-save-vcard .cta-icon-circle {
    background: rgba(11, 13, 18, 0.14);
  }

  .primary-cta-row .btn-open-send-hub {
    background: transparent;
    color: var(--ink-primary);
    border: 1px solid var(--hairline-strong);
    box-shadow: none;
  }

  .primary-cta-row .btn-open-send-hub .cta-icon-circle {
    background: var(--surface-subtle);
    color: var(--ink-primary);
    border-radius: 4px;
  }

  .quick-contact-matrix {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--hairline-strong);
    border-bottom: 1px solid var(--hairline-strong);
    margin-bottom: 0.85rem;
  }

  .quick-action-tile {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.65rem 0.25rem;
    gap: 0.28rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--ink-secondary);
    transition: background-color 150ms ease, color 150ms ease;
  }

  .quick-action-tile + .quick-action-tile {
    border-left: 1px solid var(--hairline-strong);
  }

  .quick-action-tile .tile-icon-badge {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--ink-primary);
  }

  @media (hover: hover) and (pointer: fine) {
    .quick-action-tile:hover {
      background: var(--surface-subtle);
      color: var(--ink-primary);
      transform: none;
    }
    .quick-action-tile:hover .tile-icon-badge {
      transform: translate3d(0, -1px, 0);
    }
  }

  .live-insight-pillbar {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0.15rem 0;
    justify-content: flex-start;
    font-size: 0.73rem;
    color: var(--ink-muted);
  }
}

/* ── 우측 에디토리얼 모노그래프 & 슬라이드 2~6 공통 탈(脫)박스 아키텍처 ── */
.section-tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1.65rem;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-bottom: 1px solid var(--hairline-strong);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0.5rem;
}

.nav-tab-btn {
  background: transparent !important;
  box-shadow: none !important;
  border: none;
  border-radius: 0;
  padding: 0.65rem 0.1rem 0.78rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-muted);
  transition: color 160ms ease;
}

.nav-tab-btn.active {
  color: var(--ink-primary) !important;
  font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
  .nav-tab-btn:not(.active):hover {
    color: var(--ink-primary);
  }
}

.tab-panel.active {
  animation: none;
}

/* 우측 모든 챕터에서 흰색 둥근 외곽 카드(.surface-card) 완전 해체 → 1px 구분선 챕터 */
.atelier-right-workbench .surface-card,
.atelier-right-workbench .legal-basis-banner,
.atelier-right-workbench .exec-dossier-card,
.atelier-right-workbench .super-launcher-card,
.atelier-right-workbench .beam-hub-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.85rem 0 !important;
  margin: 0 !important;
}

.atelier-right-workbench .tab-panel > .surface-card:last-child {
  border-bottom: none !important;
}

.atelier-right-workbench .surface-body-pad {
  padding: 1.15rem 0 0 !important;
}

.atelier-right-workbench .profile-hero-banner,
.atelier-right-workbench .corp-hero-banner {
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
}

.hero-overlay-badge,
.corp-pill-gold,
.corp-pill-cyan,
.corp-pill-glass,
.video-cat-pill {
  border-radius: 3px !important;
}

/* 반복 알약 배지(.verified-period-tag) → 절제된 우측 아카이브 주석 텍스트 */
.verified-period-tag {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--ink-muted) !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
}

.surface-card-title {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0.15rem 0 0.65rem;
}

.dossier-mini-portrait {
  border-radius: 6px;
  border-width: 1px;
}

/* 발문 인용구: 베이지 박스 제거 → 좌측 2px 브라스 수직선 + 고운바탕 에디토리얼 리드 */
.editorial-tagline {
  background: transparent;
  border: none;
  border-left: 2px solid var(--brand-gold);
  border-radius: 0;
  padding: 0.08rem 0 0.08rem 1rem;
  margin: 0.85rem 0 1.25rem;
  font-family: var(--font-serif-kr);
  font-size: 0.92rem;
  line-height: 1.78;
  color: var(--ink-primary);
}

/* 4대 핵심 수치: 4개 베이지 박스 제거 → 1px 상하·수직 분할선 정밀 수치 원장 */
.kpi-bento-4grid,
.corp-mini-stats {
  gap: 0 !important;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
  background: transparent !important;
  border-radius: 0 !important;
  margin: 1rem 0 1.35rem !important;
}

.kpi-bento-cell,
.corp-mini-stats > div {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.92rem 0.95rem !important;
}

.kpi-bento-cell:first-child,
.corp-mini-stats > div:first-child {
  padding-left: 0.15rem !important;
}

@media (min-width: 640px) {
  .kpi-bento-cell + .kpi-bento-cell,
  .corp-mini-stats > div + div {
    border-left: 1px solid var(--hairline-strong) !important;
  }
}

@media (max-width: 639px) {
  .kpi-bento-cell:nth-child(2n),
  .corp-mini-stats > div:nth-child(2n) {
    border-left: 1px solid var(--hairline-strong) !important;
  }
  .kpi-bento-cell:nth-child(-n+2),
  .corp-mini-stats > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--hairline-strong) !important;
  }
}

.kpi-num {
  font-family: var(--font-serif-en), var(--font-sans);
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.kpi-unit {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-gold);
}

/* 세부 이력 서브탭 & 기업 필터바: 회색 알약 트레이 제거 → 1px 언더라인 + GPU 슬라이딩 바 */
.dossier-subtabs,
.company-filter-bar {
  position: relative;
  display: flex !important;
  align-items: stretch;
  gap: 1.5rem !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0.85rem !important;
}

.dossier-subtab,
.company-filter-pill {
  flex: 0 0 auto;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.52rem 0.08rem 0.66rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: var(--ink-muted) !important;
  transition: color 150ms ease;
}

.dossier-subtab.active,
.company-filter-pill.active {
  color: var(--ink-primary) !important;
  font-weight: 800 !important;
}

/* 연보 · 창업 5개사 · 수상 · 증빙서류 · 견적 품목 · 명함첩 · 사업부: 베이지 박스 제거 → 1px 원장 행 */
.timeline-compact-list {
  gap: 0;
  border-top: 1px solid var(--hairline);
}

.tl-row {
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 1rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 0.82rem 0.15rem;
}

@media (max-width: 460px) {
  .tl-row {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }
}

.founded-5grid,
.awards-2col,
.corp-division-grid,
.network-directory-grid {
  gap: 0 !important;
  border-top: 1px solid var(--hairline-strong);
}

.founded-item,
.award-pill-box,
.corp-div-item,
.network-dir-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.88rem 0.65rem 0.88rem 0.15rem !important;
}

@media (min-width: 640px) {
  .founded-item:nth-child(2n),
  .award-pill-box:nth-child(2n),
  .corp-div-item:nth-child(2n),
  .network-dir-item:nth-child(2n) {
    border-left: 1px solid var(--hairline-strong) !important;
    padding-left: 1rem !important;
  }
}

.award-year,
.dir-tag,
.vault-doc-badge,
.wallet-tag-badge {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: var(--brand-gold) !important;
  letter-spacing: 0.02em;
}

.license-strip-box,
.corp-meta-strip,
.quote-custom-box,
.inline-qr-showcase,
.instant-2field-box {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--hairline-strong) !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  padding: 0.88rem 0.15rem !important;
}

.highlights-ledger {
  gap: 0 !important;
  border-top: 1px solid var(--hairline);
}

.highlight-ledger-row,
.vault-doc-item,
.quote-item-row,
.wallet-contact-row {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.78rem 0.15rem !important;
}

.vault-doc-grid,
.quote-items-list,
.saved-wallet-list {
  gap: 0 !important;
  border-top: 1px solid var(--hairline-strong);
}

/* 6대 스마트 비즈니스 도구 & 3대 무선 빔 그리드: 1px 스위스 매트릭스 격자 */
.super-6grid,
.beam-3grid {
  gap: 1px !important;
  background: var(--hairline-strong) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
}

.super-tool-tile,
.beam-method-tile {
  background: var(--bg-canvas) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.86rem 0.92rem !important;
  color: var(--ink-primary) !important;
  transition: background-color 150ms ease, transform 120ms var(--ease-out);
}

.beam-method-tile.primary-beam {
  background: var(--surface) !important;
}

.beam-method-tile.primary-beam .beam-method-texts strong {
  color: var(--ink-primary);
}

.beam-method-tile.primary-beam .beam-method-texts span {
  color: var(--ink-secondary);
}

.super-tile-ico,
.beam-method-ico {
  border-radius: 6px !important;
  background: var(--surface-subtle) !important;
  color: var(--ink-primary) !important;
  border: 1px solid var(--hairline-strong) !important;
}

@media (hover: hover) and (pointer: fine) {
  .super-tool-tile:hover,
  .beam-method-tile:hover,
  .network-dir-item:hover,
  .vault-doc-item:hover {
    background: var(--surface) !important;
    transform: none !important;
  }
}

/* 액션 버튼군: 알약(999px) 제거 → 정돈된 5px~6px 건축적 모서리 */
.btn-small-action,
.corp-sublink-chip,
.btn-corp-primary,
.btn-smart-capture,
.role-chip-btn,
.peer-tag-chip,
.quote-total-banner,
.full-width-cta {
  border-radius: 6px !important;
}

/* 영상 브리핑: 외곽 박스 제거 → 16:9 에디토리얼 플레이트 + 하단 무테 캡션 */
.video-thumb-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.video-thumb-media {
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
}

.video-thumb-meta {
  padding: 0.56rem 0.08rem 0.25rem !important;
}

/* ── 히어로 5단계 입장 시퀀스 & 명함 대각선 포일 스위프 ── */
html.motion-armed [data-hero-step] {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

html.motion-armed [data-hero-step].is-in {
  animation: heroEditorialRise 460ms var(--ease-out) forwards;
}

html.motion-armed [data-hero-step="1"].is-in { animation-delay: 0ms; }
html.motion-armed [data-hero-step="2"].is-in { animation-delay: 45ms; }
html.motion-armed [data-hero-step="3"].is-in { animation-delay: 95ms; }
html.motion-armed [data-hero-step="4"].is-in { animation-delay: 140ms; }
html.motion-armed [data-hero-step="5"].is-in { animation-delay: 185ms; }

@keyframes heroEditorialRise {
  0% {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.card-load-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    112deg,
    transparent 24%,
    rgba(245, 212, 135, 0.04) 41%,
    rgba(255, 245, 214, 0.19) 50%,
    rgba(245, 212, 135, 0.04) 59%,
    transparent 76%
  );
  transform: translate3d(-135%, 0, 0);
  opacity: 0;
}

.card-load-sweep.is-sweeping {
  animation: cardFoilSweep 860ms var(--ease-expo) forwards;
}

@keyframes cardFoilSweep {
  0% { transform: translate3d(-135%, 0, 0); opacity: 0; }
  20% { opacity: 1; }
  85% { opacity: 0.85; }
  100% { transform: translate3d(135%, 0, 0); opacity: 0; }
}

.card-meta-item.copyable-meta.is-copied {
  animation: copiedMetaFlash 520ms var(--ease-out);
}

@keyframes copiedMetaFlash {
  0% { background-color: rgba(245, 212, 135, 0.28); transform: scale(0.985); }
  50% { background-color: rgba(245, 212, 135, 0.16); transform: scale(1); }
  100% { background-color: transparent; transform: scale(1); }
}

/* ── 스크롤 스태거 리빌 ── */
.reveal-ready {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 380ms var(--ease-out),
    transform 380ms var(--ease-out);
  transition-delay: calc(var(--stagger-idx, 0) * 42ms);
}

.reveal-ready.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ── 100% 중단 가능한(Interruptible) 바텀시트 & 토스트 트랜지션 물리 ── */
.sheet-backdrop {
  display: flex !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 200ms ease,
    visibility 0s linear 200ms;
}

.sheet-backdrop .bottom-sheet {
  animation: none !important;
  border-radius: 16px 16px 0 0;
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition:
    transform 180ms var(--ease-out),
    opacity 170ms ease;
}

@media (min-width: 640px) {
  .sheet-backdrop .bottom-sheet {
    border-radius: 14px;
  }
}

.sheet-backdrop.open:not(.is-closing) {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity 220ms ease,
    visibility 0s linear 0s;
}

.sheet-backdrop.open:not(.is-closing) .bottom-sheet {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    transform 250ms var(--ease-drawer),
    opacity 200ms ease;
}

.sheet-backdrop.is-closing {
  visibility: visible;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 175ms ease,
    visibility 0s linear 175ms;
}

.sheet-backdrop.is-closing .bottom-sheet {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(0.985);
  transition:
    transform 175ms var(--ease-out),
    opacity 165ms ease;
}

.wssc-toast {
  border-radius: 8px;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translate3d(-50%, 12px, 0) scale(0.98);
  transition:
    opacity 190ms var(--ease-out),
    transform 190ms var(--ease-out);
}

@media (max-width: 979px) {
  .wssc-toast {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

.wssc-toast.show {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

/* ── v9.0 마이크로 폴리싱: 울트라와이드 비례 · 잔여 알약/박스 제거 · 모바일 슬라이드 레일 정밀화 ── */
@media (min-width: 1700px) {
  .top-shell .top-bar-inner {
    max-width: 1680px;
  }
  .app-container.atelier-layout {
    max-width: 1680px;
    grid-template-columns: 492px minmax(0, 1fr);
    padding: 0 2.6rem 5.5rem;
  }
  .atelier-right-workbench {
    padding: 2.35rem 0 1.5rem 3.4rem;
  }
}

.atelier-right-workbench .btn-open-send-hub,
.btn-back-to-card,
.mini-hdr-btn {
  border-radius: 6px !important;
  box-shadow: none !important;
}

.autosave-check-bar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0.35rem 0.05rem !important;
}

.wallet-empty-box {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--hairline-strong) !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  border-radius: 0 !important;
  padding: 1.15rem 0.15rem !important;
  text-align: left !important;
}

.atelier-colophon-bar {
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.76rem;
  color: var(--ink-muted);
  letter-spacing: -0.005em;
}

.atelier-colophon-links {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.atelier-colophon-links a {
  color: var(--ink-secondary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}

.atelier-colophon-links a:hover {
  color: var(--ink-primary);
  border-bottom-color: var(--ink-primary);
}

@media (max-width: 979px) {
  .mobile-mini-card-bar,
  .mobile-sticky-mini-header {
    border-radius: 8px !important;
    border: 1px solid var(--hairline-strong) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
  }

  .mobile-slide-dots,
  .mobile-slide-rail {
    right: 2px !important;
    padding: 2px 1px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .atelier-right-workbench {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-armed [data-hero-step],
  html.motion-armed [data-hero-step].is-in,
  .reveal-ready,
  .reveal-ready.is-revealed {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .sliding-tab-indicator,
  .cta-roll-track,
  .slide-cue-chevron,
  .card-load-sweep.is-sweeping,
  .sheet-backdrop,
  .sheet-backdrop .bottom-sheet,
  .wssc-toast {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================================================
 * v9.1 에디토리얼 비주얼 확장 — ㈜웰쉐어로지스 공식 홍보관 · 통통허브(ttong.kr) 실시간 데이터 · 6대 공식 채널 실사 썸네일
 * - 우측 가장자리 클리핑 원천 차단 · 전 이미지 실사 플레이트 · GPU 전용 트랜지션 준수
 * ============================================================================ */
@media (min-width: 980px) {
  .atelier-right-workbench {
    padding-right: 0.45rem;
  }
}

@media (min-width: 980px) and (max-width: 1280px) {
  .app-container.atelier-layout {
    grid-template-columns: clamp(376px, 36vw, 452px) minmax(0, 1fr);
    padding: 0 1.4rem;
  }
  .atelier-left-stage {
    padding-right: 1.75rem;
  }
  .atelier-right-workbench {
    padding-left: 1.85rem;
    padding-right: 0.4rem;
  }
}

/* ── 1-E. ㈜웰쉐어로지스 공식 홍보관 ── */
.logis-editorial-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0.85rem 0 1.05rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--hairline-strong);
  border-bottom: 1px solid var(--hairline-strong);
}

@media (min-width: 720px) {
  .logis-editorial-hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
    gap: 1.15rem;
    align-items: stretch;
  }
}

.logis-hq-figure {
  margin: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  background: #0B101B;
  aspect-ratio: 16 / 11;
}

.logis-hq-figure > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logis-hq-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.55rem 0.72rem;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0) 0%, rgba(8, 12, 22, 0.82) 48%, rgba(8, 12, 22, 0.94) 100%);
  color: #F8FAFC;
  display: flex;
  align-items: center;
  gap: 0.48rem;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.logis-hq-mini-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.94);
  padding: 2px;
  flex-shrink: 0;
}

.logis-manifesto-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.78rem;
  min-width: 0;
}

.logis-promise-box {
  padding: 0.78rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
}

.logis-promise-kicker {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--brand-gold);
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.logis-promise-box > strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 0.3rem;
  letter-spacing: -0.015em;
}

.logis-promise-box > p {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.56;
  color: var(--ink-secondary);
}

.logis-proof-4grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline-strong);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  overflow: hidden;
}

.logis-proof-cell {
  background: var(--bg-canvas);
  padding: 0.62rem 0.74rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.logis-proof-cell > strong {
  font-size: 1.04rem;
  font-weight: 800;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.logis-proof-cell > strong > span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand-gold);
  margin-left: 0.14rem;
}

.logis-proof-cell > span {
  font-size: 0.72rem;
  color: var(--ink-muted);
  line-height: 1.35;
}

.logis-div-visual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.82rem;
  margin-bottom: 0.92rem;
}

@media (min-width: 740px) {
  .logis-div-visual-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.logis-div-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms var(--ease-out);
}

.logis-div-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0D1320;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline-strong);
}

.logis-div-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 280ms var(--ease-out);
}

.logis-div-chip {
  position: absolute;
  top: 0.52rem;
  left: 0.52rem;
  padding: 0.18rem 0.48rem;
  border-radius: 4px;
  background: rgba(11, 15, 25, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #F8FAFC;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.logis-div-body {
  padding: 0.78rem 0.86rem 0.84rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.34rem;
}

.logis-div-body > strong {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.36;
  letter-spacing: -0.015em;
}

.logis-div-body > p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.54;
  color: var(--ink-secondary);
  flex: 1;
}

.logis-div-link {
  margin-top: 0.28rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand-gold);
}

@media (hover: hover) and (pointer: fine) {
  .logis-div-card:hover {
    border-color: var(--ink-primary);
    transform: translate3d(0, -2px, 0);
  }
  .logis-div-card:hover .logis-div-media > img {
    transform: scale(1.03);
  }
}

.logis-promo-cta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  padding-top: 0.2rem;
}

/* ── 1-F. 통통허브(ttong.kr) 실시간 데이터 아카이브 ── */
.ttong-hub-head-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.88rem;
}

.ttong-hub-brand-mark {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ttong-hub-brand-mark > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ttong-hub-head-copy {
  flex: 1;
  min-width: 0;
}

.live-sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.live-sync-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10B981;
  flex-shrink: 0;
}

.ttong-hub-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline-strong);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.92rem;
}

@media (min-width: 680px) {
  .ttong-hub-metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.ttong-metric-cell {
  background: var(--surface);
  padding: 0.68rem 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
}

.ttong-metric-cell > strong {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.ttong-metric-cell > strong > span {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand-gold);
  margin-left: 0.15rem;
}

.ttong-metric-cell > span {
  font-size: 0.72rem;
  color: var(--ink-muted);
}

.ttong-hub-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 0.75rem;
}

.ttong-hub-tabs::-webkit-scrollbar {
  display: none;
}

.ttong-hub-tabs .dossier-subtab {
  white-space: nowrap;
}

.ttong-domain-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.ttong-domain-filter-row[hidden] {
  display: none !important;
}

.ttong-prog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.82rem;
}

@media (min-width: 660px) {
  .ttong-prog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ttong-prog-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 170ms ease, transform 170ms var(--ease-out);
}

.ttong-prog-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0F141F;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline-strong);
  display: block;
}

.ttong-prog-shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 260ms var(--ease-out);
}

.ttong-prog-domain-pill {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.16rem 0.46rem;
  border-radius: 4px;
  background: rgba(11, 15, 25, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #F8FAFC;
  font-size: 0.68rem;
  font-weight: 700;
}

.ttong-prog-screens-pill {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.16rem 0.44rem;
  border-radius: 4px;
  background: rgba(11, 15, 25, 0.82);
  border: 1px solid rgba(245, 212, 135, 0.35);
  color: #F5D487;
  font-size: 0.67rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ttong-prog-body {
  padding: 0.78rem 0.88rem 0.84rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.38rem;
}

.ttong-prog-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.ttong-prog-summary {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.54;
  color: var(--ink-secondary);
  flex: 1;
}

.ttong-prog-hl-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.12rem;
}

.ttong-hl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  padding: 0.15rem 0.42rem;
  border-radius: 4px;
  background: var(--bg-canvas);
  border: 1px solid var(--hairline-strong);
  font-size: 0.69rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

.ttong-hl-chip > b {
  color: var(--ink-primary);
  font-weight: 800;
}

.ttong-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.44rem;
  margin-top: 0.15rem;
  border-top: 1px solid var(--hairline);
}

.ttong-link-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-primary);
  text-decoration: none;
  transition: color 150ms ease;
}

.ttong-link-inline.gold {
  color: var(--brand-gold);
}

.ttong-link-inline:hover {
  color: var(--brand-gold);
}

@media (hover: hover) and (pointer: fine) {
  .ttong-prog-card:hover {
    border-color: var(--ink-primary);
    transform: translate3d(0, -2px, 0);
  }
  .ttong-prog-card:hover .ttong-prog-shot > img {
    transform: scale(1.025);
  }
}

.ttong-expand-bar {
  margin-top: 0.78rem;
  display: flex;
  justify-content: center;
}

.btn-ttong-expand {
  width: 100%;
  padding: 0.64rem 0.9rem;
  border-radius: 6px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink-primary);
  font-size: 0.79rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.btn-ttong-expand:hover {
  background: var(--surface-subtle);
  border-color: var(--ink-primary);
}

/* 탭 2: 무료 배포 앱 · PC도구 11종 */
.ttong-apps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 660px) {
  .ttong-apps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ttong-app-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.58rem;
  padding: 0.82rem 0.88rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  transition: border-color 160ms ease, transform 160ms var(--ease-out);
}

.ttong-app-top {
  display: flex;
  align-items: flex-start;
  gap: 0.72rem;
}

.ttong-app-icon {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  background: #0D1320;
}

.ttong-app-icon > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ttong-app-meta {
  flex: 1;
  min-width: 0;
}

.ttong-app-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-bottom: 0.22rem;
}

.ttong-mini-badge {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.1rem 0.36rem;
  border-radius: 3px;
  background: var(--bg-canvas);
  border: 1px solid var(--hairline-strong);
  color: var(--ink-secondary);
}

.ttong-mini-badge.cat {
  color: var(--brand-gold);
}

.ttong-app-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink-primary);
  letter-spacing: -0.015em;
}

.ttong-app-summary {
  margin: 0.18rem 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

@media (hover: hover) and (pointer: fine) {
  .ttong-app-card:hover {
    border-color: var(--ink-primary);
    transform: translate3d(0, -1.5px, 0);
  }
}

/* 탭 3: 유튜브 5채널 · 작품 417편 · 자활 10선 */
.ttong-spotlight-2grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.82rem;
  margin-bottom: 0.88rem;
}

@media (min-width: 680px) {
  .ttong-spotlight-2grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ttong-spotlight-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 170ms ease, transform 170ms var(--ease-out);
}

.ttong-spotlight-thumb {
  aspect-ratio: 16 / 9;
  background: #101622;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline-strong);
}

.ttong-spotlight-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.ttong-spotlight-body {
  padding: 0.78rem 0.88rem 0.84rem;
  display: flex;
  flex-direction: column;
  gap: 0.34rem;
  flex: 1;
}

.ttong-spotlight-body > strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--ink-primary);
}

.ttong-spotlight-body > p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.52;
  color: var(--ink-secondary);
  flex: 1;
}

.ttong-yt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.72rem;
  margin-bottom: 0.85rem;
}

@media (min-width: 680px) {
  .ttong-yt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ttong-yt-card {
  display: flex;
  gap: 0.75rem;
  padding: 0.72rem 0.82rem;
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  align-items: center;
}

.ttong-yt-thumb {
  width: 96px;
  height: 66px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  background: #0D1320;
  position: relative;
  cursor: pointer;
  padding: 0;
}

.ttong-yt-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ttong-yt-play-badge {
  position: absolute;
  inset: auto 5px 5px auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(11, 15, 25, 0.86);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ttong-yt-play-badge svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.ttong-yt-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}

.ttong-yt-info > strong {
  font-size: 0.83rem;
  font-weight: 800;
  color: var(--ink-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ttong-yt-info > span {
  font-size: 0.72rem;
  color: var(--ink-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.42;
}

.ttong-blog-strip {
  border-top: 1px solid var(--hairline-strong);
  padding-top: 0.68rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.38rem;
}

.ttong-blog-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.42rem 0.2rem;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  font-size: 0.76rem;
}

.ttong-blog-row > strong {
  font-weight: 600;
  color: var(--ink-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ttong-blog-row > span {
  font-size: 0.7rem;
  color: var(--ink-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.ttong-hub-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  margin-top: 0.92rem;
  padding-top: 0.78rem;
  border-top: 1px solid var(--hairline-strong);
}

/* ── 1-G. 6대 공식 채널 디렉터리: 실사 이미지 플레이트 + 우측 화살표 클리핑 제로 보장 ── */
#official-channels-card .network-directory-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 0.68rem !important;
  border-top: none !important;
  margin-top: 0.55rem;
}

@media (min-width: 680px) {
  #official-channels-card .network-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#official-channels-card .network-dir-item,
#official-channels-card .network-dir-item:nth-child(2n) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.78rem !important;
  padding: 0.72rem 0.88rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: 6px !important;
  text-decoration: none;
  min-width: 0;
  box-sizing: border-box;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}

.network-dir-thumb {
  width: 72px;
  height: 52px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--hairline-strong);
  background: #0F1522;
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-dir-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.network-dir-thumb.thumb-obsidian-plate {
  background: radial-gradient(circle at 50% 35%, #1D2537 0%, #0B0F19 100%);
}

.network-dir-thumb > img.thumb-contain-emblem {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.network-dir-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.network-dir-copy > strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.network-dir-copy > span:last-child {
  font-size: 0.73rem;
  color: var(--ink-secondary);
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.network-dir-arrow {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--hairline-strong);
  background: var(--bg-canvas);
  color: var(--ink-primary);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms var(--ease-out), border-color 160ms ease, color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
  #official-channels-card .network-dir-item:hover {
    border-color: var(--ink-primary) !important;
    transform: translate3d(0, -1.5px, 0) !important;
  }
  #official-channels-card .network-dir-item:hover .network-dir-arrow {
    border-color: var(--brand-gold);
    color: var(--brand-gold);
    transform: translate3d(1.5px, -1.5px, 0);
  }
}

.bento-card,
#logis-promo-showcase,
#ttong-hub-showcase,
#official-channels-card {
  scroll-margin-top: 84px;
}

@media (min-width: 981px) and (max-width: 1240px) {
  .nav-tab-btn .tab-full-txt {
    display: none !important;
  }
  .nav-tab-btn .tab-short-txt {
    display: inline !important;
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  .card-skin-dots {
    display: none !important;
  }
  #official-channels-card .network-directory-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
 * A4 정식 인쇄 / PDF 발급 전용 레이아웃 (기관 지명원 · 대표/강사 프로필 · 직인 견적서)
 * ============================================================================ */
#print-document-stage { display: none; }

@media print {
  @page { size: A4 portrait; margin: 11mm; }
  html, body {
    background: #FFFFFF !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .page-grain,
  .hero-aura-backdrop,
  .top-shell,
  .mobile-mini-card-bar,
  .mobile-slide-dots,
  .app-container,
  .mobile-app-tabbar,
  .bottom-send-dock,
  .sheet-backdrop,
  .wssc-toast {
    display: none !important;
  }
  #print-document-stage {
    display: block !important;
    width: 100%;
    color: #111827;
    font-family: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  }
  .a4-doc-box {
    border: 1.5px solid #1E293B;
    padding: 16px 20px;
    background: #FFFFFF;
  }
  .a4-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 11.5px;
  }
  .a4-table th,
  .a4-table td {
    border: 1px solid #334155;
    padding: 5.5px 8px;
    text-align: left;
  }
  .a4-table th {
    background: #F1F5F9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-weight: 800;
  }
}