/*
 * PADIEM Parliament AI — 테마 프로토타입 (#5967)
 *
 * 두 개의 독립 축:
 *   국가(data-country) = 음계(tone ramp)와 사진·장면 재료만 정의한다. "재료는 무엇인가".
 *   스타일(data-style) = 역할(role)과 성격만 정의한다. "그 재료를 어디에 얼마나 쓰는가".
 * 따라서 4국가 × 5스타일을 20개 조합으로 복제하지 않고 4 + 5 블록으로 끝낸다.
 * 레이아웃·컴포넌트 계층(TOKENS 이후)에는 색 리터럴이 하나도 없고 토큰 참조만 있다.
 *
 * 배치는 CENTRAL 원본 시안 기준: 좌측 사이드바 · 상단 유틸리티 바 ·
 * 왼쪽 텍스트/오른쪽 사진 히어로 · 업무 카드 3장 · 기능 스트립.
 */

/* ══ TOKENS ══════════════════════════════════════════════════════════════ */
/* ==TOKENS-BEGIN== */
:root {
  /* 골격 — 색과 무관 */
  --pa-shell: 1440px;
  --pa-gap: clamp(14px, 2.2vw, 26px);
  --pa-pad: clamp(16px, 3vw, 40px);
  --pa-radius: 14px;
  --pa-radius-lg: 20px;
  --pa-hair: 1px;
  --pa-target: 44px;
  --pa-ease: cubic-bezier(.22, .61, .36, 1);
  --pa-sun-op: 1;
  --pa-haze-op: .5;
  --pa-scene-op: 1;
  --pa-glass-blur: 10px;
  --pa-work-photo-op: .58;
  --pa-grade-op: 0;
  /* 히어로 사진 층: 국가가 재료를 정하고, 없는 국가는 none을 명시한다(플레이스홀더 은폐 금지). */
  --hero-photo: none;
  --hero-photo-position: 50% 60%;
  --hero-photo-zoom: 1;
  --skyline-display: block;
}

/* ── 축 1 · 국가 = 음계 ─────────────────────────────────────────────────── */
html[data-country="kr"] {
  /* 한국(04 시안): 그라파이트 히어로 패널 + 석양 사진 + 골드. 카드는 남색·초록·보라 3분할. */
  --tone-1: #14161c;
  --tone-2: #1d2029;
  --tone-3: #2c3140;
  --tone-4: #4d5568;
  --tone-5: #9aa3b8;
  --tone-6: #e7b972;
  --tone-7: #f4dcae;
  --tone-8: #f7f4ee;
  --accent: #e2ae5e;
  --accent-contrast: #171319;
  --accent-soft: rgba(226, 174, 94, .16);
  --gold: #d9b26a;
  --gold-soft: rgba(217, 178, 106, .14);
  --danger: #c9584f;
  --success: #4a9a72;
  --sky-1: var(--tone-1);
  --sky-2: var(--tone-3);
  --sky-3: #6b3a4a;
  --sky-4: var(--tone-6);
  --sun: var(--tone-7);
  --sun-glow: rgba(244, 220, 174, .5);
  --skyline: var(--tone-1);
  --skyline-back: rgba(20, 22, 28, .72);
  --reflection: rgba(231, 185, 114, .16);
  --haze: rgba(44, 49, 64, .3);
  --lit: rgba(244, 220, 174, .55);
  --vignette: rgba(20, 22, 28, .55);
  --hero-photo: image-set(url("./assets/assembly-night-1200.jpg") 1x, url("./assets/assembly-night-2400.jpg") 2x);
  --hero-photo-position: 88% 60%;
  --hero-photo-zoom: 1.34;
  --pa-grade-op: .42;
  --skyline-display: none;
  --work-1: #1c2c52;
  --work-2: #1d4438;
  --work-3: #3b2a55;
  --font-display: "NanumMyeongjo", "Noto Serif KR", "Batang", Georgia, serif;
  --font-body: Pretendard, "Noto Sans KR", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-label: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}

