/* ==================== 공통 ==================== */
:root {
  --bg: #151616;
  --text: #eeede7;
  --muted: #959692;
  --line: #555753;
  --accent: #c7cbb6;
  --mono: Consolas, "Courier New", monospace;
}
* {box-sizing: border-box;}
html {
	scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 10rem;
  font-size: 62.5%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: 0.1;
  background: url(STATIC/img/noise.png) no-repeat center / cover;
}


.hidden {position: relative; overflow: hidden;}
h2 {
  font-family: "Noto Serif KR", sans-serif;
  font-weight: 500;
  font-size: 4.2rem;
  letter-spacing: -0.018em;
  line-height: 1.3;
  margin: 0 0 3rem;
}

.heading-dot {color: #9ba68a;}
.placeholder-mark {
  position: absolute;
  right: 0;
  top: 30px;
  font-size: 26px;
  color: #808773;
}




.skip-intro {
	display: none;
	position: absolute;
	left: 50%;
	bottom: 6.8%;
	transform: translateX(-50%);
	z-index: 20;
	padding: 1.2rem 1.6rem;
	border: 0;
	background: transparent;
	color: #b7bab0;
	font-size: 1rem;
	letter-spacing: 0.15em;
	cursor: pointer;
	touch-action: manipulation;
}
.skip-intro:hover {color: #eeede7;}
.skip-intro:focus-visible { outline: 1px solid #b7bab0; outline-offset: 6px;}

/* ============ ::::: 인트로 진행 시 START ~ ::::: ============ */

.introPlay .skip-intro {display: flex; align-items: center; gap: 16px;}



@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}
.date {
  color: #979f91;
  font-size: 1.5rem;
  font-family: "Noto Sans KR";
  font-weight: 300;
}
.company {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #e3e5dc;
}
#education .company {
  margin-bottom: 0;
}
.comRole {
  font-size: 1.5rem;
  font-weight: 300;
  color: #e3e5dc;
  letter-spacing: 0.04em;
  opacity: 0.5;
}
.role {
  font-size: 2rem;
  font-weight: 600;
  color: #ddd;
  margin-bottom: 1.5rem;
}
.roleInfo {
  color: #ebeaea;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1;
  word-break: keep-all;
  padding-left: 1rem;
}
.roleInfo li {
  padding-bottom: 1.2rem;
}
.roleInfo li:last-child {
  padding-bottom: 0;
}

@media (max-width: 1050px) {}

@media (max-width: 768px) {
	main {padding: 5.5rem 2rem;}
}

@media (max-width: 550px) {
	.roleInfo {font-size: 1.3rem; line-height: 1.5;}
}

/* ==================== 02. 커서 ==================== */
@media (min-width: 769px) {
	.cursorCircle {
		position: fixed;
		top: 0;
		left: 0;
		width: 6rem;
		height: 6rem;
		border-radius: 50%;
		background: #fff;
		mix-blend-mode: difference;
		pointer-events: none;
		z-index: 9999;
		transform: translate(-50%, -50%);
		transition: transform 0.2s ease;
	}
}
/* ==================== 03. 헤더 · 내비게이션 ==================== */
.header {
	top: 0;
	left: 0;
	width: 100%;
	padding: 3rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 10;
	position: fixed;
	transition: transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1),
	background 0.5s,
	border-color 0.5s,
	backdrop-filter 0.5s;
	border-bottom: 1px solid transparent;
	will-change: transform;
}
.hlogo {width: 6.5rem;}
.hlogo img {width:100%; height:auto;}
.header nav {
  display: flex;
  gap: 2.5rem;
  font-family: var(--mono);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}
