/* Game Portfolio Custom Styles */
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT/fonts/variable/woff2/SUIT-Variable.css');
/* Theme variables */
:root{
	--bg:#ffffff;
	--surface:#ffffff;
	/* Light mode: align with project pages (e.g. dawnstar) */
	--text:#1a1d21;
	--muted:#4a4d48;
	--primary:#9aa06a;     /* khaki accent */
	--primary-600:#8b915f;
	--alt:#f3f4f0;         /* soft off-white with green tint (blockquotes, subtle bands) */
}
body[data-theme="dark"]{
	--bg:#0e1110;          /* near-black with green tint */
	--surface:#141814;     /* deep olive */
	--text:#e7eadf;
	--muted:#a6ad9a;
	--primary:#a3b07a;     /* khaki brighter for dark */
	--primary-600:#94a36f;
	--alt:#0f1410;
}

/* Base overrides */
body{background:var(--bg);color:var(--text)}
/* index: 세부 페이지(.proj-detail-page)와 동일 기준 — body 기본 16px이면 같은 em이라도 픽셀이 더 커 보였음 */
body.page-home{font-size:15px;line-height:1.65}
header a{color:var(--primary) !important}
header a:hover{color:var(--primary-600) !important}
.background-alt{background:var(--alt) !important}
/* Index Featured Work: same white band as dawnstar .proj-intro / .proj-block-alt */
body:not([data-theme="dark"]) #work.background-alt{background:#fff !important}
#about h2,#experience h2,#education h2,#projects h2,#skills h2,#contact h2,.heading{color:var(--text) !important}
#about p,.vtimeline-content p,.education-block p,.project-info p,.optional-section-block p{color:var(--muted) !important}
#contact{background:var(--primary) !important}
#lead-overlay{background:rgba(0,0,0,0.35) !important}

