@font-face {
  font-family: Pretendard;
  src: url("assets/pretendard.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg: #070807;
  --ivory: #f1ecdf;
  --soft: rgba(241,236,223,.62);
  --faint: rgba(241,236,223,.2);
  --line: rgba(241,236,223,.17);
  --red: #a63a27;
  --px: 0;
  --py: 0;
  --pointer-x: 0px;
  --pointer-y: 0px;
  --camera-x: 0px;
  --camera-y: 0px;
  --world-x: 0px;
  --world-y: 0px;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; overflow: hidden; background: var(--bg); color: var(--ivory); font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; word-break: keep-all; }
button, a { color: inherit; font: inherit; }
button { cursor: pointer; }
button:focus-visible,
a:focus-visible { outline: 2px solid #d9bea0; outline-offset: 4px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .7rem 1rem; background: white; color: black; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.error-page { display: grid; min-height: 100svh; place-items: center; overflow: auto; background: radial-gradient(circle at 65% 35%, #25231f 0, #0b0d0c 37%, #070807 72%); }
.error-page main { width: min(540px, calc(100% - 44px)); padding: 44px 0; }
.error-page main > p { margin: 72px 0 14px; color: #d2b48f; font-size: 13px; letter-spacing: .16em; }
.error-page h1 { margin: 0; font-size: clamp(34px, 6vw, 64px); line-height: 1.08; letter-spacing: -.055em; }
.error-page a { display: inline-block; margin-top: 42px; padding: 12px 0; border-bottom: 1px solid rgba(217,190,160,.55); color: #d9bea0; font-size: 14px; text-decoration: none; }

.archive { position: relative; height: 100dvh; min-height: 100svh; overflow: hidden; isolation: isolate; }
.world, .world-video, .world-image, .world-scene, .world-shade, .world-grid, .world-aurora, .world-glass, .world-grain { position: absolute; inset: 0; }
.world { z-index: -3; overflow: hidden; transform: translate3d(var(--world-x), var(--world-y), 0) scale(1); transition: transform 1.35s cubic-bezier(.16,.82,.18,1); }
.world-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .66;
  filter: saturate(.72) contrast(1.08) brightness(.55);
  transform: scale(1.055);
  animation: world-film-drift 24s ease-in-out infinite alternate;
}
.world-image {
  background: url("assets/jeongbon-record-space-v1-mobile.webp") 57% center / cover no-repeat;
  opacity: .12;
  mix-blend-mode: screen;
  transform: scale(1.035);
  translate: calc(var(--px) * -10px) calc(var(--py) * -7px);
  transform-origin: var(--focus-x) var(--focus-y);
  transition: transform 1.15s cubic-bezier(.18,.8,.2,1), filter .8s ease, translate 1.2s cubic-bezier(.18,.8,.2,1);
  will-change: transform, translate;
}
.world-scene {
  background-image: var(--scene-image);
  background-size: cover;
  background-position: center;
  opacity: 0;
  filter: blur(44px) saturate(1.25) brightness(.48);
  mix-blend-mode: screen;
  transform: scale(1.16);
  transition: opacity 1s ease, transform 8s ease, filter 1s ease;
}
.archive.is-focused .world { transform: translate3d(var(--world-x), var(--world-y), 0) scale(1.045); }
.archive.is-focused .world-image { transform: scale(1.2); opacity: .06; filter: contrast(1.08) saturate(.82) brightness(.82); }
.archive.is-focused .world-video { opacity: .36; filter: saturate(.58) contrast(1.1) brightness(.4); }
.archive.is-focused .world-scene { opacity: .2; transform: scale(1.04); }
.world-shade {
  background:
    linear-gradient(90deg, rgba(2,3,3,.85) 0%, rgba(2,3,3,.53) 32%, rgba(2,3,3,.1) 62%, rgba(2,3,3,.37) 100%),
    linear-gradient(180deg, rgba(2,3,3,.55), transparent 35%, rgba(2,3,3,.07) 66%, rgba(2,3,3,.82));
}
.world-grid {
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 6.25vw 6.25vw;
  mask-image: linear-gradient(90deg, transparent 0, black 48%, black 100%);
  translate: calc(var(--px) * 5px) calc(var(--py) * 4px);
  animation: grid-breathe 18s ease-in-out infinite alternate;
}
.world-aurora { pointer-events: none; mix-blend-mode: screen; filter: blur(54px); opacity: .2; }
.aurora-one {
  inset: -25% 20% 18% 28%;
  background: radial-gradient(ellipse, rgba(173,91,40,.52), rgba(129,52,28,.12) 42%, transparent 72%);
  translate: calc(var(--px) * 18px) calc(var(--py) * 12px);
  animation: aurora-one 22s ease-in-out infinite alternate;
}
.aurora-two {
  inset: 4% -18% -32% 50%;
  background: radial-gradient(ellipse, rgba(45,111,117,.38), rgba(65,72,105,.12) 43%, transparent 72%);
  translate: calc(var(--px) * -13px) calc(var(--py) * -9px);
  animation: aurora-two 28s ease-in-out infinite alternate;
}
.world-glass { pointer-events: none; opacity: .28; mix-blend-mode: screen; }
.glass-one {
  inset: 6% 12% 20% 56%;
  border-radius: 52% 48% 38% 62% / 40% 46% 54% 60%;
  background: linear-gradient(128deg, rgba(255,255,255,.12), rgba(255,255,255,.012) 38%, rgba(76,126,128,.09));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 48px rgba(255,255,255,.04), 0 40px 100px rgba(0,0,0,.2);
  backdrop-filter: blur(3px);
  translate: calc(var(--px) * 24px) calc(var(--py) * 18px);
  animation: glass-float 20s ease-in-out infinite alternate;
}
.glass-two {
  inset: 52% 48% -18% 4%;
  border-radius: 48% 52% 64% 36% / 58% 36% 64% 42%;
  background: linear-gradient(132deg, rgba(174,113,70,.08), rgba(255,255,255,.03) 44%, transparent 72%);
  border-top: 1px solid rgba(255,255,255,.06);
  translate: calc(var(--px) * -15px) calc(var(--py) * -11px);
  animation: glass-float-two 25s ease-in-out infinite alternate;
}
.world-grain {
  opacity: .055;
  pointer-events: none;
  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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
  animation: grain-shift 8s steps(6) infinite;
}
@keyframes grid-breathe { to { opacity: .26; background-position: 12px 8px; } }
@keyframes aurora-one { to { transform: translate3d(5vw, 3vh, 0) scale(1.15) rotate(4deg); opacity: .3; } }
@keyframes aurora-two { to { transform: translate3d(-4vw, -4vh, 0) scale(1.12) rotate(-5deg); opacity: .27; } }
@keyframes glass-float { to { transform: translate3d(-2vw, 3vh, 0) rotate(-2deg) scale(1.04); } }
@keyframes glass-float-two { to { transform: translate3d(3vw, -2vh, 0) rotate(3deg) scale(1.06); } }
@keyframes grain-shift { 0% { transform: translate(0,0); } 33% { transform: translate(2%,-1%); } 66% { transform: translate(-1%,2%); } 100% { transform: translate(1%,1%); } }
@keyframes world-film-drift { from { transform: scale(1.055) translate3d(-.6%, 0, 0); } to { transform: scale(1.105) translate3d(.8%, -.6%, 0); } }

.topbar {
  position: absolute;
  z-index: 30;
  inset: 24px 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(20px, 3vw, 54px);
  border-bottom: 0;
  background: transparent;
}
.brand { display: inline-flex; align-items: center; align-self: center; gap: 9px; justify-self: start; height: 44px; text-decoration: none; }
.brand-logo { display: block; width: 56px; height: auto; flex: 0 0 auto; opacity: .74; filter: brightness(.92); }
.brand > span:last-child { display: flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.065); border-radius: 999px; background: rgba(7,8,8,.105); box-shadow: inset 0 1px rgba(255,255,255,.035); backdrop-filter: blur(15px) saturate(1.2); line-height: 1.05; }
.brand small { margin-top: 0; color: rgba(241,236,223,.78); font-size: 13.5px; font-weight: 600; letter-spacing: .085em; white-space: nowrap; }
.top-actions { display: flex; align-items: center; align-self: center; justify-self: end; gap: 18px; height: 44px; padding: 4px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 999px; background: rgba(7,8,8,.13); box-shadow: inset 0 1px rgba(255,255,255,.04); backdrop-filter: blur(15px) saturate(1.2); }
.index-toggle { padding: 8px 0; border: 0; background: none; font-size: 12px; letter-spacing: .1em; }
.sound-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; border: 0; background: none; color: rgba(241,236,223,.82); font-size: 11px; letter-spacing: .07em; }
.sound-bars { display: inline-flex; align-items: end; gap: 2px; width: 13px; height: 12px; }
.sound-bars i { display: block; width: 2px; border-radius: 2px; background: #d9bea0; transform-origin: bottom; animation: sound-bar .9s ease-in-out infinite alternate; }
.sound-bars i:nth-child(1) { height: 5px; animation-delay: -.45s; }
.sound-bars i:nth-child(2) { height: 10px; animation-delay: -.15s; }
.sound-bars i:nth-child(3) { height: 7px; animation-delay: -.7s; }
.sound-toggle[aria-pressed="false"] .sound-bars i { height: 2px; animation: none; opacity: .45; }
@keyframes sound-bar { to { transform: scaleY(.38); opacity: .55; } }
.consult-link { position: relative; padding: 8px 0 8px 12px; color: rgba(241,236,223,.82); font-size: 12px; letter-spacing: .1em; text-decoration: none; }
.consult-link::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--red); transform: translateY(-50%); }

.record-field { position: absolute; z-index: 12; inset: 0; pointer-events: none; transform: translate3d(calc(var(--camera-x) + var(--pointer-x)), calc(var(--camera-y) + var(--pointer-y)), 0) scale(1); transform-origin: 50% 50%; transition: transform 1.25s cubic-bezier(.16,.82,.18,1); }
.archive.is-focused .record-field { transform: translate3d(var(--camera-x), var(--camera-y), 0) scale(1.075); }
.record-node { position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; padding: 0; border: 0; background: none; opacity: 0; transform: translate(-50%,-50%); pointer-events: auto; animation: node-arrive .8s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: calc(.16s + var(--i, 0) * .055s); }
.record-node:nth-child(1) { --i: 1; } .record-node:nth-child(2) { --i: 2; } .record-node:nth-child(3) { --i: 3; } .record-node:nth-child(4) { --i: 4; } .record-node:nth-child(5) { --i: 5; } .record-node:nth-child(6) { --i: 6; } .record-node:nth-child(7) { --i: 7; } .record-node:nth-child(8) { --i: 8; } .record-node:nth-child(9) { --i: 9; } .record-node:nth-child(10) { --i: 10; } .record-node:nth-child(11) { --i: 11; } .record-node:nth-child(12) { --i: 12; } .record-node:nth-child(13) { --i: 13; }
@keyframes node-arrive { from { opacity: 0; } to { opacity: 1; } }
.node-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border: 1px solid #d9bea0; border-radius: 50%; background: rgba(9,10,9,.82); transform: translate(-50%, -50%); box-shadow: 0 0 0 0 rgba(166,58,39,.28); transition: width .25s ease, height .25s ease, background .25s ease, box-shadow .5s ease; }
.record-node:nth-child(3n+1) .node-dot { box-shadow: 0 0 18px rgba(197,125,72,.12); }
.record-node:nth-child(3n+2) .node-dot { border-color: rgba(133,190,192,.74); box-shadow: 0 0 18px rgba(73,153,160,.12); }
.node-dot::before, .node-dot::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--line); transform: translate(-50%,-50%); }
.node-dot::before { width: 34px; height: 1px; }
.node-dot::after { width: 1px; height: 34px; }
.node-label { position: absolute; left: 31px; top: 12px; width: max-content; max-width: 190px; color: rgba(241,236,223,.72); font-size: 13px; letter-spacing: .02em; text-align: left; transition: color .25s ease, transform .25s ease, opacity .3s ease; }
.record-node:hover .node-dot,
.record-node:focus-visible .node-dot,
.record-node.is-active .node-dot { width: 10px; height: 10px; background: var(--red); box-shadow: 0 0 0 9px rgba(166,58,39,.16); }
.record-node:hover .node-label,
.record-node:focus-visible .node-label,
.record-node.is-active .node-label { color: var(--ivory); transform: translateX(4px); }
.archive.is-focused .record-node:not(.is-active) { opacity: .15 !important; filter: blur(.45px); }
.archive.is-focused .record-node.is-active .node-label { opacity: 0; transform: translateX(12px); }
.archive.is-focused .record-node.is-active .node-dot { box-shadow: 0 0 0 12px rgba(166,58,39,.12), 0 0 42px rgba(217,190,160,.42); }