html[data-country="us"] {
  /* 미국(02 시안): 딥 네이비 레일 + 크림 본문 + 크림슨 액센트 */
  --tone-1: #0d1b33;
  --tone-2: #16264a;
  --tone-3: #24365f;
  --tone-4: #4a5f88;
  --tone-5: #93a4c4;
  --tone-6: #cfd8e8;
  --tone-7: #eceae2;
  --tone-8: #f8f6f0;
  --accent: #a8232f;
  --accent-contrast: #fdfbf7;
  --accent-soft: rgba(168, 35, 47, .12);
  --gold: #b99a5c;
  --gold-soft: rgba(185, 154, 92, .12);
  --danger: #b5303c;
  --success: #3f8f68;
  --sky-1: var(--tone-1);
  --sky-2: var(--tone-2);
  --sky-3: var(--tone-4);
  --sky-4: var(--tone-6);
  --sun: var(--tone-8);
  --sun-glow: rgba(248, 246, 240, .45);
  --skyline: var(--tone-1);
  --skyline-back: rgba(13, 27, 51, .7);
  --reflection: rgba(207, 216, 232, .18);
  --haze: rgba(36, 54, 95, .32);
  --lit: rgba(236, 234, 226, .5);
  --vignette: rgba(13, 27, 51, .5);
  --hero-photo: none;   /* 사진 미확보 — 대체 그림을 만들어 완성 처리하지 않는다 */
  --hero-photo-position: 50% 60%;
  --hero-photo-zoom: 1;
  --pa-grade-op: 0;
  --skyline-display: block;
  --work-1: var(--tone-7);
  --work-2: var(--tone-1);
  --work-3: var(--tone-7);
  --font-display: "Playfair Display", "Noto Serif KR", Georgia, serif;
  --font-body: Inter, Pretendard, "Noto Sans KR", ui-sans-serif, system-ui, sans-serif;
  --font-label: Inter, system-ui, sans-serif;
}

html[data-country="fr"] {
  /* 프랑스(03 매트릭스): 돌빛 회벽 + 남색 + 와인 액센트 */
  --tone-1: #14182b;
  --tone-2: #222848;
  --tone-3: #3d3f66;
  --tone-4: #6d6a92;
  --tone-5: #a99bbf;
  --tone-6: #dcc9c8;
  --tone-7: #efe3d6;
  --tone-8: #f7f1e8;
  --accent: #7c3550;
  --accent-contrast: #f7f1e8;
  --accent-soft: rgba(124, 53, 80, .12);
  --gold: #c3a37a;
  --gold-soft: rgba(195, 163, 122, .12);
  --danger: #bf5b56;
  --success: #46937a;
  --sky-1: var(--tone-1);
  --sky-2: var(--tone-2);
  --sky-3: var(--tone-4);
  --sky-4: var(--tone-6);
  --sun: var(--tone-7);
  --sun-glow: rgba(239, 227, 214, .42);
  --skyline: var(--tone-1);
  --skyline-back: rgba(20, 24, 43, .68);
  --reflection: rgba(220, 201, 200, .18);
  --haze: rgba(61, 63, 102, .3);
  --lit: rgba(239, 227, 214, .5);
  --vignette: rgba(20, 24, 43, .48);
  --hero-photo: none;
  --hero-photo-position: 50% 60%;
  --hero-photo-zoom: 1;
  --pa-grade-op: 0;
  --skyline-display: block;
  --work-1: var(--tone-2);
  --work-2: var(--tone-4);
  --work-3: var(--tone-3);
  --font-display: "NanumMyeongjo", "Noto Serif KR", Georgia, serif;
  --font-body: Pretendard, "Noto Sans KR", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-label: Inter, "Noto Sans KR", system-ui, sans-serif;
}