.theme-dark#lead{background:#0f1420;position:relative}
.theme-dark#lead .lead-video-wrap{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;z-index:0;pointer-events:none;min-height:100%}
.theme-dark#lead .lead-video-wrap iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;transform:translate(-50%,-50%);border:none}
.theme-dark#lead #lead-content{position:relative;z-index:2}
.theme-dark#lead #lead-overlay{position:absolute;z-index:1}
.theme-dark#lead #lead-down{position:absolute;z-index:2}
/* Dean Tate style: title above image, description below, 2 cols */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:144px 32px}
.work-card{position:relative;background:transparent;border:none;overflow:visible;transition:opacity .2s}
.work-card:hover{opacity:.95}
.work-title{margin:0 0 42px 0;font-size:1.5em;font-weight:300}
.work-title a{color:var(--text);text-decoration:none}
.work-title a:hover{color:var(--primary)}
.work-card .work-media{display:block;overflow:hidden;aspect-ratio:16/9;background:#1a1d21;margin-bottom:42px}
.work-card .work-meta{padding:0;margin:0;max-width:42em}
.work-card .work-meta p{margin:0 0 18px 0;font-size:.95em;line-height:1.95;color:var(--muted)}
.work-card .work-meta p.work-detail{margin:0 0 18px 0;font-size:.88em;line-height:1.8;color:#5a5d58}
body[data-theme="dark"] .work-card .work-meta p.work-detail{color:var(--muted)}
.work-actions{display:flex;gap:12px;margin-top:12px}
@media only screen and (max-width: 768px){.work-grid{grid-template-columns:1fr}}
.btn-link{color:var(--primary-600);text-decoration:underline}
.btn-link:hover{color:var(--primary);text-decoration:underline}

/* 프로젝트 상세: 상세·가이드 이동 파란 텍스트 링크 (Pickpacker tease #4a90d9 톤) */
.proj-detail-page a.proj-detail-accent-link{
	color:#4a90d9;
	font-weight:500;
	text-decoration:underline;
	text-underline-offset:2px;
}
.proj-detail-page a.proj-detail-accent-link:hover{color:#357abd}
body[data-theme="dark"] .proj-detail-page a.proj-detail-accent-link{color:#6eb3f7}
body[data-theme="dark"] .proj-detail-page a.proj-detail-accent-link:hover{color:#8ec5ff}

/* Solid button for About resume CTA */
.btn-solid{display:inline-block;background:var(--primary);color:#fff;border-radius:8px;padding:10px 14px;font-weight:700}
.btn-solid:hover{color:#fff;background:var(--primary-600);text-decoration:none}

/* Header controls */
.header-controls{position:absolute;left:15px;top:10px;display:flex;gap:8px}
#lang-toggle{border:1px solid #b9bfc4;background:#fff;color:#374054;border-radius:6px;padding:4px 8px}
#theme-toggle{border:1px solid #b9bfc4;background:#fff;color:#374054;border-radius:6px;padding:4px 8px}
body:not([data-theme="dark"]) header:not(.proj-header) #lang-toggle,
body:not([data-theme="dark"]) header:not(.proj-header) #theme-toggle{border-color:#bbb;color:#4a4d48}

/* Project detail page: Dean Tate style header (title + nav, no Back) - 섹션과 정렬 */
.proj-detail-page header,.proj-header{position:relative;text-align:left;padding-top:24px;padding-bottom:20px;padding-left:max(24px,calc((100% - 1280px) / 2 + 24px));padding-right:max(24px,calc((100% - 1280px) / 2 + 24px));background:var(--bg);border-bottom:1px solid rgba(0,0,0,.08)}
body[data-theme="dark"] .proj-header{border-bottom-color:rgba(255,255,255,.08)}
.proj-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.proj-header-brand{font-size:2.4em;font-weight:900;letter-spacing:.02em;text-decoration:none;color:var(--text) !important;background:none;border-radius:0;padding:0}
.proj-header-brand:hover{color:var(--muted) !important;background:transparent}
.proj-header-nav{display:flex;flex-wrap:wrap;gap:0 24px;row-gap:6px;font-size:.9em}
.proj-header-nav a{color:var(--muted);text-decoration:none;background:none;border-radius:0;padding:0}
.proj-header-nav a:hover{color:var(--text);font-weight:700;background:transparent}
.proj-header-nav a.active{color:var(--text);font-weight:700;background:transparent}
.proj-header .header-controls{position:static;left:auto;top:auto}
.proj-header #lang-toggle,.proj-header #theme-toggle{border:none;background:transparent;border-radius:0;padding:6px 10px;cursor:pointer}
/* index: 프로젝트 헤더 좌우 패딩을 본문(.page-home .container) 1120px와 맞춤 */
body.page-home .proj-header{padding-left:max(24px,calc((100% - 1220px) / 2 + 24px));padding-right:max(24px,calc((100% - 1220px) / 2 + 24px))}
body.page-home .proj-header-top{justify-content:flex-start}
/* 프로젝트 네비 직후 About 상단 여백 → 그 다음 Featured Work */
body.page-home #about{padding-top:4cm;padding-bottom:4.5rem}
@media (max-width:768px){
	body.page-home #about{padding-top:2.5rem;padding-bottom:3rem}
}
/* index: styles.css #about 의 border-bottom(전체 너비 선)이 Featured Work 위에 겹쳐 보이므로 제거 — 구분은 hr.proj-divider-short만 사용 */
body.page-home #about{border-bottom:none !important}
body.page-home #work{padding-top:1.5rem}
@media (max-width:768px){
	body.page-home #work{padding-top:1.25rem}
}
body.page-home #about .heading{margin-bottom:2rem}
@media (max-width:768px){
	body.page-home #about .heading{margin-bottom:1.5rem}
}
body.page-home #work .heading{margin-bottom:4rem}
@media (max-width:768px){
	body.page-home #work .heading{margin-bottom:2.5rem}
}
/* index: 세부 프로젝트 페이지와 동일 타이포 (.proj-section-title / .proj-block-title / .proj-block-desc) */
body.page-home #work .heading,
body.page-home #about .heading{
	font-size:2em !important;
	font-weight:200 !important;
	color:#1a1d21 !important;
	letter-spacing:normal;
}
/* styles.css .heading:after(50px 밑줄) 제거 — About/FEATURED WORK 위 hr만 남김 */
body.page-home #work h2.heading::after,
body.page-home #work .heading::after,
body.page-home #about h2.heading::after,
body.page-home #about .heading::after{
	content:none !important;
	display:none !important;
	width:0 !important;
	height:0 !important;
	background:transparent !important;
}
body.page-home .work-title{
	font-size:1.5em;
	font-weight:200;
	letter-spacing:normal;
}
body.page-home .work-title a{color:#1a1d21}
body.page-home .work-card .work-meta p{
	font-size:1em !important;
	font-weight:300 !important;
	line-height:1.7 !important;
	color:#4a4d48 !important;
	margin:0 0 12px 0 !important;
}
body.page-home .work-card .work-meta p.work-detail{
	font-size:1em !important;
	font-weight:300 !important;
	line-height:1.7 !important;
	color:#5a5d58 !important;
	margin:0 0 12px 0 !important;
}
body.page-home #about p{
	font-size:1em !important;
	font-weight:300 !important;
	line-height:1.7 !important;
	color:#4a4d48 !important;
	margin:0 0 12px 0 !important;
}
body[data-theme="dark"].page-home #work .heading,
body[data-theme="dark"].page-home #about .heading{color:var(--text) !important}
body[data-theme="dark"].page-home .work-title a{color:var(--text) !important}
body[data-theme="dark"].page-home .work-card .work-meta p,
body[data-theme="dark"].page-home .work-card .work-meta p.work-detail,
body[data-theme="dark"].page-home #about p{color:var(--muted) !important}
/* Featured Work: 링크는 이미지 바로 아래, 메타는 라벨·값 구분 */
body.page-home .work-card .work-media{margin-bottom:18px}
body.page-home .work-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin:0 0 26px 0;max-width:42em}
body.page-home .work-links .work-actions{margin:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
body.page-home .work-card .work-links .btn-link,
body.page-home .work-card .work-links .btn-link:visited{color:#4a90d9}
body.page-home .work-card .work-links .btn-link:hover{color:#3a7abf}
body.page-home .work-card .work-meta p.work-desc,
body.page-home .work-card .work-meta p.work-detail{line-height:1.88 !important;margin:0 0 18px 0 !important}
body.page-home .work-card .work-meta .work-detail-label,
body.page-home .work-links .work-detail-label{
	font-size:1.07em;
	font-weight:300;
	color:#2d3028;
	letter-spacing:-0.02em;
}
body.page-home .work-card .work-meta .work-detail-label{font-style:italic}
body.page-home .work-links .work-detail-label{flex:0 0 auto;font-style:normal}
body.page-home .work-card .work-meta p.work-desc,
body.page-home .work-card .work-meta p.work-detail{font-style:normal}
body.page-home .work-card .work-meta .work-detail-value{font-style:normal}
body.page-home .work-card .work-meta .work-detail-sep{margin-inline-end:0.2em;font-style:italic}
body[data-theme="dark"].page-home .work-card .work-meta .work-detail-label,
body[data-theme="dark"].page-home .work-links .work-detail-label{color:var(--text) !important}
/* index About: 이미지 왼쪽 + 텍스트 (헤더 네비 바로 아래) */
body.page-home .about-home-row{align-items:flex-start}
body.page-home .about-home-photo img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover;border-radius:4px;background:#1a1d21}
@media (max-width:991px){
	body.page-home .about-home-photo{margin-bottom:1.25rem}
}
body.page-home .about-home-cta{margin-top:16px}
body.page-home .about-home-resume{
	font-weight:500;
	display:inline-block;
	padding:0;
	background:transparent !important;
	border:none !important;
	border-radius:0 !important;
	box-shadow:none !important;
}
body.page-home .about-home-social{
	display:flex;
	flex-wrap:wrap;
	gap:18px 22px;
	align-items:center;
	margin-top:1rem;
}
body.page-home .about-social-link{
	color:#1a1d21;
	font-size:1.35em;
	line-height:1;
	text-decoration:none;
	opacity:0.88;
	transition:opacity .2s,color .2s;
}
body.page-home .about-social-link:hover{
	opacity:1;
	color:var(--primary-600);
	text-decoration:none;
}
body.page-home .about-social-tistory .about-social-tistory-mark{
	display:inline-block;
	font-weight:800;
	font-size:0.95em;
	letter-spacing:0.02em;
}
body[data-theme="dark"].page-home .about-social-link{color:var(--text)}
body[data-theme="dark"].page-home .about-social-link:hover{color:var(--primary-600)}
/* Footer: About과 동일한 소셜 링크, 우측 정렬 */
body.page-home footer .footer-home-social{
	justify-content:flex-end;
	margin-top:8px;
}
body.page-home footer .footer-home-social .about-social-link{display:inline-flex;align-items:center;justify-content:center}
.proj-detail-page .btn-solid{border-radius:0;border:none;font-weight:500}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .45s ease, transform .45s ease}
.reveal.in-view{opacity:1;transform:none}

/* Work media (video) - fill container, no empty space */
.work-media{display:block}
.work-video{display:block;width:100%;height:100%;object-fit:cover;background:#1a1d21}
.work-thumb{display:block;width:100%;height:100%;object-fit:cover;background:#1a1d21}

/* Hero video */
.hero-video-wrapper{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-video{position:absolute;inset:0;background:#000}
.hero-video iframe{width:100%;height:100%;object-fit:cover;pointer-events:none}
#lead-content{position:relative;z-index:2}
#lead.theme-dark{background:#121714 !important}

/* Process link styling */
.process-link{font-style:italic}
.process-link:before{content:'??';}


/* Project page: YouTube / video embed (sharp corners) */
.proj-media{width:100%}
.video-responsive{position:relative;width:100%;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:0;background:#000}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none}

/* === Dawnstar & Project Detail Page (???????, BioShock ?????? === */
.proj-detail-page{background:#fff;color:#2d2f2a;font-size:15px;line-height:1.65}
.proj-detail-page .btn-link{color:#6b7344;text-decoration:underline}
.proj-detail-page .btn-link:hover{color:var(--primary);text-decoration:underline}
.container-narrow{max-width:calc(960px - 5cm);margin:0 auto;padding:0 24px}
.proj-container-wide{max-width:calc(1280px);margin:0 auto;padding:0 24px}
.proj-section-title{font-size:2em;font-weight:200;margin:0 0 36px 0;padding-bottom:0;border-bottom:none;color:#1a1d21}
.proj-overview-subtitle{font-size:1.35em;font-weight:200;margin:24px 0 10px 0;color:#1a1d21}
.proj-subtitle-hr{border:none;height:2px;background:rgba(0,0,0,.15);width:80px;margin:48px 0 14px 0;padding:0}
.proj-hr-half{border:none;height:1px;background:rgba(0,0,0,.15);width:50%;margin:20px auto;padding:0}
.proj-hr-full{border:none;height:1px;background:rgba(0,0,0,.12);width:100%;margin:20px 0;padding:0}
.proj-divider-short{border:none;height:1px;background:#bbb;width:100%;max-width:1280px;margin:16px auto;padding:0;display:block;box-sizing:border-box}
/* index: About ↔ Featured Work 구분선 — 본문 .container(1220px) 폭에 맞춤 */
body.page-home .proj-divider-short{max-width:1250px}
body[data-theme="dark"] .proj-detail-page .proj-divider-short{background:#bbb}
body[data-theme="dark"] .proj-divider-short{background:rgba(255,255,255,.25)}
body[data-theme="dark"] .proj-hr-half,.proj-hr-full{background:rgba(255,255,255,.2)}
body[data-theme="dark"] .proj-hr-half{background:rgba(255,255,255,.2)}
.proj-subtitle-hr:first-of-type{margin-top:40px}
.proj-section-line{margin-top:48px;padding-top:40px;border-top:1px solid #bbb}
body[data-theme="dark"] .proj-detail-page .proj-section-line{border-top-color:#bbb}
body[data-theme="dark"] .proj-section-line{border-top-color:rgba(255,255,255,.25)}
.proj-divider-full{margin:28px 0 24px 0;padding:0;border:0;border-top:1px solid #bbb;background:0 0}
hr.proj-divider-full{display:block;height:0;min-height:0;border:0;border-top:1px solid #bbb;overflow:visible;background:transparent}
body[data-theme="dark"] .proj-detail-page .proj-divider-full,body[data-theme="dark"] .proj-detail-page hr.proj-divider-full{border-top-color:#bbb}
body[data-theme="dark"] .proj-divider-full{border-top-color:rgba(255,255,255,.25)}
body[data-theme="dark"] hr.proj-divider-full{border-top-color:rgba(255,255,255,.25)}
/* proj-divider: proj-container-wide ?? ??????? ???? ??(hr? div ???) */
.proj-divider,.proj-container-wide .proj-divider{margin:28px 0 24px 0;padding:0;border:0;border-top:1px solid #bbb;background:transparent;display:block;height:0;overflow:visible}
body[data-theme="dark"] .proj-detail-page .proj-divider{border-top-color:#bbb}
body[data-theme="dark"] .proj-divider{border-top-color:rgba(255,255,255,.25)}
/* proj-no-divider: ??? ???? ???? ???? */
.proj-with-section-lines .proj-no-divider{border-top:none !important}
/* ???? ??? ??? ???? proj-container-wide ??????? ???????????? */
.proj-divider-full-width{margin-top:48px;padding-top:0;width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:calc(50vw - 50% + 24px);padding-right:calc(50vw - 50% + 24px);box-sizing:border-box;position:relative;z-index:1}
.proj-divider-full-width .proj-divider-line{display:block;width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);height:3px;background:#888888;border:none;margin-top:0;margin-bottom:40px;padding:0}
body[data-theme="dark"] .proj-divider-full-width .proj-divider-line{background:rgba(255,255,255,.25)}
body[data-theme="dark"] .proj-subtitle-hr{background:rgba(255,255,255,.2)}
.proj-tech-nav{display:flex;flex-wrap:wrap;gap:12px 24px;padding:16px 0;border-bottom:1px solid #e8e8e8}
.proj-tech-nav a{color:var(--muted);text-decoration:none;font-size:.95em}
.proj-tech-nav a:hover{color:var(--primary);font-weight:600}
body[data-theme="dark"] .proj-tech-nav{border-bottom-color:rgba(255,255,255,.1)}
#tech-network-arch,#tech-game-server,#tech-database,#tech-packet-pipeline,#tech-combat,#tech-data,#tech-problems{scroll-margin-top:24px}

/* 1. Hero: ?????????? */
.proj-hero-dark{background:linear-gradient(135deg, #0f1418 0%, #1a2028 100%);color:#e7eadf;padding:80px 0}
.proj-hero-light{background:#fff;color:#2d2f2a;padding:80px 0}
.proj-hero-light h1{font-size:2em;font-weight:200;margin:0 0 20px 0;color:#1a1d21}
.proj-hero-light .proj-hero-meta p{color:#5a5d58}
.proj-hero-inner{max-width:1280px;margin:0 auto;padding:0 24px}
.proj-hero-dark h1,.proj-hero-dark .proj-section-title{font-size:2em;font-weight:200;margin:0 0 20px 0;color:#fff}
.proj-hero-sub{font-weight:300;opacity:.9;font-size:.85em}
.proj-hero-split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:40px}
.proj-hero-split-tight{gap:8px;grid-template-columns:auto 1fr}
.proj-hero-split-text-wide{gap:12px;grid-template-columns:minmax(0,0.4fr) 1fr}
.proj-hero-split:has(.proj-hero-media[style*="display: none"]){grid-template-columns:1fr}
.proj-hero-media img{width:100%;height:auto;border-radius:0}
.proj-hero-img-sm{max-width:100%;height:auto;display:block}
.proj-hero-light .proj-hero-img-sm{margin:0}
.proj-hero-dark .proj-hero-img-sm{margin:0 auto}
.proj-hero-meta p{margin:0 0 14px 0;color:#c5c9c2;line-height:1.6}
.proj-hero-meta .btn-link{color:#a3b07a}
.proj-release{font-weight:700;color:#fff}

@media (max-width:768px){.proj-hero-split{grid-template-columns:1fr}.proj-hero-dark h1,.proj-hero-light h1,.proj-hero-dark .proj-section-title{font-size:1.5em}}

/* Pickpacker: 히어로 트레일러 영역 넓게 */
.proj-hero-pickpacker .proj-hero-split{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:768px){.proj-hero-pickpacker .proj-hero-split{grid-template-columns:1fr}}

/* Pickpacker: Overview — 단일 컬럼 + 루프 영상 3열 */
.proj-intro-pickpacker-overview .proj-intro-split{grid-template-columns:1fr}
.pickpacker-overview-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0 32px 0}
.pickpacker-overview-videos .pickpacker-overview-img{width:100%;height:auto;display:block;background:#0f1418;aspect-ratio:16/9;object-fit:cover;border-radius:0}

/* Pickpacker process: 본문 아래 2열 루프 영상 */
.pickpacker-process-videos-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 28px 0}
.pickpacker-process-videos-2 .pickpacker-loop{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;background:#0f1418;border-radius:0}
@media (max-width:768px){.pickpacker-process-videos-2{grid-template-columns:1fr}}

.pickpacker-placement-loop{margin:20px 0 28px 0;max-width:100%}
.pickpacker-placement-loop .pickpacker-loop{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;background:#0f1418;border-radius:0}
.pickpacker-placement-caption{margin:20px 0 14px 0;line-height:1.65;color:var(--text)}
.pickpacker-placement-top-view{margin:0 0 8px 0}

.pickpacker-section-figure{margin:18px 0 8px 0;max-width:100%}
.pickpacker-section-figure img{max-width:100%;height:auto;display:block;margin:0 auto;border-radius:0;border:1px solid rgba(0,0,0,.08);background:#f0f0f0}
body[data-theme="dark"] .pickpacker-section-figure img{border-color:rgba(255,255,255,.12);background:#1a1d21}

.pickpacker-ik-grip-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,720px);gap:24px 32px;align-items:start;margin-top:28px;margin-bottom:8px}
.pickpacker-ik-grip-text{min-width:0}
.pickpacker-ik-grip-lead{margin-top:0}
.pickpacker-section-figure-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 24px 0;max-width:100%}
.pickpacker-section-figure-2--stack{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}
/* PICK AND GRAB 오른쪽 열: 두 이미지 좌우 배치 */
.pickpacker-ik-grip-row .pickpacker-section-figure-2--inline{margin:0;min-width:0}
.pickpacker-drone-perception-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,720px);gap:24px 28px;align-items:start;margin:20px 0 28px 0}
.pickpacker-drone-perception-text{min-width:0}
.pickpacker-drone-perception-figure{margin:0;min-width:0;position:sticky;top:24px;align-self:start}
.pickpacker-drone-perception-figure img{width:100%;height:auto;display:block;border-radius:0;border:1px solid rgba(0,0,0,.08);background:#f0f0f0;object-fit:contain}
body[data-theme="dark"] .pickpacker-drone-perception-figure img{border-color:rgba(255,255,255,.12);background:#1a1d21}
@media (max-width:768px){.pickpacker-drone-perception-row{grid-template-columns:1fr}.pickpacker-drone-perception-figure{position:static;max-width:min(100%,400px);margin-left:auto;margin-right:auto}}
.pickpacker-section-figure-2 img{width:100%;height:auto;display:block;border-radius:0;border:1px solid rgba(0,0,0,.08);background:#f0f0f0;object-fit:contain}
body[data-theme="dark"] .pickpacker-section-figure-2 img{border-color:rgba(255,255,255,.12);background:#1a1d21}
@media (max-width:768px){.pickpacker-ik-grip-row{grid-template-columns:1fr}.pickpacker-section-figure-2--stack{max-width:min(100%,520px);margin-left:auto;margin-right:auto}.pickpacker-ik-grip-row .pickpacker-section-figure-2--inline{max-width:min(100%,560px);margin-left:auto;margin-right:auto}}
@media (max-width:640px){.pickpacker-section-figure-2:not(.pickpacker-section-figure-2--stack){grid-template-columns:1fr}}
@media (max-width:900px){.pickpacker-overview-videos{grid-template-columns:1fr}}

/* Pickpacker: HIGHLIGHTS 첫 블록 — 오른쪽 2×2 루프 영상 */
.pickpacker-highlight-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.pickpacker-highlight-videos .pickpacker-loop{width:100%;height:auto;display:block;background:#0f1418;aspect-ratio:16/9;object-fit:cover}
@media (max-width:768px){.pickpacker-highlight-videos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:480px;margin:0 auto}}

/* Pickpacker: 멀티엔딩 — 글은 왼쪽 전체 폭(38em 제한 해제), 유튜브는 오른쪽 열 */
.proj-block-body-pickpacker-ending{grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:32px;align-items:start}
.proj-block-desc-pickpacker-ending p,.proj-block-desc-pickpacker-ending ul{max-width:none}
.pickpacker-ending-youtube-wrap,.pickpacker-underground-video-wrap{position:sticky;top:24px;min-width:0}
.pickpacker-ending-youtube-wrap .video-responsive{background:#000}
.pickpacker-underground-video-wrap .pickpacker-loop{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;background:#0f1418;border-radius:0}
@media (max-width:768px){.proj-block-body-pickpacker-ending{grid-template-columns:1fr}.pickpacker-ending-youtube-wrap,.pickpacker-underground-video-wrap{position:static}}

/* Pickpacker: OVERVIEW 아래 — 개발 과정 상세 안내 */
.proj-pickpacker-process-tease{padding:32px 0 32px 0;background:#fff;border-top:none !important}
.proj-with-section-lines .proj-pickpacker-process-tease{border-top:none !important}
.proj-pickpacker-process-tease .proj-divider-short:first-of-type{margin-top:0;margin-bottom:28px}
.proj-pickpacker-process-tease .proj-divider-short:last-of-type{margin-top:28px;margin-bottom:0}
/* tease 다음 HIGHLIGHTS: 섹션 전체 폭 구분선 제거(짧은 hr만 사용) */
.proj-with-section-lines .proj-pickpacker-process-tease + .proj-block-alt{border-top:none !important}
.proj-pickpacker-process-tease-title{font-size:1.85em;font-weight:300;margin:0 0 18px 0;line-height:1.25;color:#4a90d9}
.proj-pickpacker-process-tease-title-link{color:inherit;text-decoration:none}
.proj-pickpacker-process-tease-title-link:hover{text-decoration:underline}
.proj-pickpacker-process-tease-lead{margin:0 0 14px 0;line-height:1.75;color:#4a4d48;font-size:1em;font-weight:300}
.proj-pickpacker-process-tease-lead a{color:#4a90d9;text-decoration:underline;font-weight:500}
.proj-pickpacker-process-tease-lead a:hover{color:#357abd}
.proj-pickpacker-process-tease-sub{margin:0;line-height:1.75;color:#4a4d48;font-size:1em;font-weight:300;text-align:left}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-process-tease{background:var(--surface)}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-process-tease-title{color:#6eb3f7}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-process-tease-title-link{color:inherit}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-process-tease-lead{color:var(--muted)}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-process-tease-lead a{color:#6eb3f7}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-process-tease-lead a:hover{color:#8ec5ff}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-process-tease-sub{color:var(--muted)}
/* Pickpacker: HIGHLIGHTS 하단 — 상단 tease와 동일한 큰 파란 제목 링크 */
.proj-pickpacker-highlights-cta{margin-top:2.5rem;padding-top:1.75rem;border-top:1px solid rgba(0,0,0,.08)}
.proj-pickpacker-highlights-cta .proj-pickpacker-process-tease-title{margin-bottom:0}
body[data-theme="dark"] .proj-detail-page .proj-pickpacker-highlights-cta{border-top-color:rgba(255,255,255,.12)}
/* 관련 문서 등 리스트 링크(Startup 등) */
.proj-doc-links-accent{list-style:disc;padding-left:1.25em;margin:12px 0 0 0;line-height:1.8}
.proj-doc-links-accent a.proj-detail-accent-link{font-weight:500}

/* Tab Game: hero 이미지 영역 제한 */
.proj-hero-tabgame .proj-hero-split-text-wide{grid-template-columns:minmax(0,0.6fr) 1fr}
.proj-hero-tabgame .proj-hero-img-sm{max-width:100%}

/* devcomtycoon: Hero + OVERVIEW 좁은 여백 (이미지 같은 느낌) */
.proj-compact-hero .proj-hero-light{padding:40px 0}
.proj-compact-hero .proj-hero-split{margin-top:20px}
.proj-compact-hero .proj-hero-light h1{margin-bottom:12px}
.proj-compact-hero .proj-intro{padding:40px 0 60px 0}
.proj-compact-hero .proj-intro .proj-section-title{margin-bottom:28px}

/* Intro: ?????+ ??? (??? ??? ????) */
.proj-intro{padding:80px 0;background:#fff}
.proj-intro .proj-section-title{margin-bottom:40px}
.proj-intro-split{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start}
.proj-intro-text p{line-height:1.7;color:#4a4d48;margin:0;font-size:1em;font-weight:300}
.proj-intro-split .proj-intro-text{max-width:100%;min-width:0}
.proj-intro-img-sm{max-width:75%;height:auto;display:block}
.proj-intro-meta-list p{margin:0 0 10px 0;font-size:1em;line-height:1.6;color:#4a4d48}
.proj-intro-meta-list .proj-meta-line em{font-style:normal;color:#6a6e63;margin-right:6px}
.proj-startup .proj-intro-split{grid-template-columns:1.1fr 0.9fr;align-items:start}
.proj-startup .proj-intro-media img{width:110%;height:auto;object-fit:cover;transition:transform .35s ease;cursor:pointer}
.proj-startup .proj-intro-media img:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-container-wide.proj-full-width .proj-core-intent-content{max-width:none}
@media (max-width:768px){.proj-intro-split{grid-template-columns:1fr}}

/* 2. Project Overview: ???????? (????? ??? ????) */
.proj-block-alt{background:#fff;padding:80px 0;border-top:none}
.proj-creative-process{background:#fff;padding:80px 0}
.proj-creative-subsection{margin-top:48px}
.proj-creative-subsection:first-of-type{margin-top:0}
.proj-creative-subsection .proj-block-title{font-size:1.35em;font-weight:300;margin:0 0 16px 0;color:#1a1d21}
.proj-creative-subsection .proj-core-intent-content{max-width:none}
.proj-creative-subsection .proj-block-body{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:start}
@media (max-width:768px){.proj-creative-subsection .proj-block-body{grid-template-columns:1fr}}
.proj-creative-subsection .proj-block-media img{width:100%;height:auto;border-radius:0}
.proj-wrap-content{overflow:hidden}
.proj-wrap-img{float:right;max-width:45%;height:auto;margin:0 0 20px 24px;border-radius:0}
/* ????? ???? ??? ??, ?????? ??? */
.proj-img-compact{max-width:36%!important;margin:8px 20px 12px 24px!important}
.proj-wrap-img.proj-img-compact{max-width:36%;margin:8px 0 12px 24px}
@media (max-width:768px){.proj-wrap-img{float:none;max-width:100%;margin:0 0 20px 0}
.proj-img-compact,.proj-wrap-img.proj-img-compact{max-width:100%!important;margin:0 0 16px 0!important}}
/* ????? ??: ??????? ?????? ??? */
.proj-img-with-source{position:relative;display:inline-block;overflow:hidden}
.proj-img-with-source img{width:100%;height:auto;display:block;vertical-align:top}
.proj-img-source{position:absolute;bottom:6px;right:6px;font-size:0.65em;color:rgba(255,255,255,.95);background:rgba(0,0,0,.7);padding:3px 8px;opacity:0;transition:opacity .25s;pointer-events:none}
.proj-img-with-source:hover .proj-img-source{opacity:1}
.proj-img-with-source img{transition:none}
.proj-img-with-source:hover img{transform:none}
/* proj-startup: proj-img-with-source ??img?????? ??? (transform:none ??? ??????) */
.proj-startup .proj-img-with-source img{transition:transform .35s ease;cursor:pointer}
.proj-startup .proj-img-with-source:hover img{transform:scale(1.5);position:relative;z-index:20}
/* proj-startup ?????img ???? ?????? ?????*/
.proj-img-with-source:has(img:hover){overflow:visible}
.proj-intro-media:has(img:hover){overflow:visible}
.proj-intro-split:has(img:hover){overflow:visible}
.proj-intro:has(img:hover){overflow:visible}
.proj-container-wide:has(img:hover){overflow:visible}
.project-page:has(img:hover){overflow:visible}
.proj-ai-disclaimer{margin:32px 0 0 0;padding-top:20px;border-top:1px solid #e8e8e8;color:#6a6e63;font-size:0.9em}
.proj-rastencia-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:12px;width:100%}
.proj-rastencia-row img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}
@media (max-width:768px){.proj-rastencia-row{grid-template-columns:1fr}}
/* ?? ?????: ???? ???? ????? ??? ?? ????, ??? ??? */
.proj-concept-imgs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start;overflow:visible;max-width:100%}
.proj-concept-imgs img{width:100%;height:auto;display:block;vertical-align:top}
@media (max-width:768px){.proj-concept-imgs{grid-template-columns:1fr}}
/* ?? ??? ??: 2?????????, ?? ????? ?? ??? ????? ?????????? ??? ??? */
.proj-concept-free{column-count:2;column-gap:28px;margin-top:20px;overflow:visible}
.proj-concept-item{break-inside:avoid;margin-bottom:28px;page-break-inside:avoid}
.proj-concept-item:nth-child(1){padding-left:0}.proj-concept-item:nth-child(2){padding-left:6%}
.proj-concept-item:nth-child(3){padding-left:3%}.proj-concept-item:nth-child(4){padding-left:0}
.proj-concept-item:nth-child(5){padding-left:5%}.proj-concept-item:nth-child(6){padding-left:2%}
.proj-concept-caption{margin:0 0 6px 0;font-size:0.9em;color:#6a6e63;font-style:italic}
.proj-concept-item img{width:76%;height:auto;display:block}
.proj-concept-item:nth-child(odd) img{margin-right:auto;margin-left:0}
.proj-concept-item:nth-child(even) img{margin-left:auto;margin-right:0}
@media (max-width:768px){.proj-concept-free{column-count:1}
.proj-concept-item{padding-left:0!important}
.proj-concept-item img{width:85%;margin-left:auto!important;margin-right:auto!important}}
.proj-overview-split{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:start;width:100%}
.proj-pcg-features-split{grid-template-columns:1fr 1.85fr}
.proj-pcg-features-split .proj-overview-media-2x2 img{aspect-ratio:4/3;min-height:180px}
.proj-overview-split > div{min-width:0}
.proj-overview-media{overflow:hidden;max-width:100%}
.proj-overview-media:hover{overflow:visible}
.proj-overview-media-grid,.proj-overview-media-2x2,.proj-overview-media-row{min-width:0;overflow:hidden;max-width:100%}
.proj-overview-media:hover .proj-overview-media-grid,
.proj-overview-media:hover .proj-overview-media-2x2,
.proj-overview-media:hover .proj-overview-media-row{overflow:visible}
/* ?????/??????? ?????? ?????? ?????- ?????? ??? ?? ????*/
.proj-overview-media-2x2:has(img:hover),
.proj-overview-media-2x2:has(video:hover),
.proj-overview-media-row:has(img:hover),
.proj-overview-media-row:has(video:hover){overflow:visible}
.proj-overview-media-row > div:has(img:hover){overflow:visible}
.proj-overview-intro{margin:0 0 24px 0;line-height:1.7;color:#4a4d48;font-size:1em;font-weight:300}
.proj-overview-subtitle:first-of-type{margin-top:0}
.proj-flow-title{font-size:1.2em;font-weight:500;margin:28px 0 12px 0;color:#1a1d21}
.proj-auth-flow-title{font-size:1.2em;font-weight:500;margin:28px 0 12px 0;color:#1a1d21}
.proj-flow-step{font-size:1em;font-weight:500;margin:24px 0 8px 0;color:#4a4d48}
.proj-flow-step:first-of-type{margin-top:16px}
.proj-details-collapse{ margin:12px 0; padding:12px 0; border-top:1px solid #e8e8e8 }
.proj-details-collapse summary{ cursor:pointer; font-weight:500; color:var(--primary); list-style:none }
.proj-details-collapse summary::-webkit-details-marker{ display:none }
.proj-details-collapse summary::before{ content:'??'; font-size:0.8em }
.proj-details-collapse[open] summary::before{ content:'??' }
.proj-details-collapse .mermaid{ min-height:200px }
.proj-flow-diagram{font-family:monospace;font-size:0.9em;line-height:1.5;background:#f8f9f8;padding:20px 24px;border-radius:0;border-left:3px solid var(--primary);margin:16px 0 24px 0;color:#4a4d48;white-space:pre}
body[data-theme="dark"] .proj-flow-diagram{background:#1a1e1a;color:#a6ad9a;border-left-color:var(--primary)}
.proj-code-snippet{font-family:monospace;font-size:0.84em;line-height:1.5;padding:14px 18px;border-radius:4px;border-left:3px solid var(--primary);margin:10px 0 14px 0;overflow-x:auto;background:#f6f8fa}
.proj-code-snippet code{background:transparent;padding:0}
body[data-theme="dark"] .proj-code-snippet{background:#282c34;border-left-color:var(--primary)}
body[data-theme="dark"] .proj-code-snippet .hljs{background:#282c34;color:#abb2bf}
body[data-theme="dark"] .proj-code-snippet .hljs-keyword,.hljs-selector-tag{color:#c678dd}
body[data-theme="dark"] .proj-code-snippet .hljs-string,.hljs-attr{color:#98c379}
body[data-theme="dark"] .proj-code-snippet .hljs-number,.hljs-literal{color:#d19a66}
body[data-theme="dark"] .proj-code-snippet .hljs-comment{color:#5c6370;font-style:italic}
.proj-code-caption{margin:0 0 16px 0;font-size:0.9em;color:#6a6e63;font-style:italic}
.proj-overview-list p:not(.proj-overview-intro){margin:0 0 8px 0;line-height:1.7;color:#5a5d58;font-size:1em;font-weight:300}
.proj-overview-list ul{margin:0;padding:0 0 0 20px;line-height:1.7;color:#5a5d58;font-size:1em;font-weight:300}
.proj-overview-list li{margin-bottom:12px}
.proj-overview-media-grid{display:flex;flex-direction:column;gap:20px}
.proj-overview-media-2x2{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto;gap:16px}
.proj-overview-media-2x2 video,.proj-overview-media-2x2 img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;transition:transform .35s ease;cursor:pointer}
.proj-overview-media-2x2 video:hover,.proj-overview-media-2x2 img:hover,.proj-overview-media-row img:hover,.proj-overview-media-row video:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-overview-media-2x2 video{background:#000}
.proj-overview-media-2x2-compact{max-width:85%;margin-left:auto;margin-right:auto;gap:28px}
.proj-overview-media-2x2-compact img{max-width:100%}
.proj-swing-2x2{max-width:58%;margin-left:auto;margin-right:auto;gap:40px}
.proj-swing-2x2 img{max-width:100%}
.proj-overview-media-row{display:grid;gap:16px}
.proj-overview-media-row video,.proj-overview-media-row img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .35s ease;cursor:pointer}
.proj-overview-media-row-3{grid-template-columns:repeat(3,1fr)}
.proj-overview-media-row-2{grid-template-columns:repeat(2,1fr)}
.proj-overview-media-row > div img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.proj-overview-media-row > div .proj-media-caption{margin-top:0;margin-bottom:8px}
.proj-overview-media-row-4{grid-template-columns:repeat(4,1fr)}
.proj-overview-media-grid video,.proj-overview-media-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;transition:transform .35s ease;cursor:pointer}
.proj-overview-media-grid video:hover,.proj-overview-media-grid img:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-overview-media-grid video{background:#000}
.proj-media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.proj-media-grid video,.proj-media-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0;transition:transform .35s ease;cursor:pointer}
.proj-media-grid video:hover,.proj-media-grid img:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-media-grid video{grid-column:span 2;aspect-ratio:16/9}
.proj-cta{margin-top:40px}.proj-cta .btn-solid{display:inline-block}
@media (max-width:768px){.proj-overview-split{grid-template-columns:1fr}.proj-overview-media-2x2{grid-template-columns:1fr}.proj-overview-media-row-3,.proj-overview-media-row-2,.proj-overview-media-row-4{grid-template-columns:1fr}.proj-media-grid{grid-template-columns:1fr 1fr}.proj-items-grid-sm img{width:48px}}

/* ?? ???: proj-with-section-lines? ?? ?? */
.proj-with-section-lines .proj-intro,.proj-with-section-lines .proj-section-blocks,.proj-with-section-lines .proj-block-alt,.proj-with-section-lines .proj-block-dark,.proj-with-section-lines .proj-block-gray,.proj-with-section-lines .proj-worldbuilding,.proj-with-section-lines .proj-creative-process,.proj-with-section-lines .proj-process{border-top:1px solid #bbb}
/* proj-detail-page: ?? ??? ?? #fff??? ?? ????? border? ??? ? ??(?? ??? ? border = ? ??) */
body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-intro,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-section-blocks,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-block-alt,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-block-dark,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-block-gray,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-worldbuilding,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-creative-process,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-process{border-top-color:#bbb}
.proj-with-section-lines .proj-combat-subsection{border-top:1px solid #bbb;margin-top:48px;padding-top:40px}
body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-combat-subsection{border-top-color:#bbb}
body[data-theme="dark"] .proj-with-section-lines .proj-combat-subsection{border-top-color:rgba(255,255,255,.25)}
/* proj-creative-process, proj-process: ?? ??? ?? */
.proj-creative-process,.proj-process{border-top:none}
.proj-footer-cta{border-top:none}
/* footer ???: ???? ?????? ?? ?? */
.project-page .proj-footer-cta{border-top:1px solid #bbb}
body[data-theme="dark"] .proj-detail-page .project-page .proj-footer-cta,body[data-theme="dark"] .proj-detail-page .proj-with-section-lines .proj-footer-cta{border-top-color:#bbb}
body[data-theme="dark"] .project-page .proj-footer-cta{border-top-color:rgba(255,255,255,.25)}
.proj-with-section-lines .proj-footer-cta{border-top:1px solid #bbb}
body[data-theme="dark"] .proj-with-section-lines .proj-footer-cta{border-top-color:rgba(255,255,255,.25)}
/* proj-divider-full-width: overflow visible (full-bleed ????) */
.project-page:has(.proj-divider-full-width) .proj-section-blocks,.project-page:has(.proj-divider-full-width) .proj-container-wide,.project-page:has(.proj-divider-full-width){overflow:visible}
/* kCars OVERVIEW: ????? ??? ?????? + ?????????? ???????? ??? (?????? ?? ??? ???? */
.proj-overview-with-desc .proj-overview-media-row{min-width:0}
.proj-overview-with-desc .proj-hover-desc-item{overflow:hidden;border-radius:0}
.proj-overview-with-desc .proj-hover-desc-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .35s ease;cursor:pointer}
.proj-overview-with-desc .proj-hover-desc-item:hover img{transform:scale(1.5);position:relative;z-index:20}
.proj-overview-with-desc:has(.proj-hover-desc-item:hover) .proj-overview-media-row{overflow:visible}
.proj-hover-desc-tooltip{position:fixed;z-index:100;display:none;max-width:280px;padding:14px 18px;background:rgba(30,32,28,.97);border:1px solid rgba(255,255,255,.12);border-radius:6px;font-size:0.9em;line-height:1.55;color:#e0e2dc;font-weight:300;box-shadow:0 8px 24px rgba(0,0,0,.25);pointer-events:none}
.proj-hover-desc-tooltip.is-visible{display:block}
body[data-theme="light"] .proj-hover-desc-tooltip{background:rgba(255,255,255,.97);border-color:#e0e0e0;color:#2d2f2a;box-shadow:0 8px 24px rgba(0,0,0,.12)}
/* 3. Gameplay Systems */
.proj-section-blocks{background:#fff;padding:80px 0;border-top:none}
.proj-section-blocks.proj-tech-subsection{border-top:none;padding-top:64px;margin-top:0;position:relative}
.proj-section-blocks.proj-tech-subsection::before{content:'';display:block;width:72px;height:2px;background:rgba(0,0,0,.2);margin:0 0 48px 0;padding:0}
body[data-theme="dark"] .proj-section-blocks.proj-tech-subsection::before{background:rgba(255,255,255,.25)}
.proj-section-block{padding:56px 0;border-bottom:none}
.proj-block-title{font-size:1.5em;font-weight:200;margin:0 0 20px 0;color:#1a1d21}
.proj-section-block + .proj-section-block{padding-top:72px}
.proj-block-body{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:start;width:100%}
.proj-block-body-full{grid-template-columns:1fr}
.proj-block-body > div{min-width:0}
.proj-block-media{overflow:hidden;max-width:100%}
.proj-block-media:hover{overflow:visible}
.proj-block-media-col,.proj-block-media-row,.proj-block-media-2x2{min-width:0;overflow:hidden;max-width:100%}
.proj-block-media:hover .proj-block-media-col,
.proj-block-media:hover .proj-block-media-row,
.proj-block-media:hover .proj-block-media-2x2,
.proj-block-media:hover .proj-block-media-row-4{overflow:visible}
/* proj-block-media ??? ??? ??: ?????/??????? ?????? ?????? ?????*/
.proj-block-media-2x2:has(img:hover),
.proj-block-media-2x2:has(video:hover),
.proj-block-media-row:has(img:hover),
.proj-block-media-row:has(video:hover){overflow:visible}
.proj-loop-video{display:block !important;max-width:100% !important;width:100% !important;height:auto;transition:transform .35s ease;cursor:pointer}
.proj-loop-video:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-block-desc p{margin:0 0 12px 0;line-height:1.7;color:#4a4d48;font-size:1em;font-weight:300;max-width:38em}
.proj-block-desc ul{margin:0 0 12px 0;padding-left:22px;line-height:1.7;color:#4a4d48;font-size:1em;font-weight:300}
.proj-block-desc li{margin-bottom:4px}
.proj-design-intent{margin-top:16px !important;margin-bottom:6px !important}
.proj-block-media .video-responsive{border-radius:0;overflow:hidden;min-width:0}
.proj-block-media-row{display:grid;gap:16px}
.proj-block-media-col{display:flex;flex-direction:column;gap:16px}
.proj-block-media-col video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;background:#000}
.proj-block-media-row-2{grid-template-columns:repeat(2,1fr)}
.proj-block-media-row-3{grid-template-columns:repeat(3,1fr)}
.proj-block-media-row-4{grid-template-columns:repeat(2,1fr)}
.proj-block-media-row video,.proj-block-media-row img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;transition:transform .35s ease;cursor:pointer}
.proj-block-media-row video:hover,.proj-block-media-row img:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-block-media-row video{background:#000}
.proj-block-media-2x2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.proj-block-media-2x2 img,.proj-block-media-2x2 video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;transition:transform .35s ease;cursor:pointer}
.proj-block-media-2x2 video{background:#000}
.proj-block-media-2x2 img:hover,.proj-block-media-2x2 video:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-block-media-col video{transition:transform .35s ease;cursor:pointer}
.proj-block-media-col video:hover{transform:scale(1.5);position:relative;z-index:20}
.proj-block-desc-full{margin-top:24px}
.proj-block-below{margin-top:32px}
.proj-block-below:hover .proj-block-media-row{overflow:visible}
.proj-block-below .proj-block-media-row-3{margin:0}
.proj-combat-subsection{margin-top:48px;padding-top:40px;border-top:none}
.proj-combat-subtitle{font-size:1.4em;font-weight:200;margin:0 0 28px 0;color:#1a1d21}
.proj-combat-item{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start;margin-bottom:80px}
.proj-combat-item:last-child{margin-bottom:0}
.proj-combat-desc h5{font-size:1.4em;font-weight:300;margin:0 0 16px 0;color:#1a1d21}
.proj-combat-desc p{margin:0;line-height:1.7;color:#4a4d48;font-size:1em;font-weight:300}
.proj-combat-media .video-responsive{border-radius:0;overflow:hidden}
.proj-block-body-stack{grid-template-columns:1fr 1.15fr}
.proj-block-media-stack{display:flex;flex-direction:column;gap:20px}
@media (max-width:768px){.proj-block-body,.proj-block-body-stack{grid-template-columns:1fr}.proj-block-media-row-2,.proj-block-media-row-3,.proj-block-media-row-4,.proj-block-media-2x2{grid-template-columns:1fr}.proj-combat-item{grid-template-columns:1fr}.proj-header{padding:16px 24px 14px}.proj-header-brand{font-size:1.2em}.proj-header-nav{font-size:.85em;gap:0 16px}}

/* ??? ??? */
.proj-core-intent-content{max-width:60em}
.proj-container-wide .proj-core-intent-content{max-width:none}
.proj-container-wide .proj-block-desc p{max-width:none}
.proj-container-wide .proj-table{max-width:none}
.proj-core-intent-content p{margin:0 0 20px 0;line-height:1.7;color:#4a4d48;font-size:1em;font-weight:300;text-align:justify}
.proj-core-intent-content p:last-of-type{margin-bottom:0}
.proj-core-intent-content ul{margin:0 0 20px 0;padding-left:24px;line-height:1.7;color:#4a4d48;font-size:1em;font-weight:300}
.proj-core-intent-content li{margin-bottom:12px}
.proj-blockquote{margin:20px 0;padding:16px 24px;border-left:4px solid var(--primary);background:var(--alt);color:#4a4d48;font-style:italic}
body[data-theme="dark"] .proj-detail-page .proj-blockquote{color:var(--muted);background:rgba(255,255,255,.04)}

/* Pickpacker process: Mermaid flowchart */
.pickpacker-mermaid-wrap{margin:24px 0 32px 0;padding:20px 16px 12px 16px;overflow-x:auto;background:#f8f9fa;border:1px solid rgba(0,0,0,.08);border-radius:0;max-width:100%}
.pickpacker-mermaid-wrap .mermaid{display:flex;justify-content:center;min-height:120px}
.pickpacker-mermaid-wrap svg{max-width:100%;height:auto}
body[data-theme="dark"] .pickpacker-mermaid-wrap{background:#141814;border-color:rgba(255,255,255,.12)}
.proj-core-intent-content code,.proj-block-desc code{background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:.9em}

/* 4. Network: ???????? (???? ?????) */
.proj-block-dark{background:#fff;color:#2d2f2a;padding:80px 0;border-top:none}
.proj-block-dark .proj-section-title{color:#1a1d21}
.proj-arch-media{margin-bottom:28px;border-radius:0;overflow:hidden;background:#f5f5f5;max-width:80%;margin-left:auto;margin-right:auto}
.proj-arch-media.proj-arch-media-sm{max-width:60%}
.proj-arch-media img{width:100%;height:auto;display:block}
.proj-thread-arch-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;margin-top:32px;margin-bottom:48px}
.proj-thread-arch-split .proj-arch-media{max-width:100%;margin-left:0;margin-right:0}
.proj-mermaid-wrap{min-width:0}
.proj-mermaid-wrap .mermaid{min-height:200px}
@media (max-width:900px){.proj-thread-arch-split{grid-template-columns:1fr}}
.proj-arch-media.proj-arch-media-full{max-width:100%;margin-left:0;margin-right:0}
.proj-arch-media.proj-arch-media-compact{background:transparent}
.proj-arch-media.proj-arch-media-compact img{max-height:100vh;object-fit:contain;object-position:center top}
@media (max-width:768px){.proj-arch-media{max-width:95%}.proj-arch-media.proj-arch-media-full{max-width:100%}.proj-arch-media.proj-arch-media-compact img{max-height:65vh}}
.proj-map-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.proj-map-row-3 img{width:100%;aspect-ratio:4/3;object-fit:cover}
.proj-map-wide{margin-top:0}
.proj-map-wide img{width:100%;max-height:360px;object-fit:contain;object-position:center}
.proj-media-caption{margin:28px 0 8px 0;color:#6a6e63;font-size:0.95em;font-style:italic}
@media (max-width:768px){.proj-map-row-3{grid-template-columns:1fr}.proj-map-wide img{max-height:280px}}
.proj-arch-desc{line-height:1.7;color:#5a5d58;max-width:38em;font-size:1em;font-weight:300}

/* 5. Technical Challenges: ???????? (??? ?????????) */
.proj-block-gray{background:#fff;padding:80px 0;color:#2d2f2a;border-top:none}
.proj-challenge-list{list-style:none;margin:0;padding:0}
.proj-challenge-list li{padding:10px 0;border-bottom:none;font-weight:400}

/* 6. Worldbuilding (????? ??? ????) */
.proj-worldbuilding{padding:80px 0;border-top:none}
.proj-worldbuilding-intro{margin-bottom:40px}
.proj-worldbuilding-intro p{line-height:1.7;color:#5a5d58;max-width:38em;font-size:1em;font-weight:300}
.proj-worldbuilding-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.proj-worldbuilding-gallery:has(img:hover){overflow:visible}
.proj-worldbuilding-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;transition:transform .35s ease;cursor:pointer}
.proj-worldbuilding-gallery img:hover{transform:scale(1.5);position:relative;z-index:20}

/* Design section: item/sprite grid (DevCom Tycoon etc) */
.proj-items-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;justify-items:center;margin-top:32px}
.proj-items-grid img{width:80px;height:auto;object-fit:contain;display:block;transition:transform .25s ease;cursor:pointer}
.proj-items-grid img:hover{transform:scale(1.3);position:relative;z-index:10}
.proj-items-grid-sm img{width:56px}
@media (max-width:768px){.proj-items-grid{grid-template-columns:repeat(4,1fr);gap:16px}.proj-items-grid img{width:64px}.proj-items-grid-sm img{width:48px}}
.proj-items-sprite{margin-top:40px;display:flex;justify-content:center;align-items:center}
.proj-items-sprite img{width:25%;max-width:100%;margin-top:20px;margin-bottom:20px;display:block;object-fit:contain}

/* 7. Process + Footer CTA */
.proj-process{padding:80px 0;border-top:none}
.proj-process-intro{margin-bottom:28px;line-height:1.7;color:#5a5d58;max-width:38em;font-size:1em;font-weight:300}
.proj-process ul{margin:20px 0;padding-left:22px;line-height:1.7;font-size:1em;font-weight:300}
.proj-process p{max-width:38em;line-height:1.7;font-size:1em;font-weight:300}
.proj-footer-cta{padding:64px 24px;text-align:center;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:center;border-top:none}
.proj-table{border-collapse:collapse;width:100%;max-width:42em;margin:16px 0;font-size:0.95em}
.proj-table th,.proj-table td{border:1px solid #d8d8d8;padding:10px 14px;text-align:left;vertical-align:top}
.proj-table th{background:var(--alt);font-weight:500;color:#1a1d21}
.proj-table.proj-table-light th{background:#f0f2ee;color:#2d2f2a}
body[data-theme="dark"] .proj-table.proj-table-light th{background:rgba(255,255,255,.12);color:#e7eadf}
.proj-table td{color:#4a4d48}
.proj-inline-desc{color:#6a6e63;font-size:0.95em;font-style:italic}
body[data-theme="dark"] .proj-inline-desc{color:#a6ad9a}
.proj-tree{font-family:monospace;font-size:0.9em;background:#f5f5f5;padding:16px 20px;border-radius:0;overflow-x:auto;margin:16px 0;line-height:1.6;color:#4a4d48}

/* Pickpacker process: 렌더링 최적화 섹션 */
.pickpacker-render-lead{margin-bottom:8px}
.pickpacker-render-figure{margin:18px auto 28px auto;max-width:min(100%,920px);text-align:center}
.pickpacker-render-figure img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto;border-radius:0;border:1px solid rgba(0,0,0,.08);background:#f0f0f0;object-fit:contain}
body[data-theme="dark"] .pickpacker-render-figure img{border-color:rgba(255,255,255,.12);background:#1a1d21}
.pickpacker-render-subtitle{font-size:1.15em;font-weight:600;margin:28px 0 12px 0;color:#1a1d21;line-height:1.35}
.pickpacker-render-subtitle:first-of-type{margin-top:12px}
body[data-theme="dark"] .pickpacker-render-subtitle{color:#e7eadf}
.pickpacker-render-list{margin:12px 0 20px 0;padding-left:1.35em;line-height:1.7}
.pickpacker-render-list li{margin:10px 0}
.pickpacker-render-table-wrap{overflow-x:auto;margin:20px 0 12px 0;-webkit-overflow-scrolling:touch}
.pickpacker-render-metrics-table{max-width:none;width:100%;min-width:520px;margin-top:8px}
body[data-theme="dark"] .pickpacker-render-metrics-table td{color:#c8cfc0}

/* Page width: index.html?????? ????(proj-container-wide 1280px)?? ?????? */
/* Bootstrap .container??width:750/970/1170??? ??????width:100%????????????? */
@media (min-width:768px){.container{width:100%;max-width:1280px}}
@media (min-width:992px){.container{width:100%;max-width:1280px}}
@media (min-width:1200px){.container{width:100%;max-width:1280px}}
/* index.html(.page-home): 콘텐츠 폭을 1280px보다 살짝 좁게 (#work .container 단독 규칙은 ID 우선순위로 이 설정을 막아 제거함) */
@media (min-width:768px){
	.page-home .container{max-width:1225px}
}

/* Home: Contact — 상단 여백 + 카드형 폼 */
body.page-home #contact{
	padding-top:4.5rem;
	padding-bottom:4rem;
	padding-left:15px;
	padding-right:15px;
	text-align:left;
}
body.page-home #contact .contact-inner{
	max-width:560px;
	margin:0 auto;
}
body.page-home #contact .contact-heading{
	margin:0 0 10px 0;
	color:#fff;
	font-weight:200;
	letter-spacing:0.06em;
	text-transform:uppercase;
	font-size:clamp(1.35rem,3vw,1.75rem);
}
body.page-home #contact .contact-lead{
	margin:0 0 1.75rem 0;
	color:rgba(255,255,255,.88);
	font-weight:300;
	font-size:0.95em;
	line-height:1.55;
	max-width:36em;
}
body.page-home #contact #contact-form{
	max-width:none;
	margin:0;
	padding:1.75rem 1.5rem 1.6rem;
	background:rgba(255,255,255,.1);
	border:1px solid rgba(255,255,255,.18);
	border-radius:14px;
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	box-shadow:0 12px 40px rgba(0,0,0,.12);
}
body.page-home #contact #contact-form .contact-label{
	display:block;
	margin:0 0 6px 0;
	font-size:0.78rem;
	font-weight:500;
	letter-spacing:0.04em;
	text-transform:uppercase;
	color:rgba(255,255,255,.75);
}
body.page-home #contact #contact-form .contact-label + input{margin-top:0}
body.page-home #contact #contact-form input,
body.page-home #contact #contact-form textarea{
	display:block;
	width:100%;
	padding:12px 14px;
	border-radius:8px;
	border:1px solid rgba(0,0,0,.1);
	margin-bottom:14px;
	background:rgba(255,255,255,.96);
	color:#1a1d21;
	font-size:0.95em;
	transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
body.page-home #contact #contact-form input::placeholder,
body.page-home #contact #contact-form textarea::placeholder{
	color:#6a6e63;
	opacity:1;
}
body.page-home #contact #contact-form textarea{
	height:auto;
	min-height:140px;
	resize:vertical;
	margin-bottom:18px;
}
body.page-home #contact #contact-form input:focus,
body.page-home #contact #contact-form textarea:focus{
	outline:none;
	border-color:var(--primary-600,#8a9060);
	box-shadow:0 0 0 3px rgba(154,160,106,.28);
	background:#fff;
}
body.page-home #contact #contact-form button.contact-submit{
	display:block;
	width:100%;
	margin-top:4px;
	padding:12px 18px;
	border-radius:8px;
	border:none;
	background:#fff;
	color:var(--primary);
	font-weight:600;
	font-size:0.95em;
	letter-spacing:0.04em;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(0,0,0,.1);
	transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease;
}
body.page-home #contact #contact-form button.contact-submit:hover{
	transform:translateY(-1px);
	box-shadow:0 8px 24px rgba(0,0,0,.15);
	background:#f8f9f6;
}
body.page-home #contact #contact-form button.contact-submit:focus-visible{
	outline:2px solid #fff;
	outline-offset:3px;
}