.dossier {
  position: absolute;
  z-index: 20;
  left: clamp(54px, 7.5vw, 132px);
  top: clamp(150px, 22vh, 220px);
  bottom: auto;
  width: min(470px, 39vw);
  max-height: min(68vh, calc(100dvh - 190px));
  min-height: 0;
  padding: 4px 0 4px 28px;
  border-left: 1px solid rgba(241,236,223,.52);
  opacity: 0;
  transform: translate3d(-18px, 20px, 0);
  pointer-events: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(241,236,223,.25) transparent;
  transition: opacity .55s .28s ease, transform .8s .22s cubic-bezier(.18,.8,.2,1);
}
.archive.is-focused .dossier { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; }
.dossier-close { position: absolute; top: -6px; right: 0; display: grid; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--soft); font-size: 25px; font-weight: 300; line-height: 1; place-items: center; }
.dossier-close:hover,
.dossier-close:focus-visible { color: var(--ivory); }
.dossier-close:focus-visible { outline: 1px solid rgba(217,190,160,.55); outline-offset: -3px; border-radius: 50%; }
.dossier-type { margin: 0 0 18px; color: #d2b48f; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.dossier-title { margin: 0 0 19px; font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; font-size: clamp(29px, 3vw, 44px); font-weight: 700; line-height: 1.2; letter-spacing: -.045em; }
.dossier-copy { max-width: 42em; margin: 0; color: rgba(241,236,223,.78); font-size: 16px; line-height: 1.75; }
.dossier-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; margin: 22px 0 0; }
.dossier-facts:empty { display: none; }
.dossier-facts > div { min-width: 0; padding: 10px 0 9px; border-top: 1px solid var(--line); }
.dossier-facts dt { margin: 0 0 5px; color: #d2b48f; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.dossier-facts dd { margin: 0; color: rgba(241,236,223,.9); font-size: 14px; line-height: 1.45; }
.dossier[data-layout="practice"] .dossier-facts { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dossier[data-layout="publication"] .dossier-facts { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dossier-source { margin: 22px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--soft); font-size: 12px; line-height: 1.6; }
.dossier-links { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 12px; }
.dossier-links:empty { display: none; }
.dossier-links a { color: #d9bea0; font-size: 12px; line-height: 1.5; text-decoration: none; text-underline-offset: 4px; }
.dossier-links a:hover { text-decoration: underline; }

.record-art {
  position: absolute;
  z-index: 16;
  left: 75%;
  top: 53%;
  width: min(41vw, 660px);
  height: min(63vh, 590px);
  opacity: 0;
  transform: translate3d(-45%, -47%, 0) scale(.86) rotate(-1.5deg);
  transform-origin: 50% 50%;
  pointer-events: none;
  isolation: isolate;
  --art-a: rgba(217,190,160,.22);
  --art-b: rgba(88,151,158,.16);
  transition: opacity .55s .12s ease, transform 1.15s .04s cubic-bezier(.16,.82,.18,1), filter .8s ease;
}
.archive.is-focused .record-art { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1) rotate(0); }
.record-art::before { content: ""; position: absolute; z-index: -2; inset: 10% 13% 15% 1%; background-image: linear-gradient(120deg, rgba(255,255,255,.05), rgba(10,12,12,.22)), var(--art-image); background-size: cover; background-position: center; border-radius: 18px 4px 24px 5px; box-shadow: 0 28px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08); opacity: .25; filter: blur(5px) saturate(.84) brightness(.58); transform: perspective(1000px) rotateY(-16deg) rotateZ(1.6deg) translate3d(-32px,-22px,-70px); mask-image: linear-gradient(90deg, transparent, black 13%, black 86%, transparent); transition: opacity .8s ease, transform 1.25s cubic-bezier(.16,.82,.18,1); }
.archive.is-focused .record-art::before { opacity: .36; transform: perspective(1000px) rotateY(-13deg) rotateZ(1deg) translate3d(-42px,-27px,-70px); }
.record-art::after { content: ""; position: absolute; z-index: -1; inset: -5% -6% -8% -4%; background: radial-gradient(ellipse at 45% 48%, var(--art-a), transparent 53%), radial-gradient(ellipse at 78% 24%, var(--art-b), transparent 48%); filter: blur(28px); opacity: .9; mix-blend-mode: screen; }
.art-kicker { position: absolute; z-index: 3; left: 3%; top: 2%; margin: 0; color: rgba(217,190,160,.76); font-size: 10px; font-weight: 600; letter-spacing: .17em; }
.material-shadow { position: absolute; z-index: -1; inset: 15% -2% 6% 17%; background-image: linear-gradient(135deg, var(--art-a), rgba(7,8,8,.34) 64%), var(--art-image); background-size: cover; background-position: center; border-radius: 4px 22px 5px 28px; box-shadow: 0 36px 90px rgba(0,0,0,.42), inset 0 0 0 1px rgba(255,255,255,.08); filter: blur(2px) brightness(.56) saturate(.9); opacity: .36; transform: perspective(1000px) rotateY(-18deg) translate3d(42px,22px,-35px); mask-image: linear-gradient(90deg, transparent 0, black 8%, black 92%, transparent 100%); transition: opacity .9s ease, transform 1.35s cubic-bezier(.16,.82,.18,1); }
.archive.is-focused .material-shadow { opacity: .48; transform: perspective(1000px) rotateY(-14deg) translate3d(55px,28px,-35px); }
.art-material {
  --art-ry: -9deg;
  --art-rx: 2deg;
  --art-rz: -.7deg;
  --image-scale: 1.018;
  --image-x: 50%;
  --image-y: 50%;
  position: absolute;
  inset: 8% 3% 8% 5%;
  margin: 0;
  overflow: hidden;
  background: rgba(225,218,201,.08);
  border-radius: 3px 18px 4px 24px;
  box-shadow: 0 44px 110px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.14), inset 28px 0 50px rgba(255,255,255,.035);
  transform: perspective(1050px) rotateY(var(--art-ry)) rotateX(var(--art-rx)) rotateZ(var(--art-rz));
  transform-origin: 50% 55%;
  clip-path: inset(3% 45% 3% 45% round 18px);
  opacity: .18;
  mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.78) 4%, black 14%, black 91%, transparent 100%), linear-gradient(180deg, transparent 0, black 6%, black 92%, transparent 100%);
  mask-composite: intersect;
  transition: transform 1.1s cubic-bezier(.16,.82,.18,1), filter .8s ease, clip-path 1.05s .08s cubic-bezier(.16,.82,.18,1), opacity .6s .08s ease;
}
.archive.is-focused .art-material { clip-path: inset(0 round 3px 18px 4px 24px); opacity: 1; animation: material-breathe 10s 1.05s ease-in-out infinite alternate; }
.art-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--image-x) var(--image-y); opacity: .84; filter: grayscale(.08) sepia(.045) contrast(.96) brightness(.76) saturate(.92); transform: scale(var(--image-scale)); transition: transform 9s ease-out, object-position 1.1s ease, filter 1s ease; }
.archive.is-focused .art-image { transform: scale(calc(var(--image-scale) + .045)); animation: scene-drift 13s 1s ease-in-out infinite alternate; }
.art-material::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,.2) 0, rgba(255,255,255,.035) 16%, transparent 38%, var(--art-b) 68%, transparent 86%), radial-gradient(circle at 16% 16%, var(--art-a), transparent 32%); opacity: .62; mix-blend-mode: screen; animation: glass-light 8s ease-in-out infinite alternate; }
.art-material::after { content: ""; position: absolute; z-index: 1; inset: 0; border: 1px solid rgba(255,255,255,.08); border-radius: inherit; background: linear-gradient(180deg, rgba(6,7,7,.01), rgba(6,7,7,.28)); box-shadow: inset -18px 0 42px rgba(94,156,160,.055); }
.art-caption { position: absolute; z-index: 2; right: 5%; bottom: 5%; max-width: 72%; margin: 0; color: rgba(244,239,227,.75); font-size: 10px; line-height: 1.55; letter-spacing: .06em; text-align: right; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.art-citation { display: none; position: absolute; inset: 0; padding: 15% 12%; background: linear-gradient(145deg, rgba(235,228,211,.86), rgba(180,168,146,.57)); color: #171816; }
.art-citation strong { display: block; max-width: 6em; font-size: clamp(70px, 9vw, 150px); font-weight: 760; line-height: .85; letter-spacing: -.07em; opacity: .8; }
.art-citation span { display: block; max-width: 24em; margin-top: 12%; font-size: 14px; font-weight: 650; line-height: 1.55; }
.record-art[data-layout="publication"] .art-image { display: block; }
.record-art[data-layout="publication"] .art-citation { display: none; }
.record-art[data-layout="credential"] .art-material { inset: 5% 12% 7% 16%; --art-ry: -12deg; --art-rz: 1deg; }
.record-art[data-record="service"] .art-material { inset: 12% -3% 12% 0; }
.record-art[data-record="media"] .art-material { inset: 2% 12% 2% 15%; }
.record-art[data-record="education"] .art-material { inset: 2% 25% 3% 7%; --art-ry: -14deg; --art-rz: 1.6deg; --image-scale: 1.1; --image-x: 28%; --image-y: 50%; }
.record-art[data-record="exam"] .art-material { inset: 19% -1% 21% 5%; --art-ry: -7deg; --art-rz: -.4deg; --image-scale: 1.17; --image-x: 52%; --image-y: 50%; }
.record-art[data-record="open"] .art-material { inset: 7% 6% 9% 19%; --art-ry: 8deg; --art-rz: -1.7deg; --image-scale: 1.12; --image-x: 72%; --image-y: 50%; }
.record-art[data-record="registration"] .art-material { inset: 4% 29% 5% 2%; --art-ry: -17deg; --art-rz: 2deg; --image-scale: 1.15; --image-x: 16%; --image-y: 50%; }
.record-art[data-record="corporate"] .art-material { inset: 4% 4% 17% 16%; --art-ry: -12deg; --art-rz: .8deg; --image-scale: 1.08; --image-x: 55%; --image-y: 50%; }
.record-art[data-record="inheritance"] .art-material { inset: 15% 16% 3% 1%; --art-ry: -4deg; --art-rz: -1.5deg; --image-scale: 1.08; --image-x: 48%; --image-y: 50%; }
.record-art[data-record="property"] .art-material { inset: 2% 18% 8% 10%; --art-ry: 7deg; --art-rz: .7deg; --image-scale: 1.08; --image-x: 54%; --image-y: 50%; }
.record-art[data-record="court"] .art-material { inset: 11% 1% 12% 13%; --art-ry: -15deg; --art-rz: -1deg; --image-scale: 1.08; --image-x: 48%; --image-y: 50%; }
.record-art[data-record="principles"] .art-material { inset: 2% 7% 18% 12%; --art-ry: -8deg; --art-rz: 1.5deg; --image-scale: 1.14; --image-x: 74%; --image-y: 50%; }
.record-art[data-record="writing"] .art-material { inset: 17% 8% 2% 4%; --art-ry: 6deg; --art-rz: -1.3deg; --image-scale: 1.1; --image-x: 60%; --image-y: 50%; }
.record-art[data-record="article"] .art-material { inset: 3% 18% 4% 10%; --art-ry: -13deg; --art-rz: 2deg; }
.record-art[data-record="service"] .art-material { --art-ry: -5deg; --art-rz: -.5deg; --image-scale: 1.06; --image-x: 54%; --image-y: 50%; }
.record-art[data-record="media"] .art-material { --art-ry: 6deg; --art-rz: -1.2deg; --image-scale: 1.08; --image-x: 48%; --image-y: 50%; }
.record-art[data-record="service"] { --art-a: rgba(203,162,112,.24); --art-b: rgba(95,151,157,.2); }
.record-art[data-record="media"] { --art-a: rgba(167,75,48,.24); --art-b: rgba(72,139,156,.24); }
.record-art[data-layout="credential"] { --art-a: rgba(222,199,159,.2); --art-b: rgba(107,129,151,.16); }
.record-art[data-layout="publication"] { --art-a: rgba(177,74,47,.22); --art-b: rgba(199,159,103,.2); }
@keyframes material-breathe { to { transform: perspective(1050px) rotateY(calc(var(--art-ry) + 4deg)) rotateX(calc(var(--art-rx) - 1deg)) rotateZ(calc(var(--art-rz) + .6deg)) translate3d(-4px,-5px,16px); } }
@keyframes glass-light { to { opacity: .82; transform: translate3d(3%, -1%, 0) scale(1.03); } }
@keyframes scene-drift { from { transform: scale(calc(var(--image-scale) + .03)) translate3d(-.7%, .3%, 0); } to { transform: scale(calc(var(--image-scale) + .09)) translate3d(.9%, -.8%, 0); } }

.record-index {
  position: absolute;
  z-index: 40;
  top: 18px;
  right: 0;
  bottom: 18px;
  width: min(410px, 92vw);
  padding: 38px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px 0 0 22px;
  background: linear-gradient(145deg, rgba(19,22,22,.78), rgba(4,5,5,.86));
  box-shadow: -30px 30px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.055);
  backdrop-filter: blur(32px) saturate(1.25);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.record-index[hidden] { display: none; }
.index-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 30px; }
.index-head p { margin: 0; color: #d2b48f; font-size: 12px; letter-spacing: .16em; }
.index-head p span { margin-left: 8px; color: var(--soft); }
.index-close { padding: 8px 0; border: 0; background: none; color: var(--soft); font-size: 12px; letter-spacing: .08em; }
.index-group + .index-group { margin-top: 28px; }
.index-group h2 { margin: 0 0 10px; color: var(--soft); font-size: 12px; font-weight: 600; letter-spacing: .08em; }
.record-index ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.record-index button { display: grid; grid-template-columns: 64px 1fr; width: 100%; padding: 15px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font-size: 14px; }
.record-index button span { color: var(--soft); font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif; font-size: 12px; font-weight: 600; }

@media (min-width: 801px) {
  .world-image { background-image: url("assets/jeongbon-record-space-v1.webp"); }
}

@media (max-width: 800px) {
  .topbar { inset: 12px 0 auto; grid-template-columns: 1fr auto; min-height: 44px; padding: 0 17px; }
  .top-actions { gap: 12px; padding: 3px 9px; }
  .sound-label { display: none; }
  .brand { gap: 7px; }
  .brand > span:last-child { height: 38px; padding: 0 11px; }
  .brand small { font-size: 12px; letter-spacing: .06em; }
  .brand-logo { width: 50px; }
  .node-label { display: none; }
  .node-education { left: 50%; top: 18%; }
  .node-exam { left: 66%; top: 27%; }
  .node-open { left: 80%; top: 36%; }
  .node-registration { left: 88%; top: 19%; }
  .node-corporate { left: 54%; top: 45%; }
  .node-inheritance { left: 72%; top: 52%; }
  .node-property { left: 88%; top: 45%; }
  .node-court { left: 86%; top: 64%; }
  .node-article { left: 72%; top: 12%; }
  .node-principles { left: 50%; top: 66%; }
  .node-writing { left: 64%; top: 76%; }
  .node-service { left: 79%; top: 75%; }
  .node-media { left: 90%; top: 84%; }
  .record-field { transition-duration: .9s; }
  .archive.is-focused .record-field { transform: translate3d(var(--camera-x), var(--camera-y), 0) scale(1.035); }
  .record-art { left: 77%; top: 28%; width: 58vw; height: 35vh; opacity: 0; }
  .archive.is-focused .record-art { opacity: .72; }
  .art-kicker, .art-caption { display: none; }
  .art-material { inset: 2%; }
  .record-art[data-layout="credential"] .art-material,
  .record-art[data-record="media"] .art-material { inset: 2% 8%; }
  .art-citation { padding: 17% 11%; }
  .art-citation strong { font-size: clamp(52px, 19vw, 86px); }
  .art-citation span { font-size: 10px; }
  .dossier { left: 23px; right: 17px; top: 43%; bottom: 32px; width: auto; max-height: none; min-height: 0; padding: 2px 10px 2px 20px; }
  .dossier-title { font-size: 30px; }
  .dossier-title,
  .dossier-copy,
  .dossier-source { word-break: normal; overflow-wrap: anywhere; }
  .dossier-copy { font-size: 15px; }
  .dossier-facts,
  .dossier[data-layout="practice"] .dossier-facts,
  .dossier[data-layout="publication"] .dossier-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 14px; }
  .dossier-facts dt { font-size: 12px; }
  .dossier-facts dd { font-size: 13px; }
  .dossier-source,
  .dossier-links a { font-size: 12px; }
  .record-index { top: 10px; right: 10px; bottom: 10px; width: calc(100% - 20px); padding: 28px 24px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* 2026-09-20 배경 분리 검토본: 외부 배경 영상과 배경 이미지만 제거 */
.world-video,
.world-image,
.world-scene {
  display: none !important;
}
.world {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(30, 37, 35, .68), rgba(8, 10, 9, .88) 48%, #050605 100%);
}
.world-shade {
  background:
    radial-gradient(ellipse at 52% 46%, transparent 0, rgba(3, 4, 4, .12) 47%, rgba(2, 3, 3, .55) 100%);
}

/* 배경 완전 제거 검토본: 순수 단색 위에 인터페이스만 유지 */
.world {
  background: #070807 !important;
}
.world-shade,
.world-grid,
.world-aurora,
.world-glass,
.world-grain {
  display: none !important;
}

/* 헤더 1차 정리: 의미가 불분명한 기록 목록 진입점 제거 */
.index-toggle,
.record-index {
  display: none !important;
}

/* 첫 화면에서 사무소의 세부 업무 제거 */
.node-corporate,
.node-inheritance,
.node-property,
.node-court {
  display: none !important;
}

/* 전자명함 공식 채널만 모은 1차 배치 */
.legacy-record-field,
.dossier,
.record-art,
.record-index {
  display: none !important;
}

.channel-field {
  position: absolute;
  z-index: 12;
  inset: clamp(112px, 15vh, 152px) clamp(34px, 8vw, 150px) clamp(34px, 7vh, 74px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: .8fr 1.25fr .9fr;
  align-items: center;
  gap: clamp(18px, 3vw, 46px) clamp(14px, 2.2vw, 36px);
}

.channel-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  color: rgba(241,236,223,.74);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  animation: channel-arrive .72s cubic-bezier(.2,.75,.2,1) forwards;
  transition: color .25s ease, transform .35s cubic-bezier(.2,.75,.2,1), opacity .25s ease;
}
.channel-link:nth-child(1) { animation-delay: .08s; }
.channel-link:nth-child(2) { animation-delay: .14s; }
.channel-link:nth-child(3) { animation-delay: .2s; }
.channel-link:nth-child(4) { animation-delay: .26s; }
.channel-link:nth-child(5) { animation-delay: .32s; }
.channel-link:nth-child(6) { animation-delay: .38s; }
.channel-link:nth-child(7) { animation-delay: .44s; }
.channel-link:nth-child(8) { animation-delay: .5s; }
@keyframes channel-arrive { to { opacity: 1; transform: translateY(0); } }

.channel-link img {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
  filter: saturate(.78) brightness(.92);
  transition: filter .25s ease, transform .35s cubic-bezier(.2,.75,.2,1);
}
.channel-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 0;
  height: 1px;
  background: rgba(217,190,160,.65);
  transform: translateX(-50%);
  transition: width .35s cubic-bezier(.2,.75,.2,1);
}
.channel-link:hover,
.channel-link:focus-visible { color: var(--ivory); transform: translateY(-4px); }
.channel-link:hover img,
.channel-link:focus-visible img { filter: saturate(1) brightness(1.08); transform: scale(1.08); }
.channel-link:hover::after,
.channel-link:focus-visible::after { width: 58%; }

.channel-blog {
  grid-column: span 2;
  align-self: end;
  padding-bottom: 10px;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 470;
  letter-spacing: .015em;
}
.channel-core {
  grid-column: span 2;
  align-self: center;
  font-size: clamp(22px, 2.15vw, 36px);
  font-weight: 650;
  letter-spacing: -.035em;
}
.channel-core img { width: clamp(40px, 4vw, 58px); height: clamp(40px, 4vw, 58px); }
.channel-community {
  grid-column: span 3;
  align-self: start;
  padding-top: 12px;
  font-size: clamp(17px, 1.45vw, 23px);
  font-weight: 540;
  letter-spacing: -.012em;
}
.channel-community img { width: clamp(30px, 2.6vw, 40px); height: clamp(30px, 2.6vw, 40px); }

@media (max-width: 800px) {
  .channel-field {
    inset: 92px 22px 28px;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(4, minmax(0,1fr));
    gap: 12px 16px;
  }
  .channel-link,
  .channel-blog,
  .channel-core,
  .channel-community {
    grid-column: span 1;
    align-self: center;
    justify-content: flex-start;
    padding: 0;
    font-size: 15px;
    font-weight: 560;
    letter-spacing: -.01em;
  }
  .channel-link img,
  .channel-core img,
  .channel-community img { width: 30px; height: 30px; }
}

/* 채널 배치 검토 2차: 위계를 지우고 오른쪽 끝으로 한 덩어리 정렬 */
.channel-field {
  inset: clamp(108px, 14vh, 142px) clamp(26px, 4vw, 70px) clamp(28px, 7vh, 66px) auto;
  width: clamp(230px, 22vw, 330px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 2.1vh, 24px);
}
.channel-link,
.channel-blog,
.channel-core,
.channel-community {
  align-self: auto;
  justify-content: flex-start;
  min-height: 34px;
  padding: 0;
  font-size: clamp(15px, 1.12vw, 17px);
  font-weight: 520;
  letter-spacing: -.01em;
}
.channel-link img,
.channel-core img,
.channel-community img {
  width: 30px;
  height: 30px;
}
.channel-link::after { left: 0; transform: none; }
.channel-link:hover::after,
.channel-link:focus-visible::after { width: 100%; }

@media (max-width: 800px) {
  .channel-field {
    inset: 88px 18px 22px auto;
    width: min(260px, 72vw);
    display: flex;
    gap: 10px;
  }
  .channel-link,
  .channel-blog,
  .channel-core,
  .channel-community {
    min-height: 30px;
    font-size: 14px;
  }
  .channel-link img,
  .channel-core img,
  .channel-community img { width: 26px; height: 26px; }
}

/* 헤더 이름을 장면 전환 장치로 사용한 호버 시안 */
.brand-name {
  position: relative;
  overflow: hidden;
  transition: width .65s cubic-bezier(.16,.82,.18,1), padding .65s cubic-bezier(.16,.82,.18,1), border-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.brand-name::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.1) 48%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.16,.82,.18,1);
}
.brand-logo { transition: opacity .35s ease, filter .35s ease, transform .6s cubic-bezier(.16,.82,.18,1); }
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  opacity: 1;
  filter: brightness(1.08);
  transform: translateX(3px) scale(1.04);
}
.brand:hover .brand-name,
.brand:focus-visible .brand-name {
  padding-inline: 22px !important;
  border-color: rgba(217,190,160,.38) !important;
  background: rgba(217,190,160,.075) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 0 34px rgba(217,190,160,.08) !important;
}
.brand:hover .brand-name::after,
.brand:focus-visible .brand-name::after { transform: translateX(120%); }