html[data-country="uk"] {
  /* 영국(01 시안): 웨스트민스터 딥 네이비 + 퍼치먼트 + 앤티크 골드 */
  --tone-1: #0b1220;
  --tone-2: #142039;
  --tone-3: #24365c;
  --tone-4: #4b5f86;
  --tone-5: #8b9cb8;
  --tone-6: #c6cede;
  --tone-7: #e6ddc9;
  --tone-8: #f4efe2;
  --accent: #b8923a;
  --accent-contrast: #0b1220;
  --accent-soft: rgba(184, 146, 58, .16);
  --gold: #c9ab5e;
  --gold-soft: rgba(201, 171, 94, .13);
  --danger: #c05a52;
  --success: #4a937a;
  --sky-1: var(--tone-1);
  --sky-2: var(--tone-2);
  --sky-3: var(--tone-3);
  --sky-4: var(--tone-5);
  --sun: var(--tone-7);
  --sun-glow: rgba(230, 221, 201, .4);
  --skyline: var(--tone-1);
  --skyline-back: rgba(11, 18, 32, .72);
  --reflection: rgba(198, 206, 222, .16);
  --haze: rgba(36, 54, 92, .34);
  --lit: rgba(230, 221, 201, .45);
  --vignette: rgba(11, 18, 32, .52);
  --hero-photo: none;
  --hero-photo-position: 50% 60%;
  --hero-photo-zoom: 1;
  --pa-grade-op: 0;
  --skyline-display: block;
  --work-1: var(--tone-8);
  --work-2: var(--tone-7);
  --work-3: var(--tone-8);
  --font-display: "NanumMyeongjo", "Noto Serif KR", Georgia, serif;
  --font-body: Pretendard, "Noto Sans KR", Inter, ui-sans-serif, system-ui, sans-serif;
  --font-label: Inter, "Noto Sans KR", system-ui, sans-serif;
}

/* ── 축 2 · 스타일 = 역할 할당 ──────────────────────────────────────────── */
/* 밝은 역할: 라이트·클래식·모던·미니멀은 재료를 밝게 쓰고, 성격 블록만 다르다.
   시안대로 레일과 히어로 패널은 밝은 테마에서도 진하게 간다. */
html[data-style="light"],
html[data-style="classic"],
html[data-style="modern"],
html[data-style="minimal"] {
  --bg: var(--tone-8);
  --page-bg: var(--tone-8);
  --panel: var(--tone-7);
  --text: var(--tone-1);
  --muted: var(--tone-4);
  --line: var(--tone-6);
  --paper: var(--tone-8);
  --ink: var(--tone-1);
  --ink-muted: var(--tone-4);
  --glass: rgba(255, 255, 255, .74);
  --shadow: 0 18px 44px rgba(0, 0, 0, .1);
  --focus-ring: var(--accent-soft);
  --rail: var(--tone-1);
  --rail-text: var(--tone-8);
  --rail-muted: var(--tone-5);
  --rail-line: var(--tone-3);
  --hero-panel: var(--tone-1);
  --hero-panel-text: var(--tone-8);
  --hero-text: var(--tone-8);
  --hero-scrim: rgba(0, 0, 0, .3);
  --pa-scene-op: 1;
}

html[data-style="dark"] {
  --bg: var(--tone-2);
  --page-bg: var(--tone-2);
  --panel: var(--tone-3);
  --text: var(--tone-8);
  --muted: var(--tone-5);
  --line: var(--tone-3);
  --paper: var(--tone-2);
  --ink: var(--tone-8);
  --ink-muted: var(--tone-5);
  --glass: rgba(255, 255, 255, .06);
  --shadow: 0 20px 52px rgba(0, 0, 0, .34);
  --focus-ring: var(--accent-soft);
  --rail: var(--tone-1);
  --rail-text: var(--tone-8);
  --rail-muted: var(--tone-5);
  --rail-line: var(--tone-3);
  --hero-panel: var(--tone-1);
  --hero-panel-text: var(--tone-8);
  --hero-text: var(--tone-8);
  --hero-scrim: rgba(0, 0, 0, .22);
  --pa-scene-op: 1;
}

/* ── 축 2 · 스타일 = 성격 ──────────────────────────────────────────────── */
html[data-style="classic"] {
  --pa-radius: 8px;
  --pa-radius-lg: 12px;
  --pa-glass-blur: 6px;
}

html[data-style="modern"] {
  --pa-radius: 16px;
  --pa-radius-lg: 24px;
  --pa-glass-blur: 14px;
  --pa-sun-op: .88;
}

