:root {
  --bg: #f7f4ed;
  --ink: #171512;
  --muted: #6f675c;
  --line: #d8d0c2;
  --panel: #fffaf1;
  --panel-2: #ece4d6;
  --accent: #9e3427;
  --accent-2: #1f6d6a;
  --accent-3: #a67c00;
  --teal: #1f6d6a;
  --dark: #151719;
  --dark-2: #202326;
  --white: #fffdf8;
  --shadow: 0 18px 48px rgba(32, 26, 18, 0.12);
  --paper: #f4efe4;
  --blueprint: #1e3b46;
  --fantasy-gold: #f2d28a;
  --fantasy-gold-bright: #f1c75b;
  --fantasy-teal: #76b7b1;
  --fantasy-text: rgba(232, 223, 201, .78);
  --fantasy-text-muted: rgba(232, 223, 201, .74);
  --fantasy-line: rgba(199, 148, 63, .28);
  --fantasy-line-strong: rgba(241, 199, 91, .62);
  --click-frame-line: #d9a84b;
  --click-frame-glow: rgba(241, 199, 91, .24);
  --click-frame-glow-strong: rgba(241, 199, 91, .42);
  --fantasy-chip-bg: linear-gradient(180deg, rgba(18,25,29,.86), rgba(9,14,17,.9));
  --fantasy-chip-bg-hover: linear-gradient(180deg, rgba(27,37,42,.96), rgba(12,18,22,.96));
  --fantasy-inset: inset 0 0 0 1px rgba(255,230,160,.04);
  --frame-corners-large:
    url("../frame/corner_tl.svg"),
    url("../frame/corner_tr.svg"),
    url("../frame/corner_bl.svg"),
    url("../frame/corner_br.svg");
  --frame-corners-small:
    url("../frame/small_corner_tl.svg"),
    url("../frame/small_corner_tr.svg"),
    url("../frame/small_corner_bl.svg"),
    url("../frame/small_corner_br.svg");
  --frame-corner-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  --frame-corner-position: left top, right top, left bottom, right bottom;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  line-height: 1.72;
  letter-spacing: 0;
}

a { color: inherit; }

/* Clickable elements use a brighter brass frame so they read differently from
   passive information cards. */
button,
a {
  -webkit-tap-highlight-color: transparent;
}

.gate-card,
.hero-shot,
.project-visual,
.stage-tab,
.doc-chip,
.work-subtab,
.preview-link,
.prologue-enter,
.prologue-step-button,
body.tabbed-portfolio .nav a {
  cursor: pointer;
}

.gate-card,
.hero-shot,
.doc-chip,
.work-subtab,
.preview-link,
.prologue-enter,
.prologue-step-button,
body.tabbed-portfolio .nav a {
  position: relative;
  isolation: isolate;
}

.gate-card::before,
.hero-shot::before,
.doc-chip::before,
.work-subtab::before,
.preview-link::before,
.prologue-enter::before,
.prologue-step-button::before,
body.tabbed-portfolio .nav a::before {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: 2;
  border-radius: calc(8px - 2px);
  pointer-events: none;
  opacity: .74;
  background:
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) left top / 16px 1px no-repeat,
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) left top / 1px 16px no-repeat,
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) right top / 16px 1px no-repeat,
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) right top / 1px 16px no-repeat,
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) left bottom / 16px 1px no-repeat,
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) left bottom / 1px 16px no-repeat,
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) right bottom / 16px 1px no-repeat,
    linear-gradient(var(--click-frame-line), var(--click-frame-line)) right bottom / 1px 16px no-repeat;
  filter: drop-shadow(0 0 5px var(--click-frame-glow));
  transition: opacity 160ms ease, filter 160ms ease, transform 160ms ease;
}

.gate-card:hover::before,
.gate-card:focus-visible::before,
.hero-shot:hover::before,
.hero-shot:focus-visible::before,
.doc-chip:hover::before,
.doc-chip:focus-visible::before,
.work-subtab:hover::before,
.work-subtab:focus-visible::before,
.preview-link:hover::before,
.preview-link:focus-visible::before,
.prologue-enter:hover::before,
.prologue-enter:focus-visible::before,
.prologue-step-button:hover::before,
.prologue-step-button:focus-visible::before,
body.tabbed-portfolio .nav a:hover::before,
body.tabbed-portfolio .nav a:focus-visible::before {
  opacity: 1;
  filter: drop-shadow(0 0 8px var(--click-frame-glow-strong));
}