.identity-scene {
  position: absolute;
  z-index: 11;
  left: clamp(42px, 9vw, 160px);
  top: 50%;
  display: grid;
  width: min(48vw, 760px);
  transform: translate3d(-18px,-44%,0);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, transform .8s cubic-bezier(.16,.82,.18,1);
}
.identity-scene::before {
  content: "";
  position: absolute;
  left: -7vw;
  top: 50%;
  width: min(52vw, 820px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217,190,160,.5) 24%, rgba(241,236,223,.12) 75%, transparent);
  transform: scaleX(.1);
  transform-origin: left center;
  transition: transform .9s .08s cubic-bezier(.16,.82,.18,1);
}
.identity-scene p {
  margin: 0 0 12px;
  color: rgba(217,190,160,.7);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .24em;
}
.identity-scene strong {
  color: rgba(241,236,223,.96);
  font-size: clamp(72px, 10vw, 170px);
  font-weight: 620;
  line-height: .9;
  letter-spacing: -.075em;
  text-shadow: 0 0 44px rgba(217,190,160,.08);
}
.identity-scene span {
  justify-self: end;
  margin-top: 24px;
  color: rgba(241,236,223,.28);
  font-size: 11px;
  letter-spacing: .36em;
}
.archive:has(.brand:hover) .identity-scene,
.archive:has(.brand:focus-visible) .identity-scene {
  opacity: 1;
  transform: translate3d(0,-50%,0);
}
.archive:has(.brand:hover) .identity-scene::before,
.archive:has(.brand:focus-visible) .identity-scene::before { transform: scaleX(1); }
.archive:has(.brand:hover) .channel-field,
.archive:has(.brand:focus-visible) .channel-field {
  opacity: .22;
  transform: translateX(18px);
  filter: blur(.35px);
}
.channel-field { transition: opacity .45s ease, transform .7s cubic-bezier(.16,.82,.18,1), filter .45s ease; }

@media (max-width: 800px) {
  .identity-scene { left: 26px; width: 65vw; }
  .identity-scene strong { font-size: clamp(58px, 21vw, 104px); }
  .identity-scene span { display: none; }
}

/* 인물 장면 안에서 이력이 한 줄의 시간으로 이어지는 표현 */
.identity-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  width: min(720px, 48vw);
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(241,236,223,.16);
}
.identity-timeline li {
  position: relative;
  min-width: 0;
  padding: 17px 20px 0 0;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .38s ease, transform .55s cubic-bezier(.16,.82,.18,1);
}
.identity-timeline li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d9bea0;
  box-shadow: 0 0 0 5px rgba(217,190,160,.07);
}
.identity-timeline time,
.identity-timeline em { display: block; font-style: normal; }
.identity-timeline time {
  margin-bottom: 7px;
  color: rgba(217,190,160,.62);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
}
.identity-timeline em {
  max-width: 11em;
  color: rgba(241,236,223,.66);
  font-size: clamp(11px, .9vw, 13px);
  line-height: 1.5;
}
.archive:has(.brand:hover) .identity-timeline li,
.archive:has(.brand:focus-visible) .identity-timeline li {
  opacity: 1;
  transform: translateY(0);
}
.archive:has(.brand:hover) .identity-timeline li:nth-child(1),
.archive:has(.brand:focus-visible) .identity-timeline li:nth-child(1) { transition-delay: .18s; }
.archive:has(.brand:hover) .identity-timeline li:nth-child(2),
.archive:has(.brand:focus-visible) .identity-timeline li:nth-child(2) { transition-delay: .28s; }
.archive:has(.brand:hover) .identity-timeline li:nth-child(3),
.archive:has(.brand:focus-visible) .identity-timeline li:nth-child(3) { transition-delay: .38s; }
.archive:has(.brand:hover) .identity-timeline li:nth-child(4),
.archive:has(.brand:focus-visible) .identity-timeline li:nth-child(4) { transition-delay: .48s; }

@media (max-width: 800px) {
  .identity-scene { top: 48%; }
  .identity-timeline {
    grid-template-columns: repeat(2, minmax(0,1fr));
    width: 68vw;
    margin-top: 30px;
    border-top: 0;
  }
  .identity-timeline li { padding: 13px 12px 13px 0; border-top: 1px solid rgba(241,236,223,.14); }
}

/* 이름 클릭 시 헤더 화면을 떠나 이력 장면으로 완전히 전환 */
.brand-logo-link { display: flex; align-items: center; height: 44px; }
.brand-name { height: 40px; padding: 0 16px; border: 1px solid rgba(255,255,255,.065); border-radius: 999px; background: rgba(7,8,8,.105); color: inherit; cursor: pointer; }
.archive:not(.is-identity) .identity-scene { opacity: 0 !important; transform: translate3d(-18px,-44%,0) !important; }
.archive:not(.is-identity) .identity-timeline li { opacity: 0 !important; transform: translateY(9px) !important; }