html[data-style="minimal"] {
  --pa-sun-op: .3;
  --pa-haze-op: .12;
  --pa-glass-blur: 0px;
  --pa-work-photo-op: 0;
  --glass: transparent;
  --shadow: none;
}

html[data-style="light"] { --pa-sun-op: .82; }
/* ==TOKENS-END== */

/* ══ BASE ════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.pa-body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }

/* `hidden`은 클래스의 display에 이길 수 없다: 뷰 전환이 실제로 작동하려면 이 규칙이 필요하다. */
[hidden] { display: none !important; }

.pa-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pa-skip {
  position: absolute;
  left: var(--pa-pad);
  top: -60px;
  z-index: 40;
  padding: 10px 16px;
  border-radius: var(--pa-radius);
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  text-decoration: none;
  transition: top .18s var(--pa-ease);
}
.pa-skip:focus { top: 12px; }

:where(a, button, select, textarea, input):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--pa-radius);
}

/* ══ 앱 셸: 좌측 레일 + 본문 ═════════════════════════════════════════════ */
/* ══ 셸: 단일 컬럼 + 상단 수평 내비(04 시안) ════════════════════════════ */
.pa-shell { display: block; min-height: 100svh; }
.pa-main { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); min-height: 100svh; }
.pa-main > * { min-width: 0; }

.pa-brand { display: flex; align-items: center; gap: 10px; margin-right: 6px; }
.pa-brand-mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}
.pa-brand-text { display: grid; line-height: 1.2; min-width: 0; }
.pa-brand-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.pa-brand-tag { font-family: var(--font-label); font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }

.pa-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.pa-nav-item {
  min-height: var(--pa-target);
  padding: 9px 14px;
  border: var(--pa-hair) solid transparent;
  border-radius: 999px;
  background: transparent;
  font-size: 14.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .16s var(--pa-ease), border-color .16s var(--pa-ease);
}
.pa-nav-item:hover { background: var(--accent-soft); }
.pa-nav-item.is-current { background: var(--accent-soft); border-color: var(--accent); }
.pa-nav-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; font-weight: 500; }
.pa-nav-sep { width: var(--pa-hair); height: 22px; margin: 0 8px; background: var(--line); }
.pa-nav-note { font-family: var(--font-label); font-size: 10px; letter-spacing: .1em; color: var(--muted); margin-right: 6px; }

/* ══ 상단 유틸리티 바 ═══════════════════════════════════════════════════ */
.pa-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--pa-gap);
  flex-wrap: wrap;
  padding: 10px var(--pa-pad);
  background: var(--bg);
  border-bottom: var(--pa-hair) solid var(--line);
}
.pa-search { order: 5; flex: 1 1 300px; }
.pa-search { flex: 1 1 260px; min-width: 0; }
.pa-search input {
  width: 100%;
  min-height: var(--pa-target);
  padding: 10px 14px;
  border: var(--pa-hair) solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 15px;
}
.pa-search input::placeholder { color: var(--muted); }
.pa-topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pa-badge {
  padding: 5px 10px;
  border: var(--pa-hair) solid var(--line);
  border-radius: 999px;
  font-family: var(--font-label);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  white-space: nowrap;
}
.pa-session-chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: var(--pa-hair) solid var(--line);
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.pa-theme-controls { display: flex; gap: 12px; flex-wrap: wrap; }
.pa-theme-controls label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .04em;
}
.pa-theme-controls select {
  min-height: var(--pa-target);
  padding: 8px 12px;
  border: var(--pa-hair) solid var(--line);
  border-radius: var(--pa-radius);
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

/* ══ 히어로: 왼쪽 텍스트 패널 + 오른쪽 사진 ═══════════════════════════════ */
.pa-home { display: grid; gap: clamp(26px, 4vw, 54px); padding: 0 0 clamp(30px, 5vw, 64px); }

.pa-hero {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  align-items: stretch;
  border-bottom: var(--pa-hair) solid var(--line);
}
.pa-hero { position: relative; }
.pa-hero-quote {
  position: absolute;
  top: clamp(16px, 3svh, 34px);
  right: clamp(18px, 2.4vw, 34px);
  z-index: 2;
  display: grid;
  gap: 8px;
  max-width: 34ch;
  text-align: right;
  font-family: var(--font-display);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--hero-text);
  text-shadow: 0 1px 12px var(--vignette);
  word-break: keep-all;
}
.pa-hero-quote small { font-family: var(--font-label); font-size: 10px; letter-spacing: .16em; opacity: .85; }