.header nav a {padding: 0.8rem 0; color: #b8b9b4; transition: color 0.2s;}
.header nav a:hover {color: #fff;}

/* 스크롤 시 헤더 변경 */
.header.scrollStart {
  background: rgb(33 33 33 / 72%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: #eeede710;
}
.header.scrollDown {transform: translateY(-100%); pointer-events: none;}
.header:focus-within {transform: translateY(0); pointer-events: auto;}
.header nav a {position: relative;}
.header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.header nav a:hover::after,
.header nav a:focus-visible::after {transform: scaleX(1);}
@media (prefers-reduced-motion: reduce) {
  .header {transition: none;}
}
@media (max-width: 768px) {
	.header {padding: 1.5rem 2rem; width: 100vw;}
	.hlogo {width: 3.5rem;}
	.header nav {gap: 1.5rem; font-size: 1.2rem;}
}

/* ==================== // MAIN START ~ ==================== */

/*사이드 인덱스*/
.sideDex {
	position: fixed;
	left: 2rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 8;
	font: 1.1rem var(--mono);
	color: var(--muted);
	pointer-events: none;
	transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.2rem;
}

.sideDex.is-content {left: 1.5rem;}
.sideDex b {color: var(--text); font-weight: 400;}
.sideDex i {
  position: relative;
  display: block;
  overflow: hidden;
	width: 1px;
	height: 6rem;
	background: #50514d;
	margin-left: 0.6rem;
}
.sideDex .scrFill {
  position: absolute;
  inset: 0;
  background: #f2f1e9;
  transform: scaleY(var(--sideDex, 0));
  transform-origin: top;
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .sideDex,.sideDex .scrFill { transition: none;}
}
.sideDex .sideTitle {
	font-size: 1.1rem;
	letter-spacing: 0.2rem;
	font-weight: 500;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
@media (max-width: 768px) {
	.sideDex {left: 2rem; font-size: 0.7rem;}
	.sideDex.is-content {left: 1rem;}
	.sideDex .sideTitle {font-size: 0.6rem; letter-spacing: 0.15em;}
	.sideDex {gap: 1rem;}
	.sideDex i {height: 3.5rem; margin-left: 0.3rem;}
}

/* 메인 */
.hero {
  height: 100svh;
  min-height: 72rem;
  position: relative;
  overflow: hidden;
  /*background-color: rgb(24 24 24 / 50%);*/
}

.coord {
	position: absolute;
	left: 4.2%;
	top: 30%;
	font: 1.15rem var(--mono);
	color: var(--muted);
	padding: 0.5rem 1rem;
	background: #22211f;
	border: 1px solid #ffffff36;
	z-index: 1;
}

.heroSTxt {
	position: absolute;
	top: 20%;
	left: 50%;
	font: 1.25rem var(--mono);
	letter-spacing: 0.2em;
	color: var(--muted);
	transform: translateX(-50%);
}

.replayBtn {
	position: absolute;
	right: 4.2%;
	top: 20%;
	z-index: 5;
	background: none;
	color: #858b7e;
	padding: 0.8rem 0.5rem 0.8rem 0.8rem;
	font: 1.15rem var(--mono);
	letter-spacing: 1px;
	cursor: pointer;
	border: 1px solid rgb(133 139 126 / 50%);
	transform: translateY(-50%);
	background: #22211f;
}
.replayBtn:hover {color: var(--text);}

@media (prefers-reduced-motion: reduce) {
  .replayBtn {display: none;}
}

/*스킨인트로*/
/* 메인 - 영역 클릭 이동 */
.mainArea {
  position: absolute;
  max-width: 140rem;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  width: 90%;
  height: 55%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: all ease-in-out 0.5s;
}

.main-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.main-border-line {
  fill: none;
  stroke: #ffffff3d;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.main-border02 {
  position: absolute;
  inset: 3.5% 2.5%;
  width: 95%;
  height: 93%;
  pointer-events: none;
  overflow: visible;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 50%;
}



.mainInner {
  position: relative;
  width: 100%;
  max-width: 108rem;
  height: 100%;
  max-height: 640rem;
  transform-style: preserve-3d;
  will-change: transform;
}

.mainCont01 {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.connec {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: visible;
}
.connec g {opacity: 0.5; transition: opacity 0.4s ease;}
.connec g.active {opacity: 1;}
.connec path {
  fill: none;
  stroke: var(--line);
  stroke-width: 0.65;
  vector-effect: non-scaling-stroke;
  transition:stroke 0.3s, stroke-width 0.3s;
}
.connec circle {
  fill: var(--bg);
  stroke: #83867b;
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
  transition: fill 0.3s;
}
.connec g.active path {
	stroke: #d8dccb;
	stroke-width: 1;
	stroke-dasharray: 1;
	animation: hover-line-draw 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes hover-line-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .connec g.active path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.connec g.active circle {fill: #e7eadf; stroke: #e7eadf;}

.mainSTxt {
  position: absolute;
  left: 50%;
  top: 20%;
  font: 1rem var(--mono);
  letter-spacing: 1.5px;
  color: #62675f;
  transform: translateX(-50%);
}

.node {
	position: absolute;
	display: block;
	font: 1.65rem var(--mono);
	letter-spacing: 0.1em;
	color: #acafa5;
	padding: 1rem 1rem 1rem 1.8rem;
	text-align: left;
	white-space: nowrap;
	font-weight: 500;
	font-family: "Wanted Sans Variable", sans-serif;
	opacity: 0.65;
	transition:color 0.3s, opacity 0.4s;
}

.node .dot {
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: 0.6rem;
  height: 0.6rem;
  background: rgb(190 193 179 / 80%);
  border-radius: 50%;
  box-shadow: 0 0 0 3px #151616;
	transition:transform 0.4s ease, background 0.4s ease;
}
.node small {
  display: block;
  font-size: 1.1rem;
  letter-spacing: 0.1rem;
  color: #676d63;
  margin-top: 0.5rem;
  transition: color 0.3s;
  font-weight: 600;
}
.node:hover, .node:focus-visible {color: #fff;}
.node:hover small, .node:focus-visible small {color: #c4c9b9;}
.node-about {left: 14%; top: 23%;}
.node-work {left: 71%; top: 17%;}
.node-process {left: 47%; top: 79%;}


.node-about {
  --intro-x: -120px;
  --intro-y: -70px;
  --intro-delay: 0.4s;
}
.node-work {
  --intro-x: 120px;
  --intro-y: -90px;
  --intro-delay: 0.48s;
}

.node-process {
  --intro-x: 0px;
  --intro-y: 100px;
  --intro-delay: 0.62s;
}
.name {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: clamp(3.2rem, 4vw, 7rem);
  /* gap: 7rem; */
  margin: 0;
  white-space: nowrap;
  font-family: "Noto Serif CJK TC", serif;
  font-size: clamp(80px, 9.4vw, 144px);
  font-weight: 400;
  line-height: 1.3;
  text-shadow: 0 3px 24px #0002;
  z-index: 2;
}

.mainCircle {
	display: block;
	position: relative;
  isolation: isolate;
  pointer-events: auto;
  cursor: default;
  transition: color 0.45s ease, opacity 0.4s ease;
}

.mainCircle .circle-svg {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 1.63em;
  height: 1.63em;
  overflow: visible;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  animation: none;
}

.mainCircle .circle-stroke {
  fill: transparent;
  stroke: #f1eee3b3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: fill .45s ease, stroke .45s ease;
  vector-effect: none;
  stroke-width: 0.5;
}

.name > span::after {
  content: attr(data-meaning);
  display: none;
  position: absolute;
  left: calc(100% + 22px);
  top: 50%;
  white-space: nowrap;
  font-family: Arial, "Malgun Gothic", sans-serif;
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1;
  color: #b7bab0;
  pointer-events: none;
  transform: translateY(-50%);
}

.mainCircle.active {color: #20221e;}
.mainCircle.active::before {
  background: rgba(232, 230, 216, 0.82);
  border-color: #f1eee3b3;
  transform: translate(-50%, -50%) scale(1.02);
}
.mainCircle:focus-visible {outline: none;}
.mainCircle:focus-visible::before {outline: 1px solid #e8e7da; outline-offset: 5px;}

.circleLine {
	position: absolute;
	left: 50%;
	top: unset;
	width: 100%;
	text-align: center;
  font-family: "Noto Sans KR";
  font-size: 1rem;
  font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 1.5;
	white-space: nowrap;
	color: #292d24;
	opacity: 0;
	transform: translate(-50%, 100%);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
	margin-top: 0.25rem;
	bottom: 0;
}
/* // 한자 호버 시 서클 효과 ~ */ 
.mainArea:has(.circle-hit:is(:hover, :focus-visible)) .mainCircle {opacity: 1;}
.mainArea:has([data-hit="0"]:is(:hover, :focus-visible)) [data-char="0"],
.mainArea:has([data-hit="1"]:is(:hover, :focus-visible)) [data-char="1"],
.mainArea:has([data-hit="2"]:is(:hover, :focus-visible)) [data-char="2"] {color: #888; opacity: 1;}

.mainArea:has([data-hit="0"]:is(:hover, :focus-visible)) [data-char="0"]::before,
.mainArea:has([data-hit="1"]:is(:hover, :focus-visible)) [data-char="1"]::before,
.mainArea:has([data-hit="2"]:is(:hover, :focus-visible)) [data-char="2"]::before {background:#f1eee3; border-color: #f1eee3b3;}

.mainArea:has([data-hit="0"]:is(:hover, :focus-visible)) [data-char="0"] > .circleLine,
.mainArea:has([data-hit="1"]:is(:hover, :focus-visible)) [data-char="1"] > .circleLine,
.mainArea:has([data-hit="2"]:is(:hover, :focus-visible)) [data-char="2"] > .circleLine {opacity: 1; color:#FFF; transform: translate(-50%, -70%);}

/* 한자 호버 → 해당 노드 강조 */
.mainArea:has([data-hit="0"]:is(:hover, :focus-visible)) [data-node="about"],
.mainArea:has([data-hit="1"]:is(:hover, :focus-visible)) [data-node="process"],
.mainArea:has([data-hit="2"]:is(:hover, :focus-visible)) [data-node="work"] {
  opacity: 1;
  color: var(--text);
  & .dot {transform: scale(1.65); background: #f0f0e4;}
  & small {color: #aeb69f;}
}

/* 노드 연결선  */
.mainArea:has(
  :is([data-hit="0"], [data-node="about"]):is(:hover, :focus-visible)
) [data-line="about"],
.mainArea:has(
  :is([data-hit="1"], [data-node="process"]):is(:hover, :focus-visible)
) [data-line="process"],
.mainArea:has(
  :is([data-hit="2"], [data-node="work"]):is(:hover, :focus-visible)
) [data-line="work"] {
  opacity: 1;
  & path {
    stroke: #d8dccb;
    stroke-width: 1;
    stroke-dasharray: 1;
    animation: hover-line-draw 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  & circle {fill: #e7eadf; stroke: #e7eadf;}
}
/* ~ 한자 호버 시 서클 효과 //*/
.verticalT {
	position: absolute;
	right: 2rem;
	top: 50%;
	writing-mode: vertical-rl;
	font-size: 1.15rem;
	letter-spacing: 0.4em;
	line-height: 1.5;
	color: #b2b3ad;
	font-family: "Noto Serif KR", sans-serif;
	font-weight: 500;
	transform: translateY(-50%);
}
.verticalT span {display: block; margin-top: 3.2rem; color: #787b75;}
.heroBotm {
	position: absolute;
	bottom: 4%;
	left: 50%;
	right: unset;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	font-family: var(--mono);
	letter-spacing: 1px;
	transform: translateX(-50%);
	width: 100%;
	max-width: 124rem;
	margin: 0 auto;
	padding: 0 4rem;
	font-size: 0.9rem;
}
.scrollArrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	color: #a6a9a0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.scrollArrow span {font-size: 1.8rem; font-family: Arial; font-weight: 300;}
.version {font-size: 0.8rem; color: var(--muted);}

@media (max-width: 768px) {
	.skip-intro {bottom: 15%; font-size: 0.8rem;}	
	h2 {font-size: 3rem; margin-bottom: 2.2rem;}
	.replayBtn {top: 6%; padding: 0.8rem 0.5rem 0.8rem 0.8rem; font: 0.8rem var(--mono);}
}
.mainCircle:is(:hover, :focus-visible) {color: #fff;}
.mainCircle:is(:hover, :focus-visible)::before {
  background: rgba(232, 230, 216, 0.82);
  border-color: #f1eee3b3;
  transform: translate(-50%, -50%);
}
.mainCircle:is(:hover, :focus-visible) > .circleLine {opacity: 1; transform: translate(-50%, 0);}
.mainInner:has(.mainCircle:is(:hover, :focus-visible))
.mainCircle:not(:hover):not(:focus-visible) {opacity: 0.55;}
.mainInner:has(.mainCircle:is(:hover, :focus-visible)) .connec g {opacity: 0.2;}
.mainInner:has(.mainCircle:is(:hover, :focus-visible)) .node {opacity: 0.3;}

/* 한자 호버·포커스 → 연결된 메뉴 강조 */
.mainInner:has([data-char="0"]:is(:hover, :focus-visible)) [data-node="about"],
.mainInner:has([data-char="1"]:is(:hover, :focus-visible)) [data-node="process"],
.mainInner:has([data-char="2"]:is(:hover, :focus-visible)) [data-node="work"] {
  opacity: 1;
  color: var(--text);
  & .dot {
    transform: scale(1.65);
    background: #f0f0e4;
  }
  & small {
    color: #aeb69f;
  }
}
/* 한자 또는 메뉴 호버·포커스 → 연결선 강조 */
.mainInner:has(
  :is([data-char="0"], [data-node="about"]):is(:hover, :focus-visible)
) [data-line="about"],
.mainInner:has(
  :is([data-char="1"], [data-node="process"]):is(:hover, :focus-visible)
) [data-line="process"],
.mainInner:has(
  :is([data-char="2"], [data-node="work"]):is(:hover, :focus-visible)
) [data-line="work"] {
  opacity: 1;
  /* 선 색상과 그리기 애니메이션 */
  & path {
    stroke: #d8dccb;
    stroke-width: 1;
    stroke-dasharray: 1;
    animation: hover-line-draw 0.65s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  /* 연결선에 포함된 원 */
  & circle {
    fill: #e7eadf;
    stroke: #e7eadf;
  }
}
@media (prefers-reduced-motion: reduce) {
  .connec g path {
    animation: none !important;
  }
}
.mainCircle, .mainCircle::before {pointer-events: none;}
.circle-hit {
  position: absolute;
  z-index: 4;
  border-radius: 50%;
  background: transparent;
  cursor: default;
}
.circle-hit:focus-visible {outline: 1px solid #e8e7da; outline-offset: 5px;}
.mainArea:has(.circle-hit:is(:hover, :focus-visible)) .connec g {opacity: 0.2;}
/**/ 
@media (min-width: 1600px) {
  .name {font-size: 15rem;}
}
@media (max-width: 900px) {
  .name {
    font-size: clamp(64px, 11vw, 100px);
    gap: 5vw;
  }
  .coord {
    left: 4%;
    top: 24%;
  }
  .verticalT {
    right: 3%;
    font-size: 9px;
  }
  .node-contact {
    left: 78%;
  }
  .node {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .node small {
    font-size: 6px;
    letter-spacing: 0.4px;
  }
}

@media (max-width: 768px) {
  .main-border02 {height: 95%;}
  .hero {height: 90svh; min-height: unset; max-height: unset;}
	.coord {font-size: 0.7rem; background: none; left: 0%; border: none; top:16%;}
  .heroSTxt {
    font-size: 1rem;
  }
  .mainSTxt {
    top: 7%;
    left: 50%;
    font-size: 1rem;
    width: 100%;
    text-align: center;
}
	
	.node {font-size: 1rem; padding-left: 1.2rem;}
	.node small {font-size: 0.8rem; letter-spacing: 0.04em;}
	.node-about {left: 12%; top: 13%;}
  .node-work {left: 73%; top: 21%;}
	.node-process {left: 41%; top: 76%;}

	.name {font-size: clamp(6.2rem, 15.4vw, 9.1rem); gap: 4rem; top: 50%;}
  .mainCircle::before {width: 1.6em; height: 1.6em;}
	.circleLine {top: 80%; width: 100%; font-size: 0.75rem; letter-spacing: 0.02em;}
	
  .verticalT {
    top: unset;
    bottom: 10%;
    right: 0%;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
}
  .verticalT span {
    margin-top: 1rem;
    display: unset;
}
	
	.heroBotm {bottom: 2%; padding: 0;}
	.heroBotm p {font-size: 0.8rem; letter-spacing: 0.02em;}
	.version {font-size: 0.8rem; max-width: unset; text-align: right; line-height: 1.8;}
	
	.scrollArrow {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    gap: 0.5rem;
    bottom: 100%;
		transform: translateX(-50%) translateY(-10%);
	}
}
@media (prefers-reduced-motion: reduce) {
  .mainInner {transform: none !important; will-change: auto;}
}

/* ==================== ~ MAIN END // ==================== */

/* ==================== // INTRO START ~ ==================== */
.introPlay .connec path {stroke-dasharray: 1; stroke-dashoffset: 1;}
.introPlay .node {animation-delay: var(--intro-delay, 0.4s);}
@keyframes intro-name {
  0% {
    opacity: 0;
    filter: blur(14px);
    transform: translate(-50%, -50%) scale(1.18);
  }
  35% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes intro-line {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
    transform: scale(1.7);
    transform-origin: center;
  }
  100% {
    opacity: 1;
    stroke-dashoffset: 0;
    transform: scale(1);
  }
}
@keyframes intro-flash {
  0%,
  100% {
    stroke: var(--line);
  }
  40% {
    stroke: #eeefe2;
  }
}
@keyframes intro-node {
  from {opacity: 0; transform: translate(var(--intro-x), var(--intro-y));}
  to {opacity: 1; transform: translate(0, 0);}
}
@keyframes intro-fade {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

.chinese  {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.chinese  text {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  fill: none;
  stroke: var(--text);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: 1500;
}

.introPlay .name {animation: none; color: transparent; text-shadow: none;}
.introPlay .name > span {
  animation: ink-fill 0.8s linear 5.6s both;
  will-change: transform;
}
.introPlay .chinese  {
  display: block;
  animation: writing-out 0.4s ease 6s both;
}
.introPlay .chinese  text {
  animation: write-outline 4s linear var(--write-delay) both;
}
.introPlay .name > span::after {
  animation: meaning-reveal 1.6s ease 4s both;
}
@keyframes meaning-reveal {
  0% {opacity: 0;}
  32%, 78% {opacity: 1;}
  100% {opacity: 0;}
}
.introPlay .connec path {transform: none; animation:drawName 0.85s ease 6s both, intro-flash 0.6s ease 6.6s both;}
.introPlay .connec circle {animation: intro-fade 0.4s ease 6s both;}
.introPlay .node {animation: intro-fade 0.5s ease 6.2s both;}
.introPlay .node-work {animation-delay: 6.3s;}
.introPlay .node-idea {animation-delay: 6.4s;}
.introPlay .node-process {animation-delay: 6.5s;}
.introPlay .node-contact {animation-delay: 6.6s;}
.introPlay .header,
.introPlay .heroSTxt,
.introPlay .coord,
.introPlay .verticalT,
.introPlay .heroBotm,
.introPlay .mainSTxt,
.introPlay .replayBtn {animation: intro-fade 0.5s ease 6.7s both;}
@keyframes stack-to-row {
  from {transform: translate(var(--stack-x), var(--stack-y));}
  to {transform: translate(0, 0);}
}
@keyframes write-outline {
  from {stroke-dashoffset: 1500; opacity: 0;}
  5% {opacity: 1;}
  to {stroke-dashoffset: 0; opacity: 1;}
}
@keyframes ink-fill {
  from {color: transparent;}
  to {color: var(--text);}
}
@keyframes writing-out {
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes drawName {
  from {opacity: 0; stroke-dashoffset: 1;}
  to {opacity: 1; stroke-dashoffset: 0;}
}
.introPlay .mainCircle {pointer-events: none;}
.introPlay .mainCircle::before {animation: intro-fade 0.55s ease 5.8s both;}
.introPlay .circleLine {opacity: 0 !important;}
.introPlay .circle-hit {display: none;}

html.introHidden {overflow: hidden; overscroll-behavior: none;  scroll-behavior: auto;}
body.introPlay {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}
.introPlay .name > span::after {display: none;}
.introKname {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateY(-100%);
  text-align: center;
  font-family: Arial, "Malgun Gothic", sans-serif;
  font-size: 10px;
  line-height: 1.9;
  font-weight: 400;
  letter-spacing: 0;
  color: #b7bab0;
  pointer-events: none;
}

@media (max-width: 600px) {
  .introKname {
    font-size: 9px;
    line-height: 1.8;
  }
}
.main-enter .mainCircle::before {animation: intro-fade 0.45s ease both;}
.main-enter .connec path {stroke-dasharray: 1;animation: drawName 0.8s ease 0.15s both;}
.main-enter .connec circle {animation: intro-fade 0.4s ease 0.3s both;}
.main-enter .node {animation: intro-fade 0.5s ease 0.4s both;}
.main-enter .node-work {animation-delay: 0.5s;}
.main-enter .node-idea {animation-delay: 0.6s;}
.main-enter .node-process {animation-delay: 0.7s;}
.main-enter .node-contact {animation-delay: 0.8s;}
@media (prefers-reduced-motion: reduce) {
  .main-enter *,
  .main-enter *::before {animation: none !important;}
}
.introPlay .sideDex {animation: intro-fade 0.5s ease 6.7s both;}
/* ==================== ~ INTRO END // ==================== */


/* ==================== // ABOAUT CSS START ~ ==================== */
.secWrap {
  max-width: 132rem;
  margin: 0 auto;
  padding: 11rem 5rem;
  border-top: 1px solid #343631;
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: 3.5rem;
  scroll-margin-top: 3.5rem;
}
.secKick {
  font-size: 2rem;
  letter-spacing: 0.02em;
  color: #a4a4a4;
  font-weight: 600;
  font-family: "Noto Serif KR", sans-serif;
}

#about .aboutLtop {
	position: sticky;
	top: 13%;
	padding-top: 13%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-right: 3.5rem;
	justify-content: flex-start;
}
#about .proName {
	font-family: "Noto Serif KR", sans-serif;
	font-weight: 500;
	font-size: 6.8rem;
	letter-spacing: 0.1em;
	line-height: 1;
	margin-bottom: 2rem;
	text-align-last: -webkit-au;
}
#about .eName {
	font-size: 21px;
	letter-spacing: 0.2rem;
	font:1.8rem Georgia, serif;
	margin-bottom: 1rem;
	color: #cdcdcd;
}
#about .job {
  font-size: 0.9rem;
  letter-spacing: 0.17em;
  line-height: 1.8;
  color: #b3b3b3;
}
#about .sBar {
  width: 3.5rem;
  height: 1px;
  background: #b6bca9;
  margin: 4rem 0 2.8rem;
}
#about .intro {
  font-family: "Wanted Sans Variable", sans-serif;
  font-size: 1.7rem;
  line-height: 1.6;
  color: #e5e5e5;
  word-break: keep-all;
  font-weight: 500;
}
#about .infoTxt {
  margin-top: 6.5rem;
  font-size: 0.9rem;
  color: #73796d;
  letter-spacing: 0.1em;
}
.profileBtn {
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
}
.profileBtn {
  border: 1px solid #7d857466;
  border-radius: 3rem;
  padding: 1rem 1.7rem;
  background: transparent;
  
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.25s;
}

button.expand-all {
  background: none;
  border: none;
  color: #FFF;
  color: #dedfd5;
  font-size: 1.5rem;
  font-family: "Noto Sans KR";
  padding: 0;
  line-height: 1;
}


.profileBtn:hover {background: #ffffff0d;}
.profileBtn:focus-visible {outline: 1px solid var(--accent); outline-offset: 4px;}
.folder-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
  isolation: isolate;
  overflow: hidden;;
}
.folder-tabs .trigger {
  width: 100%;
  min-height: unset;
  margin: 0 !important;
  padding: 1.7rem 1.6rem 1.5rem;
  display: flex;
  align-content: center;
  z-index: 1;
  transition: opacity 0.3s;
  background: none;
  position: relative;
  isolation: isolate;
  border: 0;
  flex-direction: column;
  cursor: pointer;
}
.folder-tabs .trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  --tab-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M12 0 H208 Q218 0 220 11 L240 80 H0 V12 Q0 0 12 0 Z'/%3E%3C/svg%3E");
  background: #1b1d1c;
  clip-path: none;
  --round-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M12 0 H208 Q218 0 220 11 L240 80 H0 V12 Q0 0 12 0 Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--round-tab) center/100% 100% no-repeat;
  mask: var(--round-tab) center/100% 100% no-repeat;
}
.folder-tabs .trigger::after {
  content: "";
  position: absolute;
  inset: 1px 1px 0;
  z-index: -1;
  background: #1b1d1c;
  clip-path: polygon(
    0 13px,
    5px 4px,
    13px 0,
    calc(100% - 22px) 0,
    calc(100% - 15px) 5px,
    100% 100%,
    0 100%
  );
}
.folder-tabs .trigger::before,
.folder-tabs .trigger::after {
  background: #1b1d1c;
  clip-path: none;
  --round-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M12 0 H208 Q218 0 220 11 L240 80 H0 V12 Q0 0 12 0 Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--round-tab) center/100% 100% no-repeat;
  mask: var(--round-tab) center/100% 100% no-repeat;
}
.folder-tabs .trigger .num {
  color: #858c7b;
  font-size: 1.4rem;
  font-weight: 400;
  font-family: "Noto Sans KR";
  position: absolute;
  left: 10%;
}
.folder-tabs .trigger .title {
  font-family: "Wanted Sans Variable", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.035em;
  white-space: nowrap;
  align-self: center;
  font-weight: 500;
}
.folder-tabs .trigger .subtitle {
  font-family: "Wanted Sans Variable", sans-serif;
  grid-column: 2;
  display: block;
  font-size: 1.2rem;
}
.folder-tabs .trigger .icon {display: none;}
.folder-tabs .trigger[aria-selected="true"] {opacity: 1; z-index: 5;}
.folder-tabs .trigger:hover {opacity: 1;}
.folder-tabs .trigger:focus-visible {outline-offset: -5px;}
.item:nth-of-type(2) .trigger {margin-left: 8%;}
.item:nth-of-type(3) .trigger {margin-left: 16%;}
.item:nth-of-type(4) .trigger {margin-left: 24%;}
.trigger[aria-expanded="true"] {color: #151a13;}
.trigger:hover {color: #000;}
.trigger:hover::before {filter: brightness(1.06);}
.trigger:focus-visible {outline: 2px solid #e7eddf; outline-offset: 1px;}
.folder-tabs .trigger {--paper: #202221 !important; color: #999c95; opacity: 1;}
.folder-tabs .trigger[aria-selected="true"]::after {background: #202221; bottom: -1px;}
.folder-tabs {z-index: 7;}
.folder-tabs .trigger:hover::before {background: #eeede770; filter: none;}
.folder-tabs .trigger:hover {color: #eeede7;}
.folder-tabs .trigger[aria-selected="true"]::before {background: #eeede770; filter: none;}
.folder-tabs .trigger[aria-selected="true"] {color: #eeede7;}
.folder-tabs .trigger[aria-selected="true"] .subtitle {color: #bec4b5;}
.file-content {position: relative; z-index: 6;}
.file-content .item {
  --paper: #202221 !important;
  border: 1px solid #777573 !important;
  border-top-color: #eeede74d !important;
}
.file-content .tags {color: #8f9983;}
.file-content.is-all .item {border-color: #eeede738 !important;}
.file-content .item {
  display: none;
  margin: 0;
  filter: none;
  padding: 0;
  border-radius: 0 0 7px 7px;
  overflow: hidden;
}
.item:nth-of-type(2) {--paper: #a8b4b8;}
.item:nth-of-type(3) {--paper: #ccc7ba;}
.item:nth-of-type(4) {--paper: #a6aba0;}
.item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: var(--paper);
  border-radius: 0 0 5px 5px;
}
.panel {
  background: var(--paper);
  border-radius: 5px 5px 0 0;
  opacity: 1;
}
.content {
  padding: 23px 30px 32px;
  color: #20271e;
}
.file-content .entry {
  border-top: 1px solid #eeede740;
  display: grid;
  grid-template-columns: 18% 1fr;
  gap: 1.8rem;
  padding: 3rem 0;
}
.entryCont {font-family: "Wanted Sans Variable", sans-serif;}
.skill p {color: #50584c;}
.tags {color: #536347;}
.skills {gap: 2.5rem;}
.skill {border-top-color: #26302026;}
.preview-note {margin-top: 2.4rem;}
.open .trigger .title {font-weight: 500;}

@media (max-width: 900px) {
  .secWrap {grid-template-columns: 20% 1fr;}
}
@media (max-width: 768px) {
	.secWrap {padding: 6.5rem 1rem; grid-template-columns: 1fr; gap: 0;}
  .secWrap p {font-size: 1.3rem;}
	
	.secKick {font-size: 1.2rem;}
	
	
}


@media (max-width: 1050px) {
  .profile {padding-right: 2.8rem;}
  .roman {font-size: 1.8rem; letter-spacing: 0.3em;}
  .trigger .title {font-size: 2rem;}
}


@media (max-width: 768px) {
	#about .aboutLtop {
    position: relative;
    top: unset;
    padding-top: 2rem;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 3rem;
	}
  .profile {position: static;}
  .trigger {
    padding-left: 18px;
    padding-right: 33px;
    gap: 9px;
  }
  .trigger .title {
    font-size: 19px;
  }
  .trigger .subtitle {
    font-size: 8px;
  }
  .content {
    padding: 20px 22px 28px;
  }
  .item:nth-of-type(4) .trigger {
    margin-left: 12%;
  }
  .item:nth-of-type(3) .trigger {
    margin-left: 8%;
  }
  .item:nth-of-type(2) .trigger {
    margin-left: 4%;
  }
}

@media (max-width: 768px) {
	#about .proName {
		text-align-last: -webkit-au;
		writing-mode: unset;
		padding: 0;
		font-size: 4rem;
	}
  .trigger .title {
    font-size: 17px;
  }
  .trigger .subtitle {
    display: none;
  }
  .entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .skills {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  .profileBtn {
    font-size: 8px;
  }
  .profileBtn {
    
    padding: 10px 13px;
  }

  button.expand-all {font-size: 1rem;}
	
	#about .eName {
    letter-spacing: 0.2rem;
    font: 1.5rem Georgia, serif;
    margin-bottom: 1rem;
	}

	#about .sBar {
		width: 3.5rem;
		height: 1px;
		background: #b6bca9;
		margin: 2rem 0 2rem;
	}
	#about .intro {
		font-size: 1.4rem;
		line-height: 1.4;
	}

}
.file-content .item.open {
  display: block;
  margin-bottom: 0 !important;
}
.file-content .item::after {
  display: none;
}
.file-content .panel {
  grid-template-rows: 1fr !important;
  opacity: 1;
  border-radius: 0;
  transition: none;
}
.file-content .content {
  min-height: 320px;
  padding: 10px 32px 32px;
}
.file-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0x;
  background: var(--paper);
  color: #898989;
  padding: 2.8rem 3.2rem 0.8rem;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}
.file-heading strong {
  font:
    2.4rem Georgia,
    serif;
  font-weight: 400;
  letter-spacing: -0.5px;
  color: #eeede7;
}
.file-content:not(.is-all) .item.open .panel-inner {
  animation: page-in 0.35s ease both;
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 1050px) {
  .profile {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
  }
  .profile .kicker {
    grid-column: 1/-1;
    margin-bottom: 24px;
  }
  .profile h1 {
    grid-column: 1;
    grid-row: 2;
  }
  .profile .roman {
    grid-column: 1;
    grid-row: 3;
  }
  .profile .job {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }
  .profile .intro {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
  }
  .profile .sBar,
  .profile .profile-bottom {
    display: none;
  }
  .folder-tabs .trigger .title {
    font-size: 14px;
  }
}
@media (max-width: 550px) {
  .profile {
    display: block;
  }
  .profile h1 {
    font-size: 46px;
  }
  .profile .roman {
    margin-bottom: 22px;
  }
  .profile .intro {
    margin-top: 20px;
  }
  .folder-tabs .trigger {
    padding: 12px 6px;
    grid-template-columns: 1fr;
    min-height: unset;
    gap: 5px;
		
  }
  .folder-tabs .trigger .num {
    font-size: 0.7rem;
    position: relative;
		left:0;
  }
  .folder-tabs .trigger .title {
    font-size: 9px;
    letter-spacing: -0.25px;
  }
  .folder-tabs .trigger .subtitle {
    grid-column: 1;
    font-size: 9px;
  }
  .file-content .content {
    padding: 8px 22px 25px;
  }
  .file-heading {
    padding: 24px 22px 10px;
    font-size: 9px;
  }
  .file-heading strong {
    font-size: 21px;
  }
  .file-content .skills {
    padding-top: 20px;
  }
  .file-content .entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .file-content:not(.is-all) .item.open .panel-inner {
    animation: none;
  }
}
.file-content .skills {
  padding-top: 25px;
}
.file-content.is-all .item {
  display: block;
  margin-bottom: 18px;
  border-radius: 0 0 6px 6px;
}
.file-content.is-all .item:not(:first-child) {
  border-radius: 0;
  border-top: 1px dashed #fff !important;
  padding: 2rem 0;
  background: #212121;
}
.file-content.is-all .content {
  min-height: 0;
}
.file-content .content.skill-groups {
  display: block;
  padding-top: 14px;
}
.skill-group {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid #eeede71c;
}
.skill-group .skillBT {
  margin: 0;
  letter-spacing: 1.1px;
  color: #979f91;
  font-family: "Wanted Sans Variable", sans-serif;
  font-size: 1.2rem;
  line-height: 2;
  font-weight: 500;
}
.skill-list li {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #cbcbc9;
  font-family: "Wanted Sans Variable", sans-serif;
}
.skill-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.skill-list li {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
}
.skill-list li::after {
  display: none;
}
.skill-list li + li::before {
  content: "·";
  margin: 0 12px;
  color: #757d6d;
}
.skill-list .line-break::before,
.skill-list .line-break + li::before {
  display: none;
}
.skill-list .line-break {
  flex-basis: 100%;
  height: 12px;
}
@media (max-width: 600px) {
  .skill-group {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 23px 0;
  }
  .skill-group h3 {
    font-size: 9px;
    margin: 0;
  }
  .skill-list li {
    font-size: 14px;
  }
  .skill-list li:not(:last-child)::after {
    margin: 0 10px;
  }
}

/* ==================== 08. PROCESS · APPROACH ==================== */
.process_list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.process_list li {
  border-top: 1px solid #34382f;
  display: grid;
  grid-template-columns: 4rem 12rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 2.4rem 0;
}
.process_list li .proNum {
  color: #858c7b;
  font-size: 1.4rem;
  font-weight: 400;
  font-family: "Noto Sans KR";
}
.process_list .proBtxt {
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0;
  color: #fff;
}
.process_list p {
  font-size: 1.5rem;
  margin: 0;
  color: #ddd;
}
.process_list h3,
.process_list p {
  font-family: "Wanted Sans Variable", sans-serif;
}
@media (max-width: 900px) {
  .process_list li {
    grid-template-columns: 30px 95px 1fr;
  }
}
@media (max-width: 600px) {
  .process_list li {
    grid-template-columns: 25px 1fr;
  }
  .process_list p {
    grid-column: 2;
  }
}
#approach .apTitle {
  font-family: "Noto Serif KR", sans-serif;
  font-weight: 500;
  font-size: 4.2rem;
  letter-spacing: -0.018em;
  line-height: 1.3;
  margin: 0 0 3rem;
  color: #eeede7;
  border-top: 1px solid #f7f7f799;
  padding-top: 2rem;
}

@media (max-width: 600px) {
  .process_list p {
    font-size: 13px;
  }
}

/* ==================== 09. WORK · 아코디언 · 컨트롤 ==================== */
.work-placeholder {
  border-top: 1px solid #4b4f45;
  border-bottom: 1px solid #34372f;
  padding: 32px 40px 32px 0;
  position: relative;
}
.work-placeholder > span:first-child {
  font: 9px var(--mono);
  letter-spacing: 1px;
  color: #858e7b;
}
.work-placeholder h3 {
  font-size: 19px;
  font-weight: 400;
  margin-top: 35px;
}
.work-placeholder p {
  font-size: 12px;
}
.proTable {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 38px 30px;
  align-items: start;
}
.proTable .project {
  display: block;
  margin: 0;
  padding-bottom: 26px;
  min-width: 0;
}
.proTable .project[hidden] {
  display: none;
}
.proTable .project-cover {
  aspect-ratio: 1.85;
  cursor: default;
}
.proTable .project-cover:hover {
  filter: none;
}
.proTable .project-info {
  display: block;
  margin-top: 20px;
}
.proTable .project-index {
  margin: 0 0 12px;
}
.proTable .project-title {
  font-size: 23px;
  cursor: default;
  margin: 0;
}
.proTable .project-meta {
  margin-top: 20px;
  grid-template-columns: 46px minmax(0, 1fr);
}
.proTable .project-info > p {
  margin: 8px 0 15px;
}
.proTable .project-point {
  border-top: 1px solid #e5e8dc18;
  padding-top: 14px;
  margin: 17px 0 0 !important;
  font-size: 11px;
  color: #969f8c;
  display: none;
}
.project-point > span {
  display: block;
  font-size: 9px;
  color: #b7c0aa;
  margin-bottom: 5px;
}
.proTable .cover-brand-title {
  font-size: clamp(32px, 4vw, 58px);
}
.proTable .landing-title {
  font-size: clamp(23px, 2.6vw, 36px);
}
.proTable .cover-top {
  font-size: 7px;
}
.proTable .cover-object {
  height: 61%;
  right: 12%;
}
.proTable .cover-bottom {
  font-size: 5px;
}
.proTable .cover-admin {
  padding: 16px;
  gap: 14px;
}
.proTable .admin-chart {
  height: 40px;
  margin-top: 12px;
}
.proTable .admin-cards {
  margin-top: 13px;
}
.proTable .admin-table {
  margin-top: 10px;
}
.proTable .admin-table > span:last-child {
  display: none;
}


/* 타이틀 등장 전 */
#work.work-titles-ready .workTitle {
  opacity: 0;
  transform: translateX(-10%);
  transition: opacity 700ms ease,
  transform 700ms ease-in-out;
  transition-delay: var(
--title-delay, 0ms);
}

/* WORK 영역이 화면에 들어오면 */
#work.work-titles-ready.work-titles-visible .workTitle {
  opacity: 1;
  transform: translateX(0);
}

/* 키보드로 접근하면 바로 표시 */
#work.work-titles-ready .workTitle:focus-within {
  opacity: 1;
  transform: none;
  transition-delay: 0ms;
}

/* 모션 줄이기 설정 */
@media (prefers-reduced-motion: reduce) {
  #work.work-titles-ready .workTitle {
    opacity: 1;
    transform: none;
    transition: none;
  }
}



@media (max-width: 750px) {
  .proTable {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .proTable .project-cover {
    aspect-ratio: 1.7;
  }
  .proTable .cover-brand-title {
    font-size: 48px;
  }
  .proTable .landing-title {
    font-size: 30px;
  }
}
.proTable.workToggle {
  display: block;
  border-top: 1px solid #e5e8dc30;
}
.workToggle .project {
  padding: 0;
  margin: 0;
  scroll-margin-top: 180px;
  overflow-anchor: none;
  transition: ease-in;
}
.workTitle {
  margin: 0;
  font-weight: 400;
}
h3.workTitle:hover {
    background: #2f2f2f9c;
}
.workNum,
.workType {
  letter-spacing: 0.01em;
  color: #858e79;
  font-size: 1.5rem;
  font-family: "Noto Serif KR";
  font-weight: 500;
}
.workName {
  font-size: 24px;
  letter-spacing: -0.6px;
  transition: color 0.3s;
}
.work-trigger:hover .workName,
.work-trigger[aria-expanded="true"] .workName {
  color: #eeede7;
  font-weight: 500;
}
.work-trigger:focus-visible {
  outline: 1px solid #b6c1a7;
  outline-offset: -3px;
}
.work-toggle-icon {
  position: relative;
  width: 14px;
  height: 14px;
}
.work-toggle-icon::before,
.work-toggle-icon::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 1px;
  background: #b6c1a7;
  transition: transform 0.35s;
}
.work-toggle-icon::after {
  transform: rotate(90deg);
}
.work-trigger[aria-expanded="true"] .work-toggle-icon::after {
  transform: rotate(0);
}
.work-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s,
    visibility 0.5s;
}
.workOpen .work-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
}
.work-panel-clip {
  overflow: hidden;
  min-height: 0;
}
.work-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  gap: 5%;
  padding: 8px 0 35px 65px;
  align-items: center;
}
.workToggle .project-info {
  margin: 0;
  min-width: 0;
}
.workToggle .project-info .project-index,
.workToggle .project-info .project-title {
  display: none;
}
.workToggle .project-info > p {
  font-size: 13px;
}
.workToggle .project-cover {
  aspect-ratio: 1.65;
}
.workToggle .cover-brand-title {
  font-size: clamp(30px, 3.7vw, 54px);
}
.work-toolbar {
  position: sticky;
  top: 94px;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  background: rgba(21, 22, 22, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #e5e8dc12;
  margin-bottom: 14px;
  font: 9px var(--mono);
  color: #9ea98e;
  letter-spacing: 1px;
}
.work-toolbar button:hover:not(:disabled) {
  background: #ffffff0b;
}
.work-toolbar button:disabled {
  opacity: 0.3;
  cursor: default;
}
.work-toolbar button:focus-visible {
  outline: 1px solid #b6c1a7;
  outline-offset: 3px;
}

@media (max-width: 750px) {
  .work-toolbar {
    top: 72px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .work-count {
    flex-basis: 100%;
  }
  .work-toolbar button {
    font-size: 10px;
  }
  .work-trigger {
    grid-template-columns: 25px 1fr 16px;
    gap: 12px;
    padding: 23px 0;
  }
  .work-label {
    font-size: 19px;
  }
  .work-kind {
    display: none;
  }
  .work-panel-layout {
    display: block;
    padding: 3px 0 26px;
  }
  .workToggle .project-info {
    margin-top: 22px;
  }
  .workToggle .project {
    scroll-margin-top: 190px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-panel,
  .work-toggle-icon::after,
  .work-label {
    transition: none;
  }
}
.secWrap.workArea {
  display: grid;
  grid-template-columns: 25% minmax(0, 1fr);
  gap: 3.5rem;
  padding-top: 11rem;
}
.work-sidebar {
  position: sticky;
  top: 135px;
  align-self: start;
  min-width: 0;
}
.workCont {
  min-width: 0;
  position: relative;
  overflow: hidden;
}


.workArea .work-demo-note {
  font-size: 8px !important;
  margin: 20px 0 30px;
}
.work-sidebar .work-toolbar {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  margin: 38px 0 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  border: 0;
}
.work-sidebar .work-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.work-sidebar .work-toolbar button {
  font-size: 10px;
  padding: 9px 10px;
}
.work-sidebar .work-step-actions button {
    font-size: 1.8rem;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.5rem;
}
.work-sidebar .work-count {
    font-size: 1.2rem;
}

.workCont .work-label {
  font-size: 2.4rem;
  font-family: "Noto Serif KR", sans-serif;
	
  font-weight: 400;
}
.workCont .work-kind {
  font-size: 1.2rem;
  font-family: "Wanted Sans Variable", sans-serif;
}
.workCont .work-panel-layout {
  padding: 1rem 0 3rem 0;
  gap: 6%;
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
}
.workCont .project-info > p {font-size: 1.2rem;}
.workCont .project-meta p {
    font-size: 1.5rem;
    font-family: 'Noto Sans KR';
		line-height: 1.8!important;
}
.workCont .project-meta p.stack {
    color: #8d8d8d;
    font-weight: 600;
    font-size: 1.4rem;
    margin: 1.5rem 0 0.5rem;
    display: inline-block;
    border: 1px solid #8d8d8d70;
    padding: 0.5rem 1rem;
    line-height: 1!important;
    font-family: Consolas, "Courier New", monospace;
}

.workCont .project-meta p.stackT {
    font-size: 1.5rem;
    font-family: Consolas, "Courier New", monospace;
}
.workCont .project-cover {
  aspect-ratio: 1.45;
}
.workCont .cover-brand-title {
  font-size: clamp(28px, 2.9vw, 42px);
  letter-spacing: -1.5px;
}
.workCont .cover-top {
  font-size: 5px;
  letter-spacing: 0.7px;
}
.workCont .cover-top > span:last-child {
  display: none;
}
.workCont .landing-title {
  font-size: 25px;
}
.workCont .landing-outline {
  font-size: 170px;
}
.workCont .landing-pill {
  font-size: 6px;
  padding: 8px 9px;
}
.workCont .admin-sidebar {
  display: none;
}
.workCont .admin-cards b {
  font-size: 14px;
}
.workCont .project {
  scroll-margin-top: 125px;
}


.siteBtn {
    width: 100%;
    border: 1px solid #FFF;
    display: inline-flex;
    margin-top: 2rem;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.siteBtn:hover {
  background: #ffffff12;
  border-radius: 2rem;
}
.siteBtn a {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
}
.sbtnImg {
  width: 1.2rem;
  height: auto;
  margin-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.siteBtn:hover .sbtnImg {animation: arrow-diagonal 1.5s ease-in-out infinite;}
@keyframes arrow-diagonal {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  40% {
    transform: translate(4px, -4px);
    opacity: 0;
  }
  41% {
    transform: translate(-4px, 4px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.sbtnImg img {width:100%; height: auto; transform: translateY(1px);}




@media (max-width: 900px) {
  .secWrap.workArea {
    grid-template-columns: 20% minmax(0, 1fr);
  }
  .work-sidebar .work-view-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .workCont .work-panel-layout {
    display: block;
  }
  .workCont .project-cover {
    aspect-ratio: 1.8;
  }
  .workCont .project-info {
    margin-top: 20px;
  }
  .workCont .project-meta {
    grid-template-columns: 45px minmax(0, 1fr);
  }
  .workCont .work-kind {
    display: none;
  }
  .workCont .work-trigger {
    grid-template-columns: 25px minmax(0, 1fr) 14px;
  }
}
@media (max-width: 600px) {
  .secWrap.workArea {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-top: 65px;
  }
  .work-sidebar {
    position: static;
  }
  .work-sidebar .work-toolbar {
    margin-top: 22px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
  }
  .work-sidebar .work-count {
    flex-basis: 100%;
  }
  .work-sidebar .work-view-actions {
    flex-direction: row;
  }
  .work-sidebar .work-step-actions {
    margin-top: 0;
    margin-left: auto;
    gap: 8px;
  }
  .workCont .work-panel-layout {
    padding-left: 0;
  }
  .workCont .work-label {
    font-size: 19px;
  }

}
.work-toolbar > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.work-sidebar .work-step-actions {
  margin-top: 5px;
  gap: 13px;
}
.work-toolbar button {
  background: none;
  color: #c9d0bf;
  border: 1px solid #e5e8dc25;
  padding: 10px 12px;
  font:
    11px Arial,
    "Malgun Gothic",
    sans-serif;
  cursor: pointer;
  transition: background 0.25s;
}
.work-trigger {
  width: 100%;
  display: flex;
  grid-template-columns: 45px 1fr auto 18px;
  gap: 2rem;
  border: 0; 
  background: none;
  color: #a8afa0;
  padding: 27px 0;
  text-align: left;
  cursor: pointer;
  padding: 2.3rem 1rem;
  border-top: 1px solid #cdcdcd;
  align-items: center;
}

/* ==================== 10. WORK · 기기 이미지 · 마우스 미리보기 ==================== */
.work-hover-preview {
  position: absolute;
  left: 0;
  top: 0;
  width: min(320px, 80%);
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0s 0.35s;
  will-change: transform;
}
.work-hover-preview.is-visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.work-preview-surface {
  position: relative;
  aspect-ratio: 1.55;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.is-visible .work-preview-surface {
  transform: translateY(0) scale(1);
}
.workCont .work-hover-preview .project-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.workCont .work-hover-preview .project-cover.is-current {
  opacity: 1;
}
.work-hover-preview .project-cover img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.work-hover-preview .mobile-preview {
  display: none;
}
.work-hover-preview .desktop-preview {
  border-radius: 0;
}
@media (hover: none), (pointer: coarse) {
  .work-hover-preview {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .work-hover-preview,
  .work-preview-surface,
  .workCont .work-hover-preview .project-cover {
    transition: none;
  }
  .work-preview-surface {
    transform: none;
  }
}
.device-preview {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1.23;
  margin-bottom: 2cqw;
  width: auto;
  margin: 0;
  padding-bottom: 2rem;
  padding-right: 2rem;
}
.desktop-preview {
  position: relative;
  border-radius: 12px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}
.mobile-preview {
  position: absolute;
  width: 39%;
  height: auto;
  bottom: 0;
  right: 0;
  border-radius: 12px;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}
.desktop-preview img,
.mobile-preview img {
  width: 100%;
  height: auto;
}

/* ==================== 11. CONTACT · 푸터 ==================== */
.goTop {
  display: inline-block;
  margin-top: 3rem;
  font: 1rem var(--mono);
  letter-spacing: 0.1em;
  border-bottom: 1px solid #737b66;
  padding-bottom: 0.5rem;
}
.footer {
  padding: 3rem 6rem;
  border-top: 1px solid #343631;
  display: flex;
  justify-content: space-between;
  font: 1.2rem var(--mono);
  letter-spacing: 0.15em;
  color: #868c7f;
}
@media (max-width: 768px) {
  .footer {
    font-size: 0.6rem;
    padding: 2.5rem 7%;
    letter-spacing: 0.1em;
  }
}
.contactT {
  font-size: 1.8rem;
  font-family: "Wanted Sans Variable", sans-serif;
  font-weight: 500;
  color: #888;
  line-height: 1.8;
}
.contactT:hover {color: #f2f2f2;}



.main-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

.introPlay .main-border {width: 120%;}
.intro-main .main-border {width: 100%%;}



/* 1. 기존 한자 윤곽 쓰기: 0–4초 */

.introPlay .mainArea {height: 75%;}

.intro-main .mainArea {height: 55%;}




.introPlay .chinese text {
  animation: write-outline 4s linear 0s both;
}
/* 윤곽 쓰기 완료 후 실제 글자로 전환 */
.introPlay .name > span {
  animation: ink-fill .4s linear 4s both;
}
.introPlay .chinese {
  display: block;
  animation: writing-out .4s ease 4.1s both;
}
/* 2. 한글 이름: 4–5.2초 */
.introPlay .introKname {
  display: block;
  opacity: 0;
  animation: none;
  transition: opacity 0.2s ease;
}

.introPlay .introKname.is-visible {
  opacity: 1;
}

/* 기존 CSS 맨 마지막에 추가. 이름에 적용한 시간 기반 애니메이션만 해제합니다. */
.introPlay .introKname {
  display: block;
  opacity: 0;
  animation: none !important;
  transition: opacity 0.18s ease;
}
.introPlay .introKname.is-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .introPlay .introKname { transition: none; }
}


/* 3. 원 그리기: JS에서 5.2초에 시작, 마지막 원은 6.84초에 완료 */
/* 4. 세로 → 가로: JS에서 7–8.4초 */
/* 가로 배치가 완성될 때 메인 연결선과 UI 등장 */
.introPlay .connec path {
  animation: drawName .6s ease 8.4s both;
}
.introPlay .connec circle {
  animation: intro-fade .4s ease 8.4s both;
}
.introPlay .node {
  animation: intro-fade .5s ease 8.5s both;
}
.introPlay .node-work { animation-delay: 8.55s; }
.introPlay .node-idea { animation-delay: 8.6s; }
.introPlay .node-process { animation-delay: 8.65s; }
.introPlay .node-contact { animation-delay: 8.7s; }
.introPlay .header,
.introPlay .heroSTxt,
.introPlay .coord,
.introPlay .verticalT,
.introPlay .heroBotm,
.introPlay .mainSTxt,
.introPlay .replayBtn,
.introPlay .sideDex {
  animation: intro-fade .5s ease 8.7s both;
}
.main-enter .circle-svg { animation: intro-fade .45s ease both; }
@media (prefers-reduced-motion: reduce) {
  .introPlay .chinese { display: none; }
  .introPlay .name > span { color: var(--text); }
  .main-enter .circle-svg { animation: none; }
}


.mainCircle .circle-stroke {
  /* 선 그리기 길이가 화면 배율의 영향을 받지 않도록 */
  vector-effect: none;
  stroke-width: 0.5;
}

/* 인트로가 끝나면 점선 설정을 제거해 완전한 원으로 표시 */
body:not(.introPlay) .mainCircle .circle-stroke {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

.mainCircle .circle-stroke {
  /* 선 그리기 길이가 화면 배율의 영향을 받지 않도록 */
  vector-effect: none;
  stroke-width: 0.5;
}

/* 인트로가 끝나면 점선 설정을 제거해 완전한 원으로 표시 */
body:not(.introPlay) .mainCircle .circle-stroke {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}


/* 메인에서는 원 투명도 1 */
.mainCircle .circle-svg {
  opacity: 1;
}

/* 원을 그릴 때 0.5 → 가로로 펼쳐지면서 1 */
.introPlay .mainCircle .circle-svg {
  animation: circle-opacity-up 1.4s ease 6s both;
}

@keyframes circle-opacity-up {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .introPlay .mainCircle .circle-svg {
    animation: none;
    opacity: 0;
  }
}

/* 기존 연결선 그리기 + 반짝임 유지 */
.introPlay .connec path {
  animation-delay: 7.4s, 8s;
}

.introPlay .connec circle {
  animation-delay: 7.4s;
}

/* 기존 노드 등장 효과 유지 */
.introPlay .node {
  animation-delay: 7.5s;
}

.introPlay .node-work {
  animation-delay: 7.55s;
}

.introPlay .node-idea {
  animation-delay: 7.6s;
}

.introPlay .node-process {
  animation-delay: 7.65s;
}

.introPlay .node-contact {
  animation-delay: 7.7s;
}

/* 기존 메인 요소 등장 효과 유지 */
.introPlay .header,
.introPlay .heroSTxt,
.introPlay .coord,
.introPlay .verticalT,
.introPlay .heroBotm,
.introPlay .mainSTxt,
.introPlay .replayBtn,
.introPlay .sideDex {
  animation-delay: 7.7s;
}
/* 실제 애니메이션 완료에 따라 단계별로 진행합니다. */
body.introPlay .name > .mainCircle {
  animation: none;
  color: transparent;
  transition: opacity .4s ease;
  transform: translate(var(--stack-x), var(--stack-y));
}
body.introPlay .chinese {
  display: block;
  opacity: 1;
  animation: none;
}
body.introPlay .chinese text {
  animation: write-outline 3.4s linear 0s both;
}
body.introPlay .introKname {
  display: block;
  opacity: 0;
  animation: none !important;
  transition: opacity .65s cubic-bezier(.4, 0, .2, 1);
}
body.introPlay .introKname.is-visible {
  opacity: 1;
  transition: opacity .3s ease-out;
}
body.introPlay .mainCircle .circle-svg {
  animation: none;
  opacity: .5;
  transition: opacity 1.4s ease;
}
body.introPlay:not(.intro-circles) .circle-stroke {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1 !important;
}
body.introPlay.intro-circles .name > .mainCircle {
  animation: ink-fill .4s linear both;
}
body.introPlay.intro-circles .chinese {
  animation: writing-out .4s ease .1s both;
}
body.introPlay.intro-align .mainCircle .circle-svg { opacity: 1; }
body.introPlay .connec path,
body.introPlay .connec circle,
body.introPlay .node,
body.introPlay .header,
body.introPlay .heroSTxt,
body.introPlay .coord,
body.introPlay .verticalT,
body.introPlay .heroBotm,
body.introPlay .mainSTxt,
body.introPlay .replayBtn,
body.introPlay .sideDex {
  animation: none;
  opacity: 0;
}
body.introPlay.intro-main .connec path {
  animation: drawName .85s ease both, intro-flash .6s ease .6s both;
}
body.introPlay.intro-main .connec circle { animation: intro-fade .4s ease both; }
body.introPlay.intro-main .node { animation: intro-fade .5s ease .2s both; }
body.introPlay.intro-main .node-work { animation-delay: .3s; }
body.introPlay.intro-main .node-process { animation-delay: .4s; }
body.introPlay.intro-main .node-contact { animation-delay: .5s; }
body.introPlay.intro-main .header,
body.introPlay.intro-main .heroSTxt,
body.introPlay.intro-main .coord,
body.introPlay.intro-main .verticalT,
body.introPlay.intro-main .heroBotm,
body.introPlay.intro-main .mainSTxt,
body.introPlay.intro-main .replayBtn,
body.introPlay.intro-main .sideDex { animation: intro-fade .5s ease .7s both; }

/* 원의 선 끝을 따라가는 작은 빛. 인트로 이외에는 숨깁니다. */
.mainCircle .circle-tip-orbit {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 50%;
  pointer-events: none;
}
.mainCircle .circle-tip {
  fill: #fff9e8;
  stroke: none;
  filter: drop-shadow(0 0 1px #fff4c9) drop-shadow(0 0 2px #fff4c966);
}
.node-copy { display: block; }
/* 경로 시작점은 기존 원과의 연결 지점을 그대로 사용합니다. */
body.introPlay.intro-main .connec path {
  animation: drawName .65s cubic-bezier(.22, 1, .36, 1) var(--connection-delay, 0s) both;
}
body.introPlay.intro-main .connec circle {
  animation: intro-fade .2s ease var(--connection-delay, 0s) both;
}
body.introPlay.intro-main .node {
  animation: none;
  opacity: 1;
  transition: none;
}
body.introPlay .node .dot,
body.introPlay .node-copy { opacity: 0; }
body.introPlay.intro-main .node .dot {
  animation: connection-arrival .42s ease-out calc(var(--connection-delay, 0s) + .65s) both;
}
body.introPlay.intro-main .node-copy {
  animation: connection-label .35s ease-out calc(var(--connection-delay, 0s) + .69s) both;
}
@keyframes connection-arrival {
  0% { opacity: 0; transform: scale(.8); box-shadow: 0 0 0 0 #fff4d600; }
  25% { opacity: 1; transform: scale(1.45); background: #fff8e4; box-shadow: 0 0 9px 2px #fff4d666; }
  100% { opacity: 1; transform: scale(1); background: rgb(190 193 179 / 80%); box-shadow: 0 0 0 3px #151616; }
}
@keyframes connection-label {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .mainCircle .circle-tip-orbit { display: none; }
  body.introPlay .node .dot, body.introPlay .node-copy { animation: none; opacity: 1; }
}