.identity-close {
  position: fixed;
  z-index: 32;
  left: clamp(24px, 3.4vw, 58px);
  top: clamp(24px, 3.5vh, 42px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(242,238,230,.18);
  border-radius: 999px;
  background: rgba(13,11,9,.64);
  box-shadow: inset 0 1px rgba(255,255,255,.05),0 12px 36px rgba(0,0,0,.22);
  backdrop-filter: blur(16px) saturate(1.15);
  color: rgba(241,236,223,.90);
  font-size: 11px;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity .35s .28s ease,transform .5s .28s ease,color .2s ease,background .25s ease,border-color .25s ease;
}
.identity-close::before{content:"←";display:block;color:#d99262;font-size:15px;line-height:1;transition:transform .25s ease}
.identity-close:hover,
.identity-close:focus-visible { color: var(--ivory);background:rgba(22,17,13,.5);border-color:rgba(217,146,98,.24);outline:0;box-shadow:inset 0 1px rgba(255,255,255,.045),0 0 0 2px rgba(213,74,16,.10),0 10px 34px rgba(0,0,0,.18) }
.identity-close:hover::before,.identity-close:focus-visible::before{transform:translateX(-3px)}

.archive.is-identity .topbar,
.archive.is-identity .channel-field {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity .38s ease, transform .55s cubic-bezier(.16,.82,.18,1);
}
.archive.is-identity .channel-field { transform: translateX(34px); }
.archive.is-identity .identity-scene {
  z-index: 31;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  display: grid;
  place-items: center;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.archive.is-identity .identity-scene::before {
  left: 0;
  top: 50%;
  width: 100%;
  transform: scaleX(1);
}
.archive.is-identity .identity-close {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.archive.is-identity .identity-timeline {
  width: min(1180px, calc(100vw - 12vw));
  margin: 0;
  border-top-color: rgba(241,236,223,.22);
}
.archive.is-identity .identity-timeline li {
  min-height: 150px;
  padding: 26px 34px 0 0;
  opacity: 1;
  transform: translateY(0);
}
.archive.is-identity .identity-timeline time {
  margin-bottom: 18px;
  color: rgba(217,190,160,.72);
  font-size: clamp(16px, 1.6vw, 24px);
  letter-spacing: .12em;
}
.archive.is-identity .identity-timeline em {
  max-width: 13em;
  color: rgba(241,236,223,.88);
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 560;
  line-height: 1.35;
  letter-spacing: -.035em;
}
.archive.is-identity .identity-timeline li::before {
  top: -5px;
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 8px rgba(217,190,160,.055), 0 0 24px rgba(217,190,160,.12);
}

@media (max-width: 800px) {
  .brand-name { height: 38px; padding-inline: 11px; }
  .archive.is-identity .identity-timeline {
    grid-template-columns: 1fr;
    width: calc(100vw - 54px);
    border-top: 0;
  }
  .archive.is-identity .identity-timeline li { min-height: 0; padding: 17px 0 19px 26px; border-top: 0; border-left: 1px solid rgba(241,236,223,.18); }
  .archive.is-identity .identity-timeline li::before { left: -5px; top: 27px; }
  .archive.is-identity .identity-timeline time { margin-bottom: 5px; font-size: 13px; }
  .archive.is-identity .identity-timeline em { font-size: 18px; }
}

/* 이력 장면을 표가 아닌 한 편의 움직이는 자막 시퀀스로 전환 */
.identity-film,
.identity-film-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.identity-film {
  z-index: -2;
  object-fit: cover;
  opacity: 0;
  filter: saturate(.62) contrast(1.12) brightness(.42);
  transform: scale(1.06);
  transition: opacity .7s ease;
}
.identity-film-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(3,4,4,.8), rgba(3,4,4,.32) 55%, rgba(3,4,4,.55)), linear-gradient(180deg, rgba(3,4,4,.3), transparent 50%, rgba(3,4,4,.68));
  opacity: 0;
  transition: opacity .7s ease;
}
.archive.is-identity .identity-film { opacity: .78; animation: identity-camera 18s ease-in-out infinite alternate; }
.archive.is-identity .identity-film-shade { opacity: 1; }
@keyframes identity-camera { from { transform: scale(1.06) translate3d(-.5%,0,0); } to { transform: scale(1.13) translate3d(1%,-.7%,0); } }

.archive.is-identity .identity-timeline {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.archive.is-identity .identity-timeline::before {
  content: "";
  position: absolute;
  left: 8vw;
  right: 8vw;
  top: 66%;
  height: 1px;
  background: linear-gradient(90deg, rgba(217,190,160,.06), rgba(217,190,160,.56), rgba(241,236,223,.08));
  transform: scaleX(0);
  transform-origin: left;
  animation: history-thread 16s .4s ease-in-out infinite;
}
.archive.is-identity .identity-timeline li {
  position: absolute;
  left: clamp(42px, 9vw, 150px);
  top: 50%;
  width: min(720px, 70vw);
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translate3d(0,38px,0);
  animation: history-caption 16s ease-in-out infinite;
}
.archive.is-identity .identity-timeline li:nth-child(1) { animation-delay: 0s; }
.archive.is-identity .identity-timeline li:nth-child(2) { animation-delay: 4s; }
.archive.is-identity .identity-timeline li:nth-child(3) { animation-delay: 8s; }
.archive.is-identity .identity-timeline li:nth-child(4) { animation-delay: 12s; }
.archive.is-identity .identity-timeline li::before { display: none; }
.archive.is-identity .identity-timeline time {
  margin: 0 0 13px;
  color: rgba(217,190,160,.8);
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: .22em;
}
.archive.is-identity .identity-timeline em {
  max-width: none;
  color: rgba(247,243,233,.97);
  font-size: clamp(34px, 5.1vw, 82px);
  font-weight: 570;
  line-height: 1.08;
  letter-spacing: -.055em;
  text-shadow: 0 12px 45px rgba(0,0,0,.38);
}
@keyframes history-caption {
  0% { opacity: 0; transform: translate3d(0,42px,0); filter: blur(8px); }
  4% { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
  17% { opacity: 1; transform: translate3d(18px,0,0); filter: blur(0); }
  23% { opacity: 0; transform: translate3d(46px,-18px,0); filter: blur(5px); }
  100% { opacity: 0; transform: translate3d(46px,-18px,0); filter: blur(5px); }
}
@keyframes history-thread {
  0% { transform: scaleX(0); opacity: 0; }
  6% { opacity: 1; }
  92% { transform: scaleX(1); opacity: .7; }
  100% { transform: scaleX(1); opacity: 0; }
}

@media (max-width: 800px) {
  .archive.is-identity .identity-timeline { width: 100%; }
  .archive.is-identity .identity-timeline li {
    left: 28px;
    top: 48%;
    width: calc(100vw - 56px);
    padding: 0;
    border: 0;
  }
  .archive.is-identity .identity-timeline em { font-size: clamp(30px, 10vw, 48px); }
  .archive.is-identity .identity-timeline::before { left: 28px; right: 28px; top: 64%; }
}

/* 영상은 최종 단계에서 교체: 현재는 자막 동작과 전환 구조만 검증 */
.identity-film { display: none !important; }
.archive.is-identity .identity-scene { background: #070807; }
.identity-film-shade {
  opacity: 1 !important;
  background: radial-gradient(circle at 62% 40%, rgba(38,40,38,.32), rgba(7,8,7,.2) 36%, #070807 76%);
}

/* 레퍼런스 반영: 동일 위치의 자막 교체가 아닌 장면별 키네틱 타이포그래피 */
.archive.is-identity .identity-timeline::before { display: none; }
.archive.is-identity .identity-timeline li {
  width: auto;
  max-width: 46vw;
  animation-duration: 18s;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
  animation-iteration-count: infinite;
}
.archive.is-identity .identity-timeline em { font-size: inherit; }
.archive.is-identity .identity-timeline em span { display: inline-block; }

.archive.is-identity .identity-timeline li:nth-child(1) {
  left: 9vw;
  top: 58%;
  animation-name: kinetic-a;
  animation-delay: 0s;
}
.archive.is-identity .identity-timeline li:nth-child(1) time { margin: 0 0 10px 3px; font-size: 12px; }
.archive.is-identity .identity-timeline li:nth-child(1) em span:first-child { font-size: clamp(31px,3.6vw,54px); font-weight: 540; }
.archive.is-identity .identity-timeline li:nth-child(1) em span:last-child { margin-left: 13px; font-size: clamp(17px,1.6vw,24px); font-weight: 410; letter-spacing: .02em; }

.archive.is-identity .identity-timeline li:nth-child(2) {
  left: auto;
  right: 8vw;
  top: 28%;
  text-align: right;
  animation-name: kinetic-b;
  animation-delay: 4.5s;
}
.archive.is-identity .identity-timeline li:nth-child(2) time { margin: 0 2px 9px 0; font-size: 11px; }
.archive.is-identity .identity-timeline li:nth-child(2) em span:first-child { font-size: clamp(21px,2.5vw,38px); font-weight: 430; letter-spacing: -.025em; }
.archive.is-identity .identity-timeline li:nth-child(2) em span:last-child { display: block; margin-top: -2px; font-size: clamp(36px,4.1vw,62px); font-weight: 650; }

.archive.is-identity .identity-timeline li:nth-child(3) {
  left: 19vw;
  top: 29%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
  animation-name: kinetic-c;
  animation-delay: 9s;
}
.archive.is-identity .identity-timeline li:nth-child(3) time { margin: 0; writing-mode: vertical-rl; font-size: 10px; letter-spacing: .22em; }
.archive.is-identity .identity-timeline li:nth-child(3) em span:first-child { font-size: clamp(18px,1.65vw,25px); font-weight: 420; }
.archive.is-identity .identity-timeline li:nth-child(3) em span:last-child { display: block; font-size: clamp(38px,4.8vw,70px); font-weight: 630; line-height: .95; }

.archive.is-identity .identity-timeline li:nth-child(4) {
  left: auto;
  right: 11vw;
  top: 62%;
  animation-name: kinetic-d;
  animation-delay: 13.5s;
}
.archive.is-identity .identity-timeline li:nth-child(4) time { margin: 0 0 8px; font-size: 10px; }
.archive.is-identity .identity-timeline li:nth-child(4) em span:first-child { margin-right: 12px; color: rgba(217,190,160,.82); font-size: clamp(15px,1.4vw,21px); font-weight: 480; letter-spacing: .12em; }
.archive.is-identity .identity-timeline li:nth-child(4) em span:last-child { font-size: clamp(25px,2.9vw,44px); font-weight: 560; }

@keyframes kinetic-a {
  0% { opacity:0; transform:translate3d(-7vw,3vh,0) rotate(-1.6deg); filter:blur(9px); }
  5% { opacity:1; transform:translate3d(0,0,0) rotate(0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(3vw,-1vh,0) rotate(.25deg); filter:blur(0); }
  23% { opacity:0; transform:translate3d(8vw,-4vh,0) rotate(.7deg); filter:blur(4px); }
  100% { opacity:0; transform:translate3d(8vw,-4vh,0); }
}
@keyframes kinetic-b {
  0% { opacity:0; transform:translate3d(5vw,-4vh,0) scale(.92); filter:blur(7px); }
  5% { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
  16% { opacity:1; transform:translate3d(-2vw,2vh,0) scale(1.02); filter:blur(0); }
  23% { opacity:0; transform:translate3d(-7vw,5vh,0) scale(1.04); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(-7vw,5vh,0); }
}
@keyframes kinetic-c {
  0% { opacity:0; transform:translate3d(-2vw,-7vh,0) rotate(-4deg); filter:blur(9px); }
  5% { opacity:1; transform:translate3d(0,0,0) rotate(0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(1.5vw,3vh,0) rotate(.5deg); filter:blur(0); }
  23% { opacity:0; transform:translate3d(6vw,7vh,0) rotate(2deg); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(6vw,7vh,0); }
}
@keyframes kinetic-d {
  0% { opacity:0; transform:translate3d(7vw,4vh,0); filter:blur(7px); letter-spacing:.09em; }
  5% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(-2vw,-2vh,0); filter:blur(0); }
  23% { opacity:0; transform:translate3d(-7vw,-5vh,0); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(-7vw,-5vh,0); }
}

@media (max-width: 800px) {
  .archive.is-identity .identity-timeline li,
  .archive.is-identity .identity-timeline li:nth-child(n) {
    left: 28px;
    right: auto;
    top: 47%;
    width: calc(100vw - 56px);
    max-width: none;
    display: block;
    text-align: left;
  }
  .archive.is-identity .identity-timeline li:nth-child(3) time { writing-mode: horizontal-tb; margin-bottom: 8px; }
}

/* 2004 개업 장면: 연도와 문장을 하나의 블록으로 정렬 */
.archive.is-identity .identity-timeline li:nth-child(3) {
  display: block;
  gap: 0;
}
.archive.is-identity .identity-timeline li:nth-child(3) time {
  writing-mode: horizontal-tb;
  margin: 0 0 10px 2px;
  font-size: 11px;
  letter-spacing: .18em;
}

/* 최종 영상 공간을 가르던 장식선 제거 */
.archive.is-identity .identity-scene::before { display: none !important; }

/* 네 이력 장면의 타이포 크기 통일 — 위치와 움직임만 다르게 유지 */
.archive.is-identity .identity-timeline li:nth-child(n) time {
  font-size: 11px;
}
.archive.is-identity .identity-timeline li:nth-child(n) em span {
  font-size: clamp(30px, 3.25vw, 50px);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -.035em;
}

/* 네 장면은 서로 다른 화면 진입축을 사용한다 */
.archive.is-identity .identity-timeline li:nth-child(1) {
  left: 7vw;
  right: auto;
  top: 67%;
  text-align: left;
  animation-name: career-east;
}
.archive.is-identity .identity-timeline li:nth-child(2) {
  left: auto;
  right: 8vw;
  top: 17%;
  text-align: right;
  animation-name: career-southwest;
}
.archive.is-identity .identity-timeline li:nth-child(3) {
  left: 35vw;
  right: auto;
  top: 31%;
  text-align: left;
  animation-name: career-south;
}
.archive.is-identity .identity-timeline li:nth-child(4) {
  left: auto;
  right: 10vw;
  top: 69%;
  text-align: right;
  animation-name: career-northwest;
}

@keyframes career-east {
  0% { opacity:0; transform:translate3d(-18vw,1vh,0); filter:blur(9px); }
  5% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(6vw,0,0); filter:blur(0); }
  23% { opacity:0; transform:translate3d(25vw,-1vh,0); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(25vw,-1vh,0); }
}
@keyframes career-southwest {
  0% { opacity:0; transform:translate3d(10vw,-13vh,0); filter:blur(9px); }
  5% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(-4vw,5vh,0); filter:blur(0); }
  23% { opacity:0; transform:translate3d(-16vw,18vh,0); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(-16vw,18vh,0); }
}
@keyframes career-south {
  0% { opacity:0; transform:translate3d(0,-19vh,0); filter:blur(9px); }
  5% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(0,6vh,0); filter:blur(0); }
  23% { opacity:0; transform:translate3d(1vw,25vh,0); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(1vw,25vh,0); }
}
@keyframes career-northwest {
  0% { opacity:0; transform:translate3d(12vw,14vh,0); filter:blur(9px); }
  5% { opacity:1; transform:translate3d(0,0,0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(-5vw,-5vh,0); filter:blur(0); }
  23% { opacity:0; transform:translate3d(-18vw,-20vh,0); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(-18vw,-20vh,0); }
}

/* 위치는 흩어 두되, 네 문장은 한 물길처럼 왼쪽에서 오른쪽으로 흐른다 */
.archive.is-identity .identity-timeline li:nth-child(n) {
  right: auto;
  text-align: left;
  animation-name: career-flow;
}
.archive.is-identity .identity-timeline li:nth-child(1) { left: 7vw; top: 68%; }
.archive.is-identity .identity-timeline li:nth-child(2) { left: 45vw; top: 18%; }
.archive.is-identity .identity-timeline li:nth-child(3) { left: 17vw; top: 34%; }
.archive.is-identity .identity-timeline li:nth-child(4) { left: 48vw; top: 70%; }

@keyframes career-flow {
  0% { opacity:0; transform:translate3d(-13vw,4vh,0) rotate(-.35deg); filter:blur(9px); }
  5% { opacity:1; transform:translate3d(0,0,0) rotate(0); filter:blur(0); }
  16% { opacity:1; transform:translate3d(6vw,-1.5vh,0) rotate(.15deg); filter:blur(0); }
  23% { opacity:0; transform:translate3d(20vw,-4vh,0) rotate(.35deg); filter:blur(5px); }
  100% { opacity:0; transform:translate3d(20vw,-4vh,0); }
}

/* 네 장면 모두 연도 1줄 + 내용 1줄 */
.archive.is-identity .identity-timeline li:nth-child(n) time {
  display: block;
  margin: 0 0 10px 2px;
  writing-mode: horizontal-tb;
}
.archive.is-identity .identity-timeline li:nth-child(n) em {
  display: block;
  white-space: nowrap;
}
.archive.is-identity .identity-timeline li:nth-child(n) em span {
  display: inline !important;
  margin: 0 !important;
  font-size: clamp(30px, 3.25vw, 50px) !important;
  font-weight: 540 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}
.archive.is-identity .identity-timeline li:nth-child(n) em span + span {
  margin-left: .24em !important;
}

/* 둘째 줄은 사실명과 결과어 사이에 타이포 리듬을 둔다 */
.archive.is-identity .identity-timeline li:nth-child(1) em span:first-child {
  font-size: clamp(34px, 3.35vw, 52px) !important;
  font-weight: 560 !important;
}
.archive.is-identity .identity-timeline li:nth-child(1) em span:last-child {
  font-size: clamp(22px, 2.05vw, 32px) !important;
  font-weight: 420 !important;
  letter-spacing: -.01em !important;
}
.archive.is-identity .identity-timeline li:nth-child(2) em span:first-child {
  font-size: clamp(25px, 2.35vw, 36px) !important;
  font-weight: 430 !important;
}
.archive.is-identity .identity-timeline li:nth-child(2) em span:last-child {
  font-size: clamp(34px, 3.25vw, 50px) !important;
  font-weight: 650 !important;
}
.archive.is-identity .identity-timeline li:nth-child(3) em span:first-child {
  font-size: clamp(26px, 2.45vw, 38px) !important;
  font-weight: 440 !important;
}
.archive.is-identity .identity-timeline li:nth-child(3) em span:last-child {
  font-size: clamp(34px, 3.25vw, 50px) !important;
  font-weight: 640 !important;
}
.archive.is-identity .identity-timeline li:nth-child(4) em span:first-child {
  font-size: clamp(21px, 1.9vw, 29px) !important;
  font-weight: 450 !important;
  letter-spacing: .09em !important;
}
.archive.is-identity .identity-timeline li:nth-child(4) em span:last-child {
  font-size: clamp(30px, 2.85vw, 44px) !important;
  font-weight: 560 !important;
}

/* 헤더 호버는 외곽선을 만들지 않고 빛과 투명도만 변한다 */
.brand:hover .brand-name,
.brand:focus-visible .brand-name,
.brand-name:hover,
.brand-name:focus-visible {
  border-color: transparent !important;
  outline: none;
  box-shadow: inset 0 1px rgba(255,255,255,.07), 0 0 30px rgba(217,190,160,.09) !important;
}

/* 정본 로고와 이름 높이를 맞추고, 정본미디어 주황색을 호버 서명으로 사용 */
.brand-logo-link,
.brand-name {
  height: 34px;
}
.brand-name {
  padding-inline: 14px;
}
.brand-name::after {
  background: linear-gradient(105deg, transparent 18%, rgba(214,64,0,.32) 49%, transparent 76%);
}
.brand:hover .brand-name,
.brand:focus-visible .brand-name,
.brand-name:hover,
.brand-name:focus-visible {
  color: rgba(255,246,239,.96);
  background: rgba(214,64,0,.11) !important;
  border-color: transparent !important;
  box-shadow: inset 0 1px rgba(255,159,112,.12), 0 0 28px rgba(214,64,0,.18) !important;
}
.brand:hover .brand-logo,
.brand:focus-visible .brand-logo {
  filter: brightness(1.04) drop-shadow(0 0 10px rgba(214,64,0,.22));
}

/* 핵심 브랜드와 발행 채널을 두 묶음으로 분리 */
.channel-field {
  gap: clamp(34px, 5vh, 54px);
}
.channel-group {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.7vh, 18px);
}

.channel-group-community .channel-link[href*="youtube.com"] img {
  box-sizing: border-box;
  padding: 5px 3px;
  border-radius: 6px;
  background: #fff;
}
@media (max-width: 800px) {
  .channel-field { gap: 24px; }
  .channel-group { gap: 8px; }
}

/* 세 채널 묶음을 오른쪽의 타이포그래피 입구로 전환 */
.channel-field {
  right: clamp(28px, 4.2vw, 76px);
  width: clamp(430px, 39vw, 620px);
  align-items: flex-end;
  gap: clamp(18px, 2.8vh, 30px);
  overflow: visible;
}

.channel-group {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: flex-end;
}

.channel-group-trigger {
  position: relative;
  z-index: 2;
  min-width: 128px;
  padding: 10px 0;
  border: 0;
  background: none;
  color: rgba(241,236,223,.56);
  font: inherit;
  font-size: clamp(19px, 1.45vw, 23px);
  font-weight: 560;
  letter-spacing: -.025em;
  text-align: right;
  cursor: pointer;
  transition: color .32s ease, transform .6s cubic-bezier(.16,.82,.18,1), text-shadow .32s ease, opacity .28s ease;
}

.channel-group-trigger::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d64000;
  opacity: 0;
  transform: translateY(-50%) scale(.25);
  box-shadow: 0 0 18px rgba(214,64,0,.68);
  transition: opacity .3s ease, transform .5s cubic-bezier(.16,.82,.18,1);
}

.channel-group-links {
  position: absolute;
  right: clamp(164px, 13.5vw, 205px);
  top: 50%;
  width: clamp(220px, 19vw, 290px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(24px, -50%);
  transition: opacity .3s ease, transform .62s cubic-bezier(.16,.82,.18,1), visibility 0s linear .62s;
}

.channel-group .channel-link,
.channel-group .channel-blog,
.channel-group .channel-core,
.channel-group .channel-community {
  min-height: 30px;
  width: max-content;
  max-width: 100%;
  padding: 0;
  gap: 11px;
  font-size: clamp(13px, .98vw, 15px);
  font-weight: 500;
  opacity: 0;
  animation: none !important;
  transform: translateX(18px);
  transition: color .25s ease, opacity .34s ease, transform .55s cubic-bezier(.16,.82,.18,1);
}

.channel-group .channel-link img,
.channel-group .channel-core img,
.channel-group .channel-community img {
  width: 26px;
  height: 26px;
}

.channel-group:hover .channel-group-trigger,
.channel-group:focus-within .channel-group-trigger,
.channel-group.is-open .channel-group-trigger {
  color: #f2eee5;
  transform: translateX(-10px);
  text-shadow: 0 0 24px rgba(214,64,0,.32);
}

.channel-group:hover .channel-group-trigger::after,
.channel-group:focus-within .channel-group-trigger::after,
.channel-group.is-open .channel-group-trigger::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.channel-group:hover .channel-group-links,
.channel-group:focus-within .channel-group-links,
.channel-group.is-open .channel-group-links {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

.channel-group:hover .channel-link,
.channel-group:focus-within .channel-link,
.channel-group.is-open .channel-link {
  opacity: 1;
  transform: translateX(0);
}
.channel-group:hover .channel-link:nth-child(2),
.channel-group:focus-within .channel-link:nth-child(2),
.channel-group.is-open .channel-link:nth-child(2) { transition-delay: .055s; }
.channel-group:hover .channel-link:nth-child(3),
.channel-group:focus-within .channel-link:nth-child(3),
.channel-group.is-open .channel-link:nth-child(3) { transition-delay: .11s; }

.channel-field:has(.channel-group:hover) .channel-group:not(:hover) .channel-group-trigger,
.channel-field:has(.channel-group:focus-within) .channel-group:not(:focus-within) .channel-group-trigger {
  opacity: .28;
}

@media (max-width: 800px) {
  .channel-field {
    right: 18px;
    width: min(340px, calc(100vw - 36px));
    gap: 12px;
  }
  .channel-group { min-height: 52px; }
  .channel-group-trigger { min-width: 110px; font-size: 18px; }
  .channel-group-links { right: 132px; width: min(190px, 54vw); }
  .channel-group .channel-link,
  .channel-group .channel-blog,
  .channel-group .channel-core,
  .channel-group .channel-community { font-size: 12px; }
  .channel-group .channel-link img,
  .channel-group .channel-core img,
  .channel-group .channel-community img { width: 24px; height: 24px; }
}

/* 세부 채널은 기본 화면에서 숨기고 각 입구의 전체 화면 레이어로 이동 */
.channel-group-links {
  display: none !important;
}

.channel-group:hover .channel-group-trigger,
.channel-group:focus-within .channel-group-trigger {
  color: #f2eee5;
  transform: translateX(-10px);
  text-shadow: 0 0 24px rgba(214,64,0,.32);
}

.channel-layer {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050505;
  color: #f2eee5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .58s ease, visibility 0s linear .58s;
}

.channel-layer.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.channel-layer-close {
  position: absolute;
  top: clamp(28px, 5vh, 50px);
  right: clamp(28px, 4.2vw, 76px);
  z-index: 2;
  padding: 9px 0;
  border: 0;
  background: none;
  color: rgba(242,238,229,.58);
  font: inherit;
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .25s ease;
}
.channel-layer-close:hover,
.channel-layer-close:focus-visible { color: #d64000; }

.channel-layer-stage {
  width: min(1120px, calc(100vw - 120px));
  transform: translateY(18px);
  opacity: 0;
  transition: transform .82s cubic-bezier(.16,.82,.18,1), opacity .5s ease;
}
.channel-layer.is-open .channel-layer-stage {
  transform: translateY(0);
  opacity: 1;
}

.channel-layer-title {
  margin: 0 0 clamp(54px, 9vh, 92px);
  color: rgba(242,238,229,.9);
  font-size: clamp(26px, 3.2vw, 48px);
  font-weight: 520;
  letter-spacing: -.045em;
}

.channel-layer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(34px, 5vw, 76px);
}

.channel-layer-link {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
  padding: 18px 0;
  color: rgba(242,238,229,.7);
  text-decoration: none;
  font-size: clamp(15px, 1.25vw, 19px);
  font-weight: 520;
  letter-spacing: -.02em;
  opacity: 0;
  transform: translateY(18px);
  transition: color .25s ease, transform .55s cubic-bezier(.16,.82,.18,1), opacity .4s ease;
}
.channel-layer.is-open .channel-layer-link {
  opacity: 1;
  transform: translateY(0);
}
.channel-layer.is-open .channel-layer-link:nth-child(2) { transition-delay: .08s; }
.channel-layer.is-open .channel-layer-link:nth-child(3) { transition-delay: .16s; }
.channel-layer-link:hover,
.channel-layer-link:focus-visible {
  color: #fff;
  transform: translateY(-5px);
}
.channel-layer-link img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
}
.channel-layer-link[href*="youtube.com"] img {
  box-sizing: border-box;
  padding: 7px 4px;
  border-radius: 7px;
  background: #fff;
}

@media (max-width: 800px) {
  .channel-layer-stage { width: calc(100vw - 44px); }
  .channel-layer-title { margin-bottom: 34px; }
  .channel-layer-links { grid-template-columns: 1fr; gap: 8px; }
  .channel-layer-link { font-size: 15px; }
}

/* 오른쪽 입구 최종 조형 : 번호 · 이름 · 역할 · 진입 표시 */
.channel-field {
  width: clamp(330px, 28vw, 430px);
  gap: clamp(14px, 2.2vh, 24px);
}

.channel-group {
  min-height: 78px;
  opacity: 0;
  transform: translateX(24px);
  animation: entrance-arrive .9s cubic-bezier(.16,.82,.18,1) forwards;
}
.channel-group:nth-child(1) { animation-delay: .08s; }
.channel-group:nth-child(2) { animation-delay: .18s; }
.channel-group:nth-child(3) { animation-delay: .28s; }
@keyframes entrance-arrive { to { opacity: 1; transform: translateX(0); } }

.channel-group-trigger {
  isolation: isolate;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 22px;
  align-items: center;
  gap: 14px;
  width: clamp(270px, 23vw, 350px);
  min-width: 0;
  min-height: 76px;
  padding: 12px 2px 12px 18px;
  color: rgba(242,238,229,.76);
  text-align: left;
}

.channel-group-trigger::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 0 4px 0;
  background: linear-gradient(92deg, rgba(214,64,0,.14), rgba(214,64,0,.035) 54%, transparent 88%);
  opacity: 0;
  transform: scaleX(.28);
  transform-origin: right center;
  transition: opacity .35s ease, transform .72s cubic-bezier(.16,.82,.18,1);
}

.channel-group-trigger::after {
  right: auto;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 1px;
  background: #d64000;
  opacity: 0;
  transform: translateY(-50%);
  box-shadow: 0 0 22px rgba(214,64,0,.5);
  transition: height .55s cubic-bezier(.16,.82,.18,1), opacity .3s ease;
}

.channel-group-index {
  align-self: start;
  padding-top: 7px;
  color: rgba(214,64,0,.76);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
}

.channel-group-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}
.channel-group-copy strong {
  color: inherit;
  font-size: clamp(20px, 1.55vw, 25px);
  font-weight: 560;
  line-height: 1;
  letter-spacing: -.035em;
}
.channel-group-copy small {
  color: rgba(242,238,229,.34);
  font-size: 11px;
  font-weight: 420;
  line-height: 1.25;
  letter-spacing: -.01em;
  transition: color .3s ease;
}

.channel-group-enter {
  align-self: center;
  color: rgba(242,238,229,.24);
  font-size: 18px;
  transform: translate(-8px, 8px);
  opacity: 0;
  transition: color .3s ease, opacity .35s ease, transform .6s cubic-bezier(.16,.82,.18,1);
}

.channel-group:hover .channel-group-trigger,
.channel-group:focus-within .channel-group-trigger {
  color: #fff8f0;
  transform: translateX(-12px);
  text-shadow: none;
}
.channel-group:hover .channel-group-trigger::before,
.channel-group:focus-within .channel-group-trigger::before {
  opacity: 1;
  transform: scaleX(1);
}
.channel-group:hover .channel-group-trigger::after,
.channel-group:focus-within .channel-group-trigger::after {
  height: 46px;
  opacity: 1;
  transform: translateY(-50%);
}
.channel-group:hover .channel-group-copy small,
.channel-group:focus-within .channel-group-copy small { color: rgba(255,213,193,.68); }
.channel-group:hover .channel-group-enter,
.channel-group:focus-within .channel-group-enter {
  color: #d64000;
  opacity: 1;
  transform: translate(0,0);
}

@media (max-width: 800px) {
  .channel-field { width: min(320px, calc(100vw - 36px)); }
  .channel-group { min-height: 68px; }
  .channel-group-trigger {
    width: min(280px, 78vw);
    min-height: 66px;
    grid-template-columns: 26px minmax(0,1fr) 18px;
    gap: 10px;
    padding-left: 14px;
  }
  .channel-group-copy strong { font-size: 20px; }
  .channel-group-copy small { font-size: 10px; }
}

/* 헤더와 균형을 맞춘 우측 상단의 작은 입구 묶음 */
.channel-field {
  top: clamp(84px, 10vh, 104px);
  right: clamp(28px, 4.2vw, 76px);
  bottom: auto;
  left: auto;
  width: clamp(238px, 20vw, 286px);
  justify-content: flex-start;
  gap: 3px;
}
.channel-group {
  min-height: 48px;
}
.channel-group-trigger {
  width: 100%;
  min-height: 46px;
  grid-template-columns: 25px minmax(0,1fr) 16px;
  gap: 9px;
  padding: 7px 0 7px 12px;
}
.channel-group-index {
  padding-top: 3px;
  font-size: 8.5px;
}
.channel-group-copy {
  gap: 4px;
}
.channel-group-copy strong {
  font-size: clamp(13px, .92vw, 15px);
  font-weight: 540;
  letter-spacing: -.02em;
}
.channel-group-copy small {
  font-size: 9px;
  line-height: 1.1;
}
.channel-group-enter {
  font-size: 13px;
}
.channel-group:hover .channel-group-trigger,
.channel-group:focus-within .channel-group-trigger {
  transform: translateX(-7px);
}
.channel-group:hover .channel-group-trigger::after,
.channel-group:focus-within .channel-group-trigger::after {
  height: 30px;
}

@media (max-width: 800px) {
  .channel-field {
    top: 82px;
    right: 18px;
    width: min(238px, calc(100vw - 36px));
  }
  .channel-group { min-height: 44px; }
  .channel-group-trigger {
    width: 100%;
    min-height: 42px;
    grid-template-columns: 23px minmax(0,1fr) 16px;
  }
  .channel-group-copy strong { font-size: 13px; }
  .channel-group-copy small { font-size: 8.5px; }
}

/* 사운드 · 상담 아래의 가로형 입구 */
.channel-field {
  top: clamp(76px, 8.5vh, 92px);
  right: clamp(28px, 4.2vw, 76px);
  width: auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(18px, 2vw, 30px);
}
.channel-group {
  width: auto;
  min-height: 32px;
}
.channel-group-trigger {
  display: flex;
  width: auto;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  color: rgba(242,238,229,.58);
  font-size: 13px;
  text-align: center;
}
.channel-group-index,
.channel-group-copy small,
.channel-group-enter {
  display: none;
}
.channel-group-copy {
  display: block;
}
.channel-group-copy strong {
  font-size: 13px;
  font-weight: 510;
  letter-spacing: -.01em;
}
.channel-group-trigger::before {
  inset: auto 0 -2px;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(214,64,0,.22), transparent 72%);
  transform: scaleX(.2);
  transform-origin: center;
}
.channel-group-trigger::after {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -1px;
  width: 0;
  height: 1px;
  border-radius: 0;
  transform: translateX(-50%);
  box-shadow: 0 0 10px rgba(214,64,0,.5);
  transition: width .48s cubic-bezier(.16,.82,.18,1), opacity .25s ease;
}
.channel-group:hover .channel-group-trigger,
.channel-group:focus-within .channel-group-trigger {
  color: #fff8f0;
  transform: translateY(-2px);
}
.channel-group:hover .channel-group-trigger::before,
.channel-group:focus-within .channel-group-trigger::before {
  opacity: 1;
  transform: scaleX(1);
}
.channel-group:hover .channel-group-trigger::after,
.channel-group:focus-within .channel-group-trigger::after {
  width: 100%;
  height: 1px;
  opacity: 1;
  transform: translateX(-50%);
}

@media (max-width: 800px) {
  .channel-field {
    top: 76px;
    right: 18px;
    width: auto;
    gap: 16px;
  }
  .channel-group,
  .channel-group-trigger { min-height: 28px; }
  .channel-group-copy strong { font-size: 12px; }
}

/* 상단 조작부와 같은 질감의 넓은 유리 패널 */
.channel-field {
  top: 80px;
  right: clamp(20px, 3vw, 54px);
  min-height: 44px;
  padding: 4px 20px;
  gap: clamp(18px, 1.7vw, 26px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 999px;
  background: rgba(7,8,8,.13);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 12px 34px rgba(0,0,0,.12);
  backdrop-filter: blur(15px) saturate(1.2);
}
.top-actions {
  padding-inline: 20px;
}
.channel-group,
.channel-group-trigger {
  min-height: 34px;
}

@media (max-width: 800px) {
  .channel-field {
    top: 70px;
    right: 17px;
    min-height: 40px;
    padding: 3px 15px;
    gap: 14px;
  }
  .top-actions { padding-inline: 15px; }
  .channel-group,
  .channel-group-trigger { min-height: 32px; }
}

/* 인물 레이어 최종 정리 : 움직이는 자막을 없애고 왼쪽에 차분하게 배치 */
.archive.is-identity .identity-timeline {
  position: absolute;
  left: clamp(54px, 7vw, 112px);
  right: auto;
  top: 50%;
  bottom: auto;
  width: min(500px, 40vw);
  height: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.2vh, 34px);
  margin: 0;
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 22px;
  background: rgba(8,9,9,.24);
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 26px 70px rgba(0,0,0,.2);
  backdrop-filter: blur(18px) saturate(1.15);
  box-sizing: border-box;
  transform: translateY(-45%);
  pointer-events: none;
}
.archive.is-identity .identity-timeline li,
.archive.is-identity .identity-timeline li:nth-child(n) {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  width: 100%;
  max-width: none;
  min-height: 0;
  display: block;
  padding: 0 0 0 18px;
  border: 0;
  text-align: left;
  opacity: 1;
  transform: none;
  filter: none;
  animation: none !important;
}
.archive.is-identity .identity-timeline li::before {
  display: block;
  left: 0;
  top: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(214,64,0,.82);
  box-shadow: 0 0 12px rgba(214,64,0,.35);
}
.archive.is-identity .identity-timeline li:nth-child(n) time {
  display: block;
  margin: 0 0 6px;
  color: rgba(217,190,160,.58);
  font-size: 10px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .14em;
}
.archive.is-identity .identity-timeline li:nth-child(n) em {
  display: block;
  color: rgba(242,238,229,.82);
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 470;
  line-height: 1.32;
  letter-spacing: -.025em;
  white-space: nowrap;
  text-shadow: none;
}
.archive.is-identity .identity-timeline li:nth-child(n) em span,
.archive.is-identity .identity-timeline li:nth-child(n) em span:first-child,
.archive.is-identity .identity-timeline li:nth-child(n) em span:last-child {
  display: inline !important;
  margin: 0 !important;
  color: inherit;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}
.archive.is-identity .identity-timeline li:nth-child(n) em span + span {
  margin-left: .3em !important;
  color: rgba(255,255,255,.94);
  font-weight: 620 !important;
}

@media (max-width: 800px) {
  .archive.is-identity .identity-timeline {
    left: 28px;
    top: 50%;
    width: calc(100vw - 56px);
    gap: 22px;
    padding: 24px 22px;
    border-radius: 18px;
    transform: translateY(-43%);
  }
  .archive.is-identity .identity-timeline li,
  .archive.is-identity .identity-timeline li:nth-child(n) { padding-left: 15px; }
  .archive.is-identity .identity-timeline li:nth-child(n) em { font-size: 17px; }
}

/* 인물 이력은 박스 없이 왼쪽 상단의 타이포그래피로 정리 */
.archive.is-identity .identity-timeline {
  left: clamp(52px, 7vw, 112px);
  top: clamp(126px, 17vh, 178px);
  width: min(520px, 42vw);
  gap: clamp(22px, 2.8vh, 30px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  transform: none;
}
.archive.is-identity .identity-timeline li,
.archive.is-identity .identity-timeline li:nth-child(n) {
  padding-left: 30px;
}
.archive.is-identity .identity-timeline li::before {
  left: 0;
  top: 6px;
  width: 16px;
  height: 1px;
  border-radius: 0;
  background: rgba(214,64,0,.78);
  box-shadow: 0 0 12px rgba(214,64,0,.28);
}
.archive.is-identity .identity-timeline li:nth-child(n) time {
  margin: 0 0 8px;
  color: rgba(214,92,42,.88);
  font-size: 9.5px;
  font-weight: 720;
  letter-spacing: .19em;
}
.archive.is-identity .identity-timeline li:nth-child(n) em {
  color: rgba(242,238,229,.7);
  font-size: clamp(17px, 1.42vw, 22px);
  font-weight: 430;
  line-height: 1.25;
  letter-spacing: -.035em;
}
.archive.is-identity .identity-timeline li:nth-child(n) em span:first-child {
  color: rgba(242,238,229,.66);
  font-weight: 430 !important;
}
.archive.is-identity .identity-timeline li:nth-child(n) em span:last-child {
  color: rgba(255,255,255,.96);
  font-size: 1.06em !important;
  font-weight: 660 !important;
  letter-spacing: -.04em !important;
}
.archive.is-identity .identity-timeline li:nth-child(4) em span:first-child {
  color: rgba(217,190,160,.72);
  font-size: .78em !important;
  font-weight: 560 !important;
  letter-spacing: .08em !important;
}

@media (max-width: 800px) {
  .archive.is-identity .identity-timeline {
    left: 26px;
    top: 116px;
    width: calc(100vw - 52px);
    gap: 20px;
    padding: 0;
    transform: none;
  }
  .archive.is-identity .identity-timeline li,
  .archive.is-identity .identity-timeline li:nth-child(n) { padding-left: 24px; }
  .archive.is-identity .identity-timeline li::before { width: 12px; }
}

/* 네 이력을 목록이 아닌 2×2 편집 지면으로 구성 */
.archive.is-identity .identity-timeline {
  top: clamp(132px, 17vh, 176px);
  width: min(720px, 54vw);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  grid-template-rows: auto auto;
  column-gap: clamp(46px, 5vw, 78px);
  row-gap: clamp(42px, 5vh, 62px);
}
.archive.is-identity .identity-timeline li,
.archive.is-identity .identity-timeline li:nth-child(n) {
  width: auto;
  padding: 0;
}
.archive.is-identity .identity-timeline li::before {
  left: 0;
  top: 5px;
  width: 14px;
}
.archive.is-identity .identity-timeline li:nth-child(n) time {
  padding-left: 23px;
  margin-bottom: 11px;
}
.archive.is-identity .identity-timeline li:nth-child(n) em {
  white-space: nowrap;
}
.archive.is-identity .identity-timeline li:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}
.archive.is-identity .identity-timeline li:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  padding-top: 22px;
}
.archive.is-identity .identity-timeline li:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
  margin-left: clamp(34px, 3.5vw, 54px);
}
.archive.is-identity .identity-timeline li:nth-child(4) {
  grid-column: 2;
  grid-row: 2;
  padding-top: 26px;
  margin-left: 12px;
}