.pa-hero-copy {
  order: 1;
  display: grid;
  align-content: center;
  gap: 16px;
  padding: clamp(30px, 4.4vw, 68px) clamp(20px, 3.4vw, 56px);
  background: var(--hero-panel);
  color: var(--hero-panel-text);
}
.pa-eyebrow {
  font-family: var(--font-label);
  font-size: 11.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.pa-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 66px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--hero-panel-text);
  text-wrap: balance;
  word-break: keep-all;   /* 한글 단어를 쪼개지 않는다(Chrome은 overflow-wrap이 아니라 이것) */
  hyphens: none;
  font-size: clamp(28px, 3.5vw, 48px);
}
.pa-hero h1 em { font-style: normal; color: var(--accent); }
.pa-hero-lead { font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; opacity: .88; word-break: keep-all; }
.pa-hero-actions { margin-top: 6px; }

.pa-cta {
  min-height: var(--pa-target);
  padding: 13px 26px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--accent), var(--gold));
  color: var(--accent-contrast);
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .18s var(--pa-ease), box-shadow .18s var(--pa-ease);
}
.pa-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.pa-scene {
  order: 2;
  position: relative;
  min-height: clamp(300px, 40svh, 460px);
  overflow: hidden;
  opacity: var(--pa-scene-op);
  isolation: isolate;
  pointer-events: none;
}
.pa-scene > * { position: absolute; inset: 0; display: block; }

/* 사진이 들어온 국가는 CSS 백스톱 장면을 끈다(겹쳐 그려 인공적으로 보이지 않게). */
.pa-photo {
  background-image: var(--hero-photo);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-photo-position);
  /* 배율을 background-size로 주면 세로가 짧게 깎인다. 층을 확대해 cover를 유지한다. */
  transform: scale(var(--hero-photo-zoom));
  transform-origin: var(--hero-photo-position);
  filter: saturate(1.1) contrast(1.05);
}
/* 밤 사진을 시안의 석양 톤으로 옮긴다. 색만 입히고 명도는 유지하므로 사진은 그대로다. */
.pa-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sky-4);
  opacity: var(--pa-grade-op);
  mix-blend-mode: color;
}
.pa-sky, .pa-sun, .pa-haze, .pa-skyline { display: var(--skyline-display); }

.pa-sky { background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 38%, var(--sky-3) 66%, var(--sky-4) 100%); }

.pa-sun {
  background:
    radial-gradient(circle 62px at 72% 76%, var(--sun) 0 91%, transparent 94%),
    radial-gradient(40% 26% at 72% 78%, var(--sun-glow) 0%, transparent 72%),
    radial-gradient(92% 44% at 50% 100%, var(--sun-glow) 0%, transparent 70%);
  opacity: var(--pa-sun-op);
  animation: pa-breathe 26s var(--pa-ease) infinite alternate;
}

.pa-haze {
  background:
    repeating-linear-gradient(180deg, var(--haze) 0 1.5px, transparent 1.5px 46px),
    radial-gradient(72% 24% at 28% 58%, var(--haze) 0%, transparent 74%);
  opacity: var(--pa-haze-op);
  animation: pa-drift 46s linear infinite alternate;
}

.pa-skyline { inset: auto 0 0; height: 54%; width: 100%; }
.pa-skyline-back path { fill: var(--skyline-back); }
.pa-skyline-main path { fill: var(--skyline); }
.pa-lit path { fill: var(--lit); }
.pa-reflection path { fill: var(--reflection); }

.pa-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
}
.pa-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--hero-scrim) 0%, transparent 46%),
    linear-gradient(180deg, transparent 52%, var(--vignette) 100%);
}
.pa-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 90% at 60% 20%, transparent 42%, var(--vignette) 100%);
}