.gate-card:focus-visible,
.hero-shot:focus-visible,
.project-visual:focus-visible,
.stage-tab:focus-visible,
.doc-chip:focus-visible,
.work-subtab:focus-visible,
.preview-link:focus-visible,
.prologue-enter:focus-visible,
.prologue-step-button:focus-visible,
body.tabbed-portfolio .nav a:focus-visible {
  outline: 2px solid rgba(241, 199, 91, .72);
  outline-offset: 3px;
}

p,
li,
.hero-lead,
.hero-quote,
.summary-card p,
.summary-card span,
.gate-card span,
.career-card p,
.project-visual p,
.project-panel p,
.detail-summary,
.stage-panel p,
.stage-panel li,
.stage-card p,
.evidence-item,
.doc-link {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Fantasy scrollbar assets for document lists, page panes, and modal previews. */
body.tabbed-portfolio,
body.tabbed-portfolio .page-section,
.project-visual-index,
.compact-docs,
.preview-panel,
.prologue-section {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 148, 63, .88) rgba(8, 16, 20, .82);
}

body.tabbed-portfolio::-webkit-scrollbar,
body.tabbed-portfolio .page-section::-webkit-scrollbar,
.project-visual-index::-webkit-scrollbar,
.compact-docs::-webkit-scrollbar,
.preview-panel::-webkit-scrollbar,
.prologue-section::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

body.tabbed-portfolio::-webkit-scrollbar-track,
body.tabbed-portfolio .page-section::-webkit-scrollbar-track,
.project-visual-index::-webkit-scrollbar-track,
.compact-docs::-webkit-scrollbar-track,
.preview-panel::-webkit-scrollbar-track,
.prologue-section::-webkit-scrollbar-track {
  border: 1px solid rgba(199,148,63,.18);
  border-radius: 999px;
  background:
    url("../frame/scrollbar_track.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(8,16,20,.92), rgba(13,20,24,.92));
}

body.tabbed-portfolio::-webkit-scrollbar-thumb,
body.tabbed-portfolio .page-section::-webkit-scrollbar-thumb,
.project-visual-index::-webkit-scrollbar-thumb,
.compact-docs::-webkit-scrollbar-thumb,
.preview-panel::-webkit-scrollbar-thumb,
.prologue-section::-webkit-scrollbar-thumb {
  min-height: 52px;
  min-width: 52px;
  border: 2px solid rgba(8,16,20,.95);
  border-radius: 999px;
  background:
    url("../frame/scrollbar_thumb.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(225,185,100,.96), rgba(83,56,24,.96));
  box-shadow: inset 0 0 0 1px rgba(255,230,160,.2), 0 0 10px rgba(241,199,91,.18);
}

body.tabbed-portfolio::-webkit-scrollbar-thumb:hover,
body.tabbed-portfolio .page-section::-webkit-scrollbar-thumb:hover,
.project-visual-index::-webkit-scrollbar-thumb:hover,
.compact-docs::-webkit-scrollbar-thumb:hover,
.preview-panel::-webkit-scrollbar-thumb:hover,
.prologue-section::-webkit-scrollbar-thumb:hover {
  background:
    url("../frame/scrollbar_thumb.svg") center / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(241,199,91,1), rgba(115,78,32,.98));
  box-shadow: inset 0 0 0 1px rgba(255,240,184,.3), 0 0 14px rgba(241,199,91,.32);
}

body.tabbed-portfolio::-webkit-scrollbar-corner,
body.tabbed-portfolio .page-section::-webkit-scrollbar-corner,
.project-visual-index::-webkit-scrollbar-corner,
.compact-docs::-webkit-scrollbar-corner,
.preview-panel::-webkit-scrollbar-corner,
.prologue-section::-webkit-scrollbar-corner {
  background:
    url("../frame/scrollbar_corner.svg") center / 100% 100% no-repeat,
    #081014;
}