.archive.is-identity .identity-timeline li:nth-child(1) em span:first-child {
  font-size: clamp(23px, 2.1vw, 32px) !important;
  font-weight: 570 !important;
}
.archive.is-identity .identity-timeline li:nth-child(1) em span:last-child {
  margin-left: .38em !important;
  font-size: clamp(14px, 1.18vw, 18px) !important;
  font-weight: 430 !important;
  color: rgba(217,190,160,.78);
}
.archive.is-identity .identity-timeline li:nth-child(2) em span:first-child {
  font-size: clamp(15px, 1.35vw, 20px) !important;
  font-weight: 430 !important;
}
.archive.is-identity .identity-timeline li:nth-child(2) em span:last-child {
  margin-left: .3em !important;
  font-size: clamp(27px, 2.7vw, 40px) !important;
  font-weight: 680 !important;
}
.archive.is-identity .identity-timeline li:nth-child(3) em span:first-child {
  font-size: clamp(16px, 1.45vw, 21px) !important;
  font-weight: 430 !important;
}
.archive.is-identity .identity-timeline li:nth-child(3) em span:last-child {
  margin-left: .24em !important;
  font-size: clamp(29px, 2.85vw, 42px) !important;
  font-weight: 660 !important;
}
.archive.is-identity .identity-timeline li:nth-child(4) em span:first-child {
  margin-right: .6em !important;
  font-size: clamp(11px, .92vw, 14px) !important;
  font-weight: 560 !important;
  letter-spacing: .12em !important;
  color: rgba(217,190,160,.76);
}
.archive.is-identity .identity-timeline li:nth-child(4) em span:last-child {
  font-size: clamp(19px, 1.8vw, 27px) !important;
  font-weight: 570 !important;
}