/* ══ 업무 카드 3장 ═══════════════════════════════════════════════════════ */
.pa-works { display: grid; gap: clamp(16px, 2vw, 26px); padding: 0 var(--pa-pad); max-width: var(--pa-shell); margin: 0 auto; width: 100%; }
.pa-works-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pa-gap); flex-wrap: wrap; }
.pa-works-head h2 { font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; letter-spacing: -0.02em; margin-top: 6px; }
.pa-works-note { color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.pa-works-side { font-family: var(--font-label); font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }

.pa-work-list { display: grid; gap: var(--pa-gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pa-work {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: clamp(18px, 2vw, 26px);
  min-height: 240px;
  background: var(--work-1);
  border: var(--pa-hair) solid var(--line);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--shadow);
  transition: transform .2s var(--pa-ease);
}
.pa-work:nth-child(2) { background: var(--work-2); }
.pa-work:nth-child(3) { background: var(--work-3); }
.pa-work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: var(--hero-photo-position);
  opacity: var(--pa-work-photo-op);
}
.pa-work:nth-child(1)::before { background-position: 12% 62%; }
.pa-work:nth-child(2)::before { background-position: 52% 58%; }
.pa-work:nth-child(3)::before { background-position: 88% 64%; }
.pa-work:hover { transform: translateY(-2px); }
.pa-work.is-open { border-color: var(--accent); border-width: 2px; }

.pa-work-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--pa-radius);
  border: var(--pa-hair) solid var(--accent-soft);
  background: var(--accent-soft);
}
.pa-work-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pa-work-index { font-family: var(--font-label); font-size: 11px; letter-spacing: .22em; color: var(--gold); }
.pa-work-title { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--hero-panel-text); word-break: keep-all; }
.pa-work-desc { font-size: 14px; line-height: 1.65; color: var(--tone-7); word-break: keep-all; }
.pa-work-foot { margin-top: auto; padding-top: 10px; }
.pa-work-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--pa-target);
  padding: 8px 4px 8px 0;
  border: 0;
  background: transparent;
  font-weight: 700;
  color: var(--hero-panel-text);
  cursor: pointer;
}
.pa-work-select::after {
  content: "";
  width: 34px; height: 34px;
  margin-left: 8px;
  border-radius: 50%;
  border: var(--pa-hair) solid var(--accent);
  background: var(--accent-soft);
}
.pa-work-select:hover { color: var(--accent); }
.pa-works-empty { color: var(--muted); font-size: 14px; }