@media (max-width: 800px) {
  .archive.is-identity .identity-timeline {
    top: 112px;
    width: calc(100vw - 52px);
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
  .archive.is-identity .identity-timeline li,
  .archive.is-identity .identity-timeline li:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    margin-left: 0;
    padding-top: 0;
  }
}

/* 정본 볼륨 · 영상과 텍스트 사이에 실제 깊이를 만드는 인물 조형 */
@property --rubber-bounce {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --rubber-line-bounce {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.identity-volume-media,
.identity-volume-light,
.identity-volume {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.identity-volume-media {
  z-index: -4;
  overflow: hidden;
  background: #070707;
  transition: opacity .75s ease;
}
.identity-volume-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1,2,2,.76) 0%, rgba(1,2,2,.26) 48%, rgba(1,2,2,.44) 100%),
    linear-gradient(180deg, rgba(1,2,2,.18), transparent 42%, rgba(1,2,2,.5));
}
.identity-volume-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.58) contrast(1.08) brightness(.62);
  transform: scale(1.07) translate3d(var(--media-x, 0px), var(--media-y, 0px), 0);
  transition: transform .18s ease-out;
}
.identity-volume-light {
  z-index: 1;
  background:
    radial-gradient(circle 150px at var(--light-x, 31%) var(--light-y, 43%),rgba(255,187,135,.22),rgba(222,107,49,.10) 42%,transparent 74%),
    radial-gradient(circle 420px at var(--light-x, 31%) var(--light-y, 43%),rgba(185,70,24,.10),transparent 72%);
  mix-blend-mode: screen;
  filter:saturate(1.1);
  transition: opacity .42s ease;
}
.identity-cursor-streaks{position:absolute;z-index:7;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .45s ease}
.archive.is-identity .identity-cursor-streaks{opacity:1}
.identity-cursor-streak{position:absolute;left:0;top:0;width:var(--streak-width,180px);height:1px;opacity:0;transform-origin:left center;background:linear-gradient(90deg,transparent,rgba(230,122,62,.18) 20%,rgba(255,190,141,.82) 68%,transparent);box-shadow:0 0 12px rgba(213,74,16,.35);mix-blend-mode:screen}
.identity-volume {
  z-index: 2;
  left: clamp(34px, 4.3vw, 72px);
  top: clamp(122px, 14.5vh, 154px);
  right: auto;
  bottom: auto;
  width: min(650px, 48vw);
  height: min(650px, 74vh);
  perspective: 1150px;
  perspective-origin: 45% 48%;
  transition: opacity .55s .12s ease;
}
.identity-volume-core {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--volume-rx, -2deg)) rotateY(var(--volume-ry, 5deg));
  transition: transform .18s cubic-bezier(.2,.75,.3,1);
}
.identity-volume-mark {
  position: absolute;
  left: 112px;
  top: 170px;
  width: min(350px, 27vw);
  height: auto;
  opacity: .13;
  filter: saturate(.55) drop-shadow(0 24px 34px rgba(0,0,0,.28));
  transform: translateZ(-92px) rotateY(10deg) rotateZ(-4deg) scale(1.08);
  transform-origin: center;
}
.identity-volume-spine {
  position: absolute;
  left: 246px;
  top: 72px;
  width: 5px;
  height: calc(470px + var(--rubber-line, 0px) + var(--rubber-line-bounce, 0px));
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.32) 14%, rgba(214,64,0,.42) 52%, rgba(255,255,255,.08) 88%, transparent);
  box-shadow: 0 0 28px rgba(214,64,0,.15), inset 1px 0 rgba(255,255,255,.24);
  transform: translateZ(-24px) rotateZ(7deg);
  transition: height .42s cubic-bezier(.14,1.38,.26,1);
}
.identity-volume-facts {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
}
.identity-volume.is-rubber-release .identity-volume-spine {
  animation: rubber-line-release 1s ease-out;
}
.identity-volume.is-rubber-release .volume-face {
  animation: rubber-face-release 1s ease-out;
}
.face-education {
  --rubber-rebound-a: -6px;
  --rubber-rebound-b: 3px;
  --rubber-rebound-c: -2px;
}
.face-exam {
  --rubber-rebound-a: -19px;
  --rubber-rebound-b: 10px;
  --rubber-rebound-c: -5px;
}
.face-open {
  --rubber-rebound-a: -36px;
  --rubber-rebound-b: 19px;
  --rubber-rebound-c: -9px;
}
.face-now {
  --rubber-rebound-a: -56px;
  --rubber-rebound-b: 29px;
  --rubber-rebound-c: -14px;
}
@keyframes rubber-face-release {
  0% { --rubber-bounce: 0px; }
  20% { --rubber-bounce: var(--rubber-rebound-a); }
  42% { --rubber-bounce: var(--rubber-rebound-b); }
  62% { --rubber-bounce: var(--rubber-rebound-c); }
  80% { --rubber-bounce: 2px; }
  100% { --rubber-bounce: 0px; }
}
@keyframes rubber-line-release {
  0% { --rubber-line-bounce: 0px; }
  20% { --rubber-line-bounce: -46px; }
  42% { --rubber-line-bounce: 24px; }
  62% { --rubber-line-bounce: -12px; }
  80% { --rubber-line-bounce: 4px; }
  100% { --rubber-line-bounce: 0px; }
}
.volume-face {
  position: absolute;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  min-height: 82px;
  padding: 15px 26px 15px 22px;
  color: rgba(247,243,235,.93);
  background:
    linear-gradient(112deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 54%, rgba(214,64,0,.045)),
    rgba(12,13,13,.13);
  border-top: 1px solid rgba(255,255,255,.24);
  border-left: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px rgba(255,255,255,.05),
    0 26px 48px rgba(0,0,0,.26),
    0 0 38px rgba(214,64,0,.035);
  backdrop-filter: blur(15px) saturate(1.22);
  -webkit-backdrop-filter: blur(15px) saturate(1.22);
  transform-style: preserve-3d;
  transition:
    transform .4s cubic-bezier(.14,1.38,.26,1),
    box-shadow .3s ease,
    border-color .3s ease;
  will-change: transform;
}
.volume-face.is-proximity {
  border-top-color: rgba(255,255,255,.34);
  border-left-color: rgba(255,255,255,.2);
  box-shadow:
    inset 0 1px rgba(255,255,255,.1),
    0 34px 64px rgba(0,0,0,.36),
    0 0 46px rgba(214,64,0,.1);
}
.volume-face::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: radial-gradient(
    circle 150px at var(--face-light-x, 50%) var(--face-light-y, 50%),
    rgba(255,255,255,.25),
    rgba(222,118,58,.12) 30%,
    transparent 72%
  );
  opacity: var(--face-glow, 0);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .2s ease;
}
.volume-face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.08), transparent 34%, transparent 68%, rgba(217,190,160,.055));
  mix-blend-mode: screen;
  pointer-events: none;
}
.volume-face time {
  position: relative;
  z-index: 2;
  color: rgba(232,205,177,.64);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  transform: translateZ(22px);
}
.volume-face strong {
  position: relative;
  z-index: 2;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 520;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-shadow: 0 8px 18px rgba(0,0,0,.3);
  transform: translateZ(calc(28px + var(--text-lift, 0px))) scale(var(--text-scale, 1));
  transform-origin: left center;
  transition:
    transform .2s cubic-bezier(.2,.75,.25,1),
    filter .2s ease;
  filter: brightness(var(--text-brightness, 1));
}
.face-education {
  left: 116px;
  top: 34px;
  width: 408px;
  clip-path: polygon(3% 0, 100% 7%, 96% 100%, 0 91%);
  transform: translate3d(var(--face-shift-x, 0px), calc(var(--face-shift-y, 0px) + var(--rubber-y, 0px) + var(--rubber-bounce, 0px)), calc(78px + var(--face-lift, 0px))) rotateX(var(--face-tilt-x, 0deg)) rotateY(calc(-10deg + var(--face-tilt-y, 0deg))) rotateZ(calc(-2.2deg + var(--face-lean, 0deg)));
}
.face-exam {
  left: 28px;
  top: 176px;
  width: 468px;
  clip-path: polygon(0 8%, 97% 0, 100% 89%, 4% 100%);
  transform: translate3d(var(--face-shift-x, 0px), calc(var(--face-shift-y, 0px) + var(--rubber-y, 0px) + var(--rubber-bounce, 0px)), calc(28px + var(--face-lift, 0px))) rotateX(var(--face-tilt-x, 0deg)) rotateY(calc(8deg + var(--face-tilt-y, 0deg))) rotateZ(calc(1.5deg + var(--face-lean, 0deg)));
}
.face-open {
  left: 176px;
  top: 320px;
  width: 350px;
  clip-path: polygon(5% 0, 100% 11%, 93% 100%, 0 88%);
  transform: translate3d(var(--face-shift-x, 0px), calc(var(--face-shift-y, 0px) + var(--rubber-y, 0px) + var(--rubber-bounce, 0px)), calc(104px + var(--face-lift, 0px))) rotateX(var(--face-tilt-x, 0deg)) rotateY(calc(-13deg + var(--face-tilt-y, 0deg))) rotateZ(calc(-1deg + var(--face-lean, 0deg)));
}
.face-now {
  left: 72px;
  top: 456px;
  width: 450px;
  clip-path: polygon(0 9%, 95% 0, 100% 91%, 4% 100%);
  transform: translate3d(var(--face-shift-x, 0px), calc(var(--face-shift-y, 0px) + var(--rubber-y, 0px) + var(--rubber-bounce, 0px)), calc(48px + var(--face-lift, 0px))) rotateX(var(--face-tilt-x, 0deg)) rotateY(calc(6deg + var(--face-tilt-y, 0deg))) rotateZ(calc(2deg + var(--face-lean, 0deg)));
}
.archive.is-identity .identity-timeline { display: none !important; }
.archive.is-identity .identity-volume-media,
.archive.is-identity .identity-volume-light,
.archive.is-identity .identity-volume { opacity: 1; }