/* ══ 기능 스트립 ═════════════════════════════════════════════════════════ */
.pa-strip { padding: var(--pa-pad); border: var(--pa-hair) solid var(--line); border-radius: var(--pa-radius-lg); background: var(--panel); }
.pa-strip ul { display: grid; gap: var(--pa-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: var(--pa-shell); margin: 0 auto; }
.pa-strip li { display: grid; gap: 4px; }
.pa-strip-mark { font-size: 18px; color: var(--accent); }
.pa-strip strong { font-size: 15px; }
.pa-strip small { color: var(--muted); font-size: 13px; line-height: 1.55; }

/* ══ 문서 작업실 ════════════════════════════════════════════════════════ */
.pa-editor {
  width: 100%;
  max-width: var(--pa-shell);
  margin: 0 auto;
  padding: clamp(14px, 2.4vw, 28px) var(--pa-pad) clamp(28px, 4vw, 56px);
  animation: pa-rise .4s var(--pa-ease) both;
}
.pa-editor-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pa-back {
  min-height: var(--pa-target);
  padding: 9px 16px;
  border: var(--pa-hair) solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-weight: 650;
  cursor: pointer;
}
.pa-back:hover { border-color: var(--accent); }
.pa-editor-kicker { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; }
.pa-editor-note { font-family: var(--font-label); font-size: 12px; color: var(--muted); }

.pa-editor-grid { display: grid; gap: var(--pa-gap); grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; }

.pa-meta {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 1.8vw, 20px);
  background: var(--panel);
  border: var(--pa-hair) solid var(--line);
  border-radius: var(--pa-radius-lg);
}
.pa-meta-fields { display: grid; gap: 11px; }
.pa-meta label { display: grid; gap: 5px; font-family: var(--font-label); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.pa-meta input,
.pa-meta textarea,
.pa-meta select {
  min-height: var(--pa-target);
  padding: 10px 12px;
  border: var(--pa-hair) solid var(--line);
  border-radius: var(--pa-radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  letter-spacing: normal;
}
.pa-meta textarea { min-height: 92px; resize: vertical; }
.pa-draft {
  min-height: var(--pa-target);
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-weight: 700;
  cursor: pointer;
}

.pa-paper {
  display: grid;
  gap: 10px;
  padding: clamp(16px, 2.4vw, 30px);
  background: var(--paper);
  border: var(--pa-hair) solid var(--line);
  border-radius: var(--pa-radius-lg);
  box-shadow: var(--shadow);
}
.pa-paper textarea {
  min-height: clamp(320px, 54svh, 620px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.85;
  resize: vertical;
}
.pa-paper textarea::placeholder { color: var(--ink-muted); opacity: .8; }
.pa-paper textarea:focus-visible { outline: 0; }
.pa-paper:focus-within { border-color: var(--accent); }
.pa-status { min-height: 22px; font-family: var(--font-label); font-size: 12.5px; color: var(--ink-muted); }

/* ══ 하단 고지 ══════════════════════════════════════════════════════════ */
.pa-foot { padding: 20px var(--pa-pad) 34px; border-top: var(--pa-hair) solid var(--line); color: var(--muted); font-size: 13px; }
.pa-foot p { max-width: var(--pa-shell); margin: 0 auto; }
.pa-foot p + p { margin-top: 8px; }
.pa-credit { font-family: var(--font-label); font-size: 11.5px; opacity: .85; }
.pa-credit a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.pa-foot code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; }

/* ══ 반응형: 1440 / 768 / 390 ═══════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* 1440×900에서 시안처럼 카드 3장이 첫 화면에 들어온다. */
  .pa-hero { min-height: 452px; }
  .pa-scene { min-height: 452px; }
  .pa-work { min-height: 268px; }
}

@media (max-width: 1100px) {
  .pa-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pa-hero { grid-template-columns: minmax(0, 1fr); }
  .pa-scene { order: -1; min-height: clamp(240px, 34svh, 360px); }
  .pa-hero-copy { order: 2; }
  .pa-hero h1 { font-size: clamp(30px, 7vw, 46px); }
  .pa-editor-grid { grid-template-columns: minmax(0, 1fr); }
  .pa-work-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .pa-topbar > * { min-width: 0; }
  .pa-nav { order: 6; width: 100%; min-width: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .pa-nav-item { white-space: nowrap; }
  .pa-search { order: 4; flex: 1 1 100%; }
  .pa-topbar { position: static; }
  .pa-hero-quote { display: none; }
  .pa-theme-controls label { flex: 1 1 auto; }
  .pa-theme-controls select { flex: 1; }
  .pa-strip ul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
  body.pa-body { font-size: 15px; }
  .pa-brand-tag { display: none; }
  .pa-badge { display: none; }
  .pa-hero-copy { padding: 22px 16px 26px; }
  .pa-hero h1 { font-size: 30px; }
  .pa-cta, .pa-draft, .pa-back, .pa-work-select { width: 100%; justify-content: center; text-align: center; }
  .pa-paper { padding: 14px; }
  .pa-paper textarea { font-size: 16px; }
}

/* ══ 동작 ══════════════════════════════════════════════════════════════ */
@keyframes pa-breathe { from { opacity: calc(var(--pa-sun-op) * .8); transform: translateY(4px) scale(1); } to { opacity: var(--pa-sun-op); transform: translateY(-4px) scale(1.03); } }
@keyframes pa-drift { from { transform: translate3d(-2%, 0, 0); } to { transform: translate3d(2%, -1%, 0); } }
@keyframes pa-rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pa-sun, .pa-haze, .pa-editor { animation: none; }
  .pa-cta, .pa-work, .pa-nav-item, .pa-skip { transition: none; }
}

@media (prefers-contrast: more) {
  .pa-work, .pa-meta, .pa-paper, .pa-strip { border-width: 2px; }
}