@media (max-width: 800px) {
  .identity-volume {
    left: 5vw;
    top: 96px;
    width: 90vw;
    height: 70vh;
    transform: scale(.78);
    transform-origin: left top;
  }
  .identity-volume-media img { object-position: 46% center; }
}

@media (prefers-reduced-motion: reduce) {
  .identity-volume-core,
  .identity-volume-media img { transition: none; transform: none; }
}

/* 유리면에 새겨진 글자가 빛과 깊이에 반응하도록 조형 */
.identity-volume-mark { display: none !important; }
.volume-face strong {
  position: relative;
  display: block;
  white-space: nowrap;
  color: transparent;
  transform-style: preserve-3d;
  isolation: isolate;
}
.volume-glyph {
  display: inline-block;
  color: rgba(249,246,239,.9);
  font-size: clamp(17px, 1.45vw, 22px) !important;
  font-weight: 520 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.15),
    0 8px 20px rgba(0,0,0,.32),
    0 0 18px rgba(217,190,160,.04);
  transform: translate3d(0,0,0);
  animation: none;
  will-change: auto;
  transition: color .18s ease, text-shadow .18s ease;
}
.volume-face.is-text-hover .volume-glyph {
  color: rgba(255,253,248,1);
  text-shadow:
    0 1px 0 rgba(255,255,255,.28),
    0 13px 28px rgba(0,0,0,.4),
    0 0 20px rgba(222,118,58,.22);
}
.volume-glyph.is-space { width: .28em; }
.volume-face strong::after {
  content: attr(data-text);
  position: absolute;
  z-index: 2;
  inset: 0;
  color: transparent;
  background: linear-gradient(104deg,
    transparent 0 28%,
    rgba(255,255,255,.18) 40%,
    rgba(255,247,231,.96) 48%,
    rgba(222,118,58,.34) 54%,
    transparent 67% 100%);
  background-size: 260% 100%;
  background-position: 48% 0;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  mix-blend-mode: screen;
  animation: none;
  pointer-events: none;
}
.face-exam strong::after { animation-delay: -1.6s; }
.face-open strong::after { animation-delay: -3.3s; }
.face-now strong::after { animation-delay: -5s; }

@keyframes volume-glyph-breathe {
  0%, 100% {
    transform: translate3d(0,0,0);
    color: rgba(249,246,239,.86);
    text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.3);
  }
  48% {
    transform: translate3d(0,-1.5px,11px);
    color: rgba(255,253,247,.98);
    text-shadow: 0 1px 0 rgba(255,255,255,.26), 0 11px 25px rgba(0,0,0,.36), 0 0 19px rgba(222,118,58,.09);
  }
  62% { transform: translate3d(0,.35px,3px); }
}
@keyframes volume-type-light {
  0%, 16% { background-position: 160% 0; opacity: 0; }
  24% { opacity: .66; }
  46% { background-position: -65% 0; opacity: .58; }
  55%, 100% { background-position: -65% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .volume-glyph,
  .volume-face strong::after { animation: none; }
}

/* 브랜드 영상 공간의 세 채널 입구 — 불규칙하게 부유하다가 커서 앞에서 정지 */
.identity-portals {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
}
.identity-portal {
  --portal-accent: 222, 118, 58;
  position: absolute;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 12px;
  padding: 16px 20px 15px;
  border: 0;
  border-radius: 999px;
  color: rgba(250,247,240,.76);
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.15), transparent 34%),
    linear-gradient(118deg, rgba(255,255,255,.09), rgba(255,255,255,.018) 58%, rgba(var(--portal-accent),.08));
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 18px 48px rgba(0,0,0,.22);
  backdrop-filter: blur(14px) saturate(1.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  cursor: pointer;
  pointer-events: auto;
  transform-style: preserve-3d;
  will-change: transform;
  transition: color .26s ease, background .26s ease, box-shadow .3s ease, filter .3s ease;
}
.identity-portal span {
  justify-self: auto;
  margin: 0;
  color: inherit;
  font-size: clamp(15px, 1.18vw, 19px);
  font-weight: 560;
  letter-spacing: -.02em;
  transform: translateZ(18px) scale(1);
  transition: transform .36s cubic-bezier(.15,1.5,.25,1), text-shadow .26s ease;
}
.identity-portal small {
  color: rgba(231,193,158,.56);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  transform: translateZ(12px);
}
.identity-portal::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(var(--portal-accent),.16), transparent 68%);
  opacity: 0;
  filter: blur(9px);
  transition: opacity .25s ease;
  pointer-events: none;
}
.portal-home {
  left: 57vw;
  top: 20vh;
  animation: portal-drift-home 23.7s cubic-bezier(.37,.03,.58,.97) infinite alternate;
}
.portal-blog {
  left: 75vw;
  top: 47vh;
  animation: portal-drift-blog 19.3s cubic-bezier(.46,.01,.31,.99) -7.1s infinite alternate;
}
.portal-community {
  left: 54vw;
  top: 73vh;
  animation: portal-drift-community 27.1s cubic-bezier(.28,.02,.68,.98) -13.4s infinite alternate;
}
.identity-portal.is-near,
.identity-portal:focus-visible,
.identity-portal.is-selected {
  animation-play-state: paused;
  color: rgba(255,252,246,1);
  background:
    radial-gradient(circle at 34% 22%, rgba(255,255,255,.22), transparent 36%),
    linear-gradient(118deg, rgba(255,255,255,.13), rgba(255,255,255,.035) 58%, rgba(var(--portal-accent),.15));
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 25px 70px rgba(0,0,0,.38), 0 0 34px rgba(var(--portal-accent),.12);
  filter: brightness(1.12);
  outline: none;
}
.identity-portal.is-near span,
.identity-portal:focus-visible span,
.identity-portal.is-selected span {
  transform: translateZ(42px) scale(1.07);
  text-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 18px rgba(var(--portal-accent),.2);
}
.identity-portal.is-near::after,
.identity-portal:focus-visible::after,
.identity-portal.is-selected::after { opacity: 1; }

@keyframes portal-drift-home {
  0%   { transform: translate3d(-7vw, 5vh, 12px) rotate(-2.2deg); }
  13%  { transform: translate3d(8vw, -4vh, 62px) rotate(1.1deg); }
  31%  { transform: translate3d(-2vw, 17vh, 30px) rotate(-.5deg); }
  47%  { transform: translate3d(17vw, 8vh, 86px) rotate(2.4deg); }
  68%  { transform: translate3d(2vw, -9vh, 18px) rotate(-1.8deg); }
  83%  { transform: translate3d(-12vw, 12vh, 54px) rotate(.6deg); }
  100% { transform: translate3d(10vw, 1vh, 74px) rotate(1.7deg); }
}
@keyframes portal-drift-blog {
  0%   { transform: translate3d(5vw, -12vh, 80px) rotate(2.4deg); }
  17%  { transform: translate3d(-19vw, 4vh, 22px) rotate(-2deg); }
  29%  { transform: translate3d(-7vw, 18vh, 64px) rotate(.7deg); }
  52%  { transform: translate3d(7vw, 5vh, 34px) rotate(-.8deg); }
  71%  { transform: translate3d(-14vw, -15vh, 92px) rotate(2deg); }
  88%  { transform: translate3d(3vw, 10vh, 20px) rotate(-1.6deg); }
  100% { transform: translate3d(-9vw, -3vh, 58px) rotate(.4deg); }
}
@keyframes portal-drift-community {
  0%   { transform: translate3d(-4vw, 8vh, 38px) rotate(-1.3deg); }
  11%  { transform: translate3d(20vw, -9vh, 90px) rotate(1.9deg); }
  26%  { transform: translate3d(7vw, -23vh, 28px) rotate(-.4deg); }
  43%  { transform: translate3d(-8vw, -5vh, 72px) rotate(2.2deg); }
  64%  { transform: translate3d(15vw, 4vh, 16px) rotate(-2.1deg); }
  79%  { transform: translate3d(-3vw, -18vh, 56px) rotate(.8deg); }
  100% { transform: translate3d(11vw, -8vh, 84px) rotate(1.2deg); }
}

.identity-portals.is-expanded .identity-portal:not(.is-selected) {
  opacity: .08;
  filter: blur(5px);
  pointer-events: none;
}
.identity-portal-dock {
  position: absolute;
  z-index: 12;
  right: clamp(42px, 7vw, 124px);
  top: 50%;
  width: min(520px, 42vw);
  padding: 30px 30px 32px;
  background: linear-gradient(125deg, rgba(13,14,14,.58), rgba(21,20,18,.25));
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 38px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
  opacity: 0;
  transform: translate3d(42px,-46%,90px) rotateY(-5deg);
  pointer-events: none;
  transition: opacity .38s ease, transform .65s cubic-bezier(.16,1,.24,1);
}
.identity-portals.is-expanded .identity-portal-dock {
  opacity: 1;
  transform: translate3d(0,-50%,90px) rotateY(0);
  pointer-events: auto;
}
.identity-portal-back {
  float: right;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(222,118,58,.42);
  background: none;
  color: rgba(250,247,240,.68);
  font-size: 11px;
  cursor: pointer;
}
.identity-portal-kicker {
  margin: 0 0 10px !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
}
.identity-portal-title {
  margin: 0 0 25px;
  color: rgba(250,247,240,.96);
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 560;
  letter-spacing: -.055em;
}
.identity-portal-links { display: grid; gap: 8px; }
.identity-portal-link {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 13px;
  min-height: 58px;
  padding: 8px 5px;
  color: rgba(250,247,240,.76);
  text-decoration: none;
  transition: color .2s ease, transform .28s cubic-bezier(.16,1,.24,1), background .2s ease;
}
.identity-portal-link::after { content: "↗"; color: rgba(222,118,58,.62); }
.identity-portal-link:hover,
.identity-portal-link:focus-visible {
  color: #fffdf7;
  background: linear-gradient(90deg, rgba(255,255,255,.055), transparent);
  transform: translateX(7px);
  outline: none;
}
.identity-portal-link img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 8px;
}
.identity-portal-link span {
  justify-self: auto;
  margin: 0;
  color: inherit;
  font-size: 15px;
  letter-spacing: -.02em;
}

@media (max-width: 800px) {
  .identity-portal { padding: 12px 15px; }
  .identity-portal span { font-size: 14px; }
  .portal-home { left: 56vw; top: 21vh; }
  .portal-blog { left: 59vw; top: 48vh; }
  .portal-community { left: 52vw; top: 75vh; }
  .identity-portal-dock { right: 18px; width: calc(100vw - 36px); padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .identity-portal { animation: none !important; }
}

/* 아홉 채널 자체가 앞쪽 깊이에서 서로 다른 비정형 궤도로 이동한다 */
.identity-portal {
  left: var(--portal-left);
  top: var(--portal-top);
  grid-template-columns: 30px auto;
  align-items: center;
  gap: 11px;
  min-width: max-content;
  padding: 11px 17px 11px 12px;
  color: rgba(250,247,240,.77);
  text-decoration: none;
  animation-duration: var(--portal-duration);
  animation-delay: var(--portal-delay);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.identity-portal img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 7px;
  filter: saturate(.88) brightness(.94);
  transform: translateZ(22px);
  transition: transform .34s cubic-bezier(.15,1.5,.25,1), filter .24s ease;
}
.identity-portal span {
  font-size: clamp(12px, .93vw, 15px);
  line-height: 28px;
  white-space: nowrap;
}
.identity-portal.is-near img,
.identity-portal:hover img,
.identity-portal:focus-visible img {
  filter: saturate(1.08) brightness(1.1);
  transform: translateZ(48px) scale(1.08);
}
.identity-portal:hover { animation-play-state: paused; }

.portal-path-a { animation-name: portal-path-a; }
.portal-path-b { animation-name: portal-path-b; }
.portal-path-c { animation-name: portal-path-c; }
.portal-path-d { animation-name: portal-path-d; }
.portal-path-e { animation-name: portal-path-e; }
.portal-path-f { animation-name: portal-path-f; }
.portal-path-g { animation-name: portal-path-g; }
.portal-path-h { animation-name: portal-path-h; }
.portal-path-i { animation-name: portal-path-i; }

@keyframes portal-path-a {
  0%{transform:translate3d(-16.7656vw,4.65vh,20px) rotate(-1.7deg)} 14%{transform:translate3d(26.825vw,-7.75vh,74px) rotate(.8deg)} 33%{transform:translate3d(3.35313vw,15.5vh,42px) rotate(-.4deg)} 49%{transform:translate3d(40.2375vw,6.2vh,94px) rotate(1.6deg)} 71%{transform:translate3d(-10.0594vw,-12.4vh,28px) rotate(-1deg)} 86%{transform:translate3d(-30.1781vw,10.85vh,66px) rotate(.4deg)} 100%{transform:translate3d(20.1187vw,-1.55vh,82px) rotate(1.1deg)}
}
@keyframes portal-path-b {
  0%{transform:translate3d(10.0594vw,-10.85vh,86px) rotate(1.4deg)} 19%{transform:translate3d(-36.8844vw,6.2vh,30px) rotate(-1.5deg)} 36%{transform:translate3d(-13.4125vw,20.15vh,72px) rotate(.5deg)} 58%{transform:translate3d(23.4719vw,1.55vh,38px) rotate(-.6deg)} 77%{transform:translate3d(-26.825vw,-17.05vh,98px) rotate(1.3deg)} 100%{transform:translate3d(6.70625vw,12.4vh,52px) rotate(-1deg)}
}
@keyframes portal-path-c {
  0%{transform:translate3d(-26.825vw,9.3vh,36px) rotate(-1deg)} 12%{transform:translate3d(10.0594vw,-13.95vh,92px) rotate(1.2deg)} 29%{transform:translate3d(-43.5906vw,-3.1vh,48px) rotate(-.3deg)} 48%{transform:translate3d(6.70625vw,17.05vh,76px) rotate(1.7deg)} 69%{transform:translate3d(-20.1187vw,1.55vh,22px) rotate(-1.4deg)} 84%{transform:translate3d(13.4125vw,-18.6vh,60px) rotate(.5deg)} 100%{transform:translate3d(-33.5312vw,10.85vh,88px) rotate(1deg)}
}
@keyframes portal-path-d {
  0%{transform:translate3d(16.7656vw,12.4vh,62px) rotate(.9deg)} 16%{transform:translate3d(-23.4719vw,-9.3vh,18px) rotate(-1.3deg)} 27%{transform:translate3d(33.5312vw,-1.55vh,84px) rotate(1.5deg)} 44%{transform:translate3d(-6.70625vw,21.7vh,40px) rotate(-.5deg)} 66%{transform:translate3d(-40.2375vw,4.65vh,96px) rotate(.7deg)} 82%{transform:translate3d(13.4125vw,-15.5vh,28px) rotate(-1.1deg)} 100%{transform:translate3d(26.825vw,7.75vh,70px) rotate(1.2deg)}
}
@keyframes portal-path-e {
  0%{transform:translate3d(-6.70625vw,-17.05vh,26px) rotate(-.7deg)} 18%{transform:translate3d(30.1781vw,7.75vh,90px) rotate(1.6deg)} 39%{transform:translate3d(-33.5312vw,15.5vh,54px) rotate(-1.2deg)} 55%{transform:translate3d(16.7656vw,-6.2vh,78px) rotate(.4deg)} 73%{transform:translate3d(-13.4125vw,-20.15vh,34px) rotate(1.1deg)} 91%{transform:translate3d(36.8844vw,4.65vh,100px) rotate(-.8deg)} 100%{transform:translate3d(3.35313vw,12.4vh,46px) rotate(.6deg)}
}
@keyframes portal-path-f {
  0%{transform:translate3d(23.4719vw,-7.75vh,94px) rotate(1.5deg)} 13%{transform:translate3d(-30.1781vw,12.4vh,32px) rotate(-1deg)} 34%{transform:translate3d(13.4125vw,20.15vh,68px) rotate(.3deg)} 51%{transform:translate3d(40.2375vw,-10.85vh,20px) rotate(-1.6deg)} 67%{transform:translate3d(-16.7656vw,-18.6vh,82px) rotate(.9deg)} 88%{transform:translate3d(-36.8844vw,3.1vh,48px) rotate(-.4deg)} 100%{transform:translate3d(20.1187vw,9.3vh,104px) rotate(1.2deg)}
}
@keyframes portal-path-g {
  0%{transform:translate3d(-33.5312vw,1.55vh,44px) rotate(-1.3deg)} 21%{transform:translate3d(6.70625vw,-18.6vh,102px) rotate(.7deg)} 37%{transform:translate3d(-16.7656vw,13.95vh,24px) rotate(1.4deg)} 60%{transform:translate3d(26.825vw,6.2vh,74px) rotate(-.8deg)} 78%{transform:translate3d(-40.2375vw,-9.3vh,56px) rotate(.3deg)} 100%{transform:translate3d(10.0594vw,17.05vh,88px) rotate(-1.1deg)}
}
@keyframes portal-path-h {
  0%{transform:translate3d(13.4125vw,4.65vh,18px) rotate(.5deg)} 15%{transform:translate3d(43.5906vw,-15.5vh,80px) rotate(-1.5deg)} 32%{transform:translate3d(-10.0594vw,-6.2vh,50px) rotate(1.2deg)} 53%{transform:translate3d(23.4719vw,18.6vh,98px) rotate(-.6deg)} 72%{transform:translate3d(-23.4719vw,7.75vh,34px) rotate(1deg)} 87%{transform:translate3d(3.35313vw,-20.15vh,70px) rotate(-1.1deg)} 100%{transform:translate3d(33.5312vw,3.1vh,90px) rotate(.8deg)}
}
@keyframes portal-path-i {
  0%{transform:translate3d(-20.1187vw,-12.4vh,72px) rotate(-.9deg)} 17%{transform:translate3d(20.1187vw,3.1vh,30px) rotate(1.3deg)} 28%{transform:translate3d(-36.8844vw,15.5vh,96px) rotate(-1.4deg)} 46%{transform:translate3d(10.0594vw,-17.05vh,48px) rotate(.4deg)} 65%{transform:translate3d(33.5312vw,7.75vh,84px) rotate(1.1deg)} 81%{transform:translate3d(-13.4125vw,20.15vh,22px) rotate(-.5deg)} 100%{transform:translate3d(23.4719vw,-4.65vh,106px) rotate(1.5deg)}
}

@media (max-width: 800px) {
  .identity-portal { grid-template-columns: 24px auto; padding: 8px 12px 8px 9px; }
  .identity-portal img { width: 23px; height: 23px; }
  .identity-portal span { font-size: 11px; line-height: 23px; }
}

.identity-portals.is-physics .identity-portal {
  left: 0;
  top: 0;
  animation: none !important;
  transition: color .2s ease, background .2s ease, box-shadow .24s ease, filter .2s ease;
}

/* 아홉 채널을 인물 장면에서 직접 제공하므로 홈의 중복 입구는 숨긴다 */
.channel-field { display: none !important; }

/* 홈에서 인물 장면으로 들어가는 단 하나의 행동을 주황빛 세 번으로 안내 */
.brand-name::before {
  content: "";
  position: absolute;
  right: -7px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #de763a;
  box-shadow: 0 0 0 0 rgba(222,118,58,.36), 0 0 15px rgba(222,118,58,.42);
  transform: translateY(-50%) scale(.72);
  opacity: .44;
  pointer-events: none;
  animation: brand-entry-signal 4.6s ease-out infinite;
}
.brand-name:hover::before,
.brand-name:focus-visible::before {
  opacity: 1;
  animation-play-state: paused;
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 7px rgba(222,118,58,.1), 0 0 20px rgba(222,118,58,.5);
}
@keyframes brand-entry-signal {
  0%, 2%, 7%, 12% {
    opacity: .38;
    transform: translateY(-50%) scale(.7);
    box-shadow: 0 0 0 0 rgba(222,118,58,.32), 0 0 10px rgba(222,118,58,.22);
  }
  4%, 9%, 14% {
    opacity: 1;
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 0 0 8px rgba(222,118,58,.04), 0 0 24px rgba(222,118,58,.56);
  }
  18%, 100% {
    opacity: .42;
    transform: translateY(-50%) scale(.72);
    box-shadow: 0 0 0 0 rgba(222,118,58,0), 0 0 11px rgba(222,118,58,.24);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-name::before { animation: none; opacity: .82; }
}

/* 계속 보이는 클릭 신호: 캡슐 전체와 내부 주황점이 함께 맥박친다 */

/* 2026-09-21 · 실제 기록을 잇는 브랜드 필름과 노트북 화면 비례 */
.identity-film{display:block!important;z-index:-6;opacity:0;filter:saturate(.72) contrast(1.08) brightness(.60);transform:scale(1.035);transition:opacity .75s ease}
.archive.is-identity .identity-film{opacity:1;animation:identity-film-drift 22s ease-in-out infinite alternate}
.identity-film-shade{z-index:-4!important;opacity:1!important;background:linear-gradient(90deg,rgba(2,3,3,.82) 0%,rgba(2,3,3,.42) 43%,rgba(2,3,3,.27) 70%,rgba(2,3,3,.58) 100%),linear-gradient(180deg,rgba(3,4,4,.28),transparent 38%,rgba(3,4,4,.64))!important}
.identity-volume-media{z-index:-5;background:transparent}.identity-volume-media img{display:none!important}
.identity-volume{left:clamp(38px,5.2vw,82px);top:clamp(90px,12vh,120px);width:min(460px,38vw);height:min(570px,72vh);transform:perspective(1300px) rotateX(var(--volume-rx,-2deg)) rotateY(var(--volume-ry,5deg)) scale(.82);transform-origin:left top}
.volume-face{min-height:74px;padding:16px 21px}.volume-face strong,.volume-glyph{font-size:clamp(14px,1.16vw,18px)!important}.volume-face time{font-size:9px}
.face-education{left:94px;top:26px;width:326px}.face-exam{left:24px;top:142px;width:374px}.face-open{left:142px;top:256px;width:280px}.face-now{left:58px;top:366px;width:360px}
.identity-portal{backface-visibility:visible;-webkit-backface-visibility:visible;transform-origin:center;will-change:transform}
@keyframes identity-film-drift{from{transform:scale(1.035) translate3d(-.4%,0,0)}to{transform:scale(1.085) translate3d(.8%,-.55%,0)}}
@media(max-width:1100px) and (min-width:801px){.identity-volume{left:34px;top:94px;width:420px;transform:perspective(1300px) rotateX(var(--volume-rx,-2deg)) rotateY(var(--volume-ry,5deg)) scale(.75)}}
@media(max-width:800px){.identity-volume{left:2vw;top:90px;width:92vw;height:66vh;transform:perspective(1100px) rotateX(var(--volume-rx,-2deg)) rotateY(var(--volume-ry,5deg)) scale(.70)}.identity-film{filter:saturate(.68) contrast(1.08) brightness(.53)}}
.brand-name {
  padding-right: 29px !important;
  animation: brand-button-pulse 1.18s ease-in-out infinite;
}
.brand-name small { position: relative; z-index: 2; }
.brand-name::before {
  z-index: 3;
  right: 10px;
  animation: brand-entry-continuous .74s ease-in-out infinite;
}
.brand-name:hover,
.brand-name:focus-visible {
  animation-play-state: paused;
}
.brand-name:hover::before,
.brand-name:focus-visible::before {
  animation-play-state: paused;
}
@keyframes brand-button-pulse {
  0%, 100% {
    color: rgba(247,243,235,.72);
    background: rgba(7,8,8,.11);
    box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 0 rgba(222,118,58,0);
  }
  48% {
    color: rgba(255,251,245,1);
    background: rgba(214,64,0,.16);
    box-shadow: inset 0 1px rgba(255,178,133,.18), 0 0 26px rgba(222,118,58,.3);
  }
}
@keyframes brand-entry-continuous {
  0%, 100% {
    opacity: .34;
    transform: translateY(-50%) scale(.66);
    box-shadow: 0 0 0 0 rgba(222,118,58,0), 0 0 8px rgba(222,118,58,.18);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.28);
    box-shadow: 0 0 0 7px rgba(222,118,58,.08), 0 0 20px rgba(222,118,58,.7);
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-name { animation: none; }
  .brand-name::before { animation: none; opacity: .9; }
}

/* 법무사 김재성 호버 미리보기: 인물 · 공간 · 분위기가 교차하는 오른쪽 입체 공간 */
.home-office-preview {
  position: fixed;
  z-index: 7;
  right: 2.5vw;
  top: 9vh;
  width: min(64vw, 1240px);
  height: 82vh;
  opacity: 0;
  pointer-events: none;
  perspective: 1300px;
  transform-style: preserve-3d;
  transform: translate3d(32px,0,0) scale(.97);
  transition: opacity .34s ease, transform .65s cubic-bezier(.16,1,.24,1);
}
.archive:not(.is-identity):has(.brand-name:hover) .home-office-preview {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}
.office-preview-frame {
  --pf-x: 34%;
  --pf-y: 12%;
  --pf-w: 48%;
  --pf-rotate: -1deg;
  position: absolute;
  left: var(--pf-x);
  top: var(--pf-y);
  width: var(--pf-w);
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%);
  background: rgba(12,13,13,.38);
  box-shadow: 0 42px 100px rgba(0,0,0,.5), 0 0 46px rgba(222,118,58,.05);
  opacity: 0;
  transform-style: preserve-3d;
  animation: office-preview-cycle 18.2s cubic-bezier(.2,.72,.22,1) infinite;
  animation-play-state: paused;
  will-change: transform, opacity, filter;
}
.archive:not(.is-identity):has(.brand-name:hover) .office-preview-frame {
  animation-play-state: running;
}
.office-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.67) contrast(1.08) brightness(.78);
  transform: scale(1.045);
}
.preview-frame-1 { --pf-x: 35%; --pf-y: 5%;  --pf-w: 24%; --pf-rotate: -2.2deg; animation-delay: 0s; }
.preview-frame-2 { --pf-x: 48%; --pf-y: 13%; --pf-w: 26%; --pf-rotate: 1.4deg;  animation-delay: -1.4s; }
.preview-frame-3 { --pf-x: 26%; --pf-y: 22%; --pf-w: 30%; --pf-rotate: -.7deg;  animation-delay: -2.8s; }
.preview-frame-4 { --pf-x: 44%; --pf-y: 30%; --pf-w: 26%; --pf-rotate: 2deg;    animation-delay: -4.2s; }
.preview-frame-5 { --pf-x: 30%; --pf-y: 38%; --pf-w: 28%; --pf-rotate: -1.3deg; animation-delay: -5.6s; }
.preview-frame-6 { --pf-x: 51%; --pf-y: 43%; --pf-w: 23%; --pf-rotate: .8deg;   animation-delay: -7s; }
.preview-frame-7 { --pf-x: 39%; --pf-y: 8%;  --pf-w: 26%; --pf-rotate: 1.2deg;  animation-delay: -8.4s; }
.preview-frame-8 { --pf-x: 49%; --pf-y: 22%; --pf-w: 28%; --pf-rotate: -1.8deg; animation-delay: -9.8s; }
.preview-frame-9 { --pf-x: 28%; --pf-y: 34%; --pf-w: 30%; --pf-rotate: .5deg;   animation-delay: -11.2s; }
.preview-frame-10 { --pf-x: 55%; --pf-y: 8%;  --pf-w: 21%; --pf-rotate: 1.1deg;  animation-delay: -12.6s; }
.preview-frame-11 { --pf-x: 40%; --pf-y: 18%; --pf-w: 24%; --pf-rotate: -1.4deg; animation-delay: -14s; }
.preview-frame-12 { --pf-x: 47%; --pf-y: 35%; --pf-w: 27%; --pf-rotate: .8deg;   animation-delay: -15.4s; }
.preview-frame-13 { --pf-x: 32%; --pf-y: 44%; --pf-w: 24%; --pf-rotate: -1deg;   animation-delay: -16.8s; }
.preview-person { aspect-ratio: 3 / 4; }
.preview-person img { object-position: center top; filter: saturate(.78) contrast(1.04) brightness(.78); }
.preview-atmosphere img { filter: saturate(.76) contrast(1.09) brightness(.74); }
@keyframes office-preview-cycle {
  0% {
    opacity: 0;
    filter: blur(3.2px) brightness(.62);
    transform: translate3d(11vw,5vh,-180px) rotate(var(--pf-rotate)) scale(.86);
  }
  6% {
    opacity: .22;
    filter: blur(.7px) brightness(.75);
  }
  10%, 23% {
    opacity: .94;
    filter: blur(.16px) brightness(1);
    transform: translate3d(0,0,110px) rotate(var(--pf-rotate)) scale(1);
  }
  27% {
    opacity: .16;
    filter: blur(.9px) brightness(.7);
    transform: translate3d(-8vw,-4vh,-40px) rotate(var(--pf-rotate)) scale(.92);
  }
  30.5%, 100% {
    opacity: 0;
    filter: blur(3.2px) brightness(.6);
    transform: translate3d(-13vw,-7vh,-180px) rotate(var(--pf-rotate)) scale(.84);
  }
}
.office-preview-caption {
  position: absolute;
  right: 5%;
  bottom: 3%;
  margin: 0 !important;
  color: rgba(247,243,235,.48) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s .15s ease, transform .55s .15s ease;
}
.archive:not(.is-identity):has(.brand-name:hover) .office-preview-caption {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 800px) {
  .home-office-preview { right: 0; top: 14vh; width: 100vw; height: 75vh; }
  .office-preview-frame { --pf-w: 72% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .office-preview-frame { animation: none; }
  .preview-frame-1 { opacity: .86; transform: translate3d(0,0,0); }
}

/* 제작용 모바일 보정 : 이력과 아홉 채널의 이름을 작은 화면에서도 읽을 수 있게 한다 */
@media (max-width: 800px) {
  .identity-close {
    z-index: 50;
    background: rgba(13,11,9,.82);
    border-color: rgba(217,146,98,.24);
  }
  .identity-volume {
    left: 0;
    top: 94px;
    width: 100vw;
    height: calc(100vh - 118px);
    transform: none;
    perspective: 900px;
  }
  .identity-volume-core { transform: none; }
  .identity-volume-spine { display: none; }
  .volume-face {
    grid-template-columns: 46px 1fr;
    min-height: 66px;
    padding: 12px 16px;
  }
  .face-education {
    left: 46px;
    top: 18px;
    width: calc(100vw - 70px);
    transform: translate3d(0, var(--rubber-bounce,0px), 32px) rotateZ(-1.4deg);
  }
  .face-exam {
    left: 20px;
    top: 154px;
    width: calc(100vw - 42px);
    transform: translate3d(0, var(--rubber-bounce,0px), 18px) rotateZ(.8deg);
  }
  .face-open {
    left: 54px;
    top: 292px;
    width: calc(100vw - 80px);
    transform: translate3d(0, var(--rubber-bounce,0px), 42px) rotateZ(-.8deg);
  }
  .face-now {
    left: 24px;
    top: 430px;
    width: calc(100vw - 46px);
    transform: translate3d(0, var(--rubber-bounce,0px), 22px) rotateZ(1deg);
  }
  .volume-face time { font-size: 9px; }
  .volume-glyph {
    display: inline-block !important;
    font-size: 15px !important;
  }
  .identity-portal {
    grid-template-columns: 22px auto;
    gap: 7px;
    padding: 7px 10px 7px 8px;
  }
  .identity-portal img { width: 21px; height: 21px; }
  .identity-portal span {
    display: block !important;
    font-size: 9.5px;
    line-height: 21px;
  }
}