@charset "utf-8";
body{background-color:#010101;color:#fff;}
.d3-sec{position:relative;}
.d3-sec:not(.d3-hero){padding:150px 0;}
.d3-sec.copy{padding:150px 0 0 0;}
.d3-sec.model{padding:0;}
.d3-sec .inner{position:relative;width:100%;max-width:100vw;padding:0 60px;overflow:hidden;}
.pd-bt-n{padding-bottom:0!important;}
.br-pc{display:inline;}

/* 공통 버튼 */
.d3-sec .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:24px 40px;border-radius:999px;font-size:22px;font-weight:600;letter-spacing:-.03em;line-height:1;transition:.3s;}
.d3-sec .btn-fill{background:var(--red);color:#fff;border:1px solid var(--red);}
.d3-sec .btn-fill:hover{background:#a00606;border-color:#a00606;}
.d3-sec .btn-line{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);}
.d3-sec .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* 공통 섹션 타이틀 */
.sec-tit{max-width:900px;margin:0 auto 80px;text-align:center;}
.sec-tit .eyebrow{margin-bottom:20px;color:#D90404;font-size:22px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.sec-tit h2,
.sec-tit h3{font-size:50px;font-weight:700;line-height:1.35;letter-spacing:-.02em;color:#F7F7FA;}
.sec-tit .sec-desc{margin-top:24px;font-size:22px;line-height:1.6;color:rgba(255,255,255,.65);}

/*contact*/
.contact{display:flex;position:relative;width:100%;height:100dvh;overflow:hidden;align-items: center;}
.contact .videoWrapper{position:absolute;top:0;left:0;}
.contact video{left:50%;height:100%;transform:translateX(-50%)}
.txt-wrap{width:100%;}
.marquee{width:max-content;font-size:15vw;font-weight: 800;animation:marquee 80s linear infinite;}

.videoWrapper video{position: absolute;overflow: hidden;right: 0;bottom: 0;top:0;right:0;min-width: 100%;min-height: 100%;width: auto;height: auto;z-index:-1;opacity: 0.6;}

@keyframes marquee{
  0%{transform: translateX(0%);}
  100% {transform: translateX(-100%);}
}
/* ===================== HERO ===================== */
.d3-hero{display:flex;align-items:center;justify-content:center;width:100%;min-height:100dvh;overflow:hidden;padding:220px 0 140px;background:
	radial-gradient(ellipse 70% 60% at 50% 30%, rgba(193,8,8,.22), rgba(2,0,0,0) 60%),
	radial-gradient(ellipse 80% 60% at 50% 100%, rgba(193,8,8,.12), rgba(2,0,0,0) 60%),
	#020000;}
.d3-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 60% 55% at 50% 40%,#000,transparent 75%);}
.d3-hero .inner{position:relative;z-index:1;overflow:visible;}
.d3-hero .eyebrow{margin-bottom:28px;color:#D90404;font-size:20px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;}
.d3-hero h1{max-width:920px;font-size:56px;font-weight:700;line-height:1.42;letter-spacing:-.02em;color:#fff;}
.d3-hero .desc{max-width:640px;margin-top:32px;font-size:20px;line-height:1.7;color:rgba(255,255,255,.65);}
.d3-hero .btn-wrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;margin-top:48px;}

/* 히어로 2단 레이아웃 (좌: 카피 / 우: 회전 3D 모델) */
.d3-hero-flex{display:flex;align-items:center;justify-content:space-between;gap:60px;max-width:1600px;margin:0 auto;text-align:left;}
.d3-hero-copy{flex:1;min-width:0;}
.d3-hero-badge{display:inline-flex;align-items:center;gap:12px;padding:10px 0;}
.d3-hero-badge .tag{color:color(display-p3 0.694 0.187 0.115);font-size:16px;font-weight:700;letter-spacing:.04em;}
.d3-hero-model{position:relative;flex:0 0 460px;width:460px;height:460px;}
.d3-hero-model canvas{position:absolute;inset:0;width:100%!important;height:100%!important;}

/* ===================== VALUE (Interactive / Real-time / Web-based / Customized) ===================== */
.d3-value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:64px;}
.d3-value-bx{padding:44px 32px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.04);}
.d3-value-bx .ico{display:flex;width:56px;height:56px;align-items:center;justify-content:center;margin-bottom:28px;border-radius:50%;background:rgba(193,8,8,.15);}
.d3-value-bx .ico svg{width:26px;height:26px;}
.d3-value-bx h3{font-size:22px;font-weight:700;color:#fff;}
.d3-value-bx p{margin-top:14px;font-size:15px;line-height:1.7;color:rgba(255,255,255,.6);}

/* ===================== SOLUTION (WHAT WE CREATE) ===================== */
.d3-sol-lst{display:flex;flex-direction:column;gap:160px;margin-top:100px;}
.d3-sol-row{display:flex;align-items:center;gap:80px;}
.d3-sol-row:nth-child(even){flex-direction:row-reverse;}
.d3-sol-media,
.d3-sol-copy{flex:1;min-width:0;}
.d3-sol-media{position:relative;aspect-ratio:4/3;overflow:hidden;}
.d3-sol-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.d3-sol-fade-gallery img{opacity:0;animation:d3-sol-fade 7.5s infinite;}
.d3-sol-fade-gallery img:nth-of-type(1){animation-delay:0s;transform:translate(.8%, 1.2%);}
.d3-sol-fade-gallery img:nth-of-type(2){animation-delay:-5s;}
.d3-sol-fade-gallery img:nth-of-type(3){animation-delay:-2.5s;}
@keyframes d3-sol-fade{
	0%, 23.33%{opacity:1;}
	33.33%, 90%{opacity:0;}
	100%{opacity:1;}
}
.d3-sol-num{position:absolute;top:20px;left:24px;z-index:2;font-size:15px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.75);text-shadow:0 2px 12px rgba(0,0,0,.6);}
.d3-sol-gallery{position:relative;display:grid;aspect-ratio:4/3;}
.d3-sol-gallery .main{position:relative;width:100%;height:100%;overflow:hidden;}

.d3-sol-gallery .sub-wrap{display:flex;flex-direction:column;gap:12px;}
.d3-sol-gallery .sub{position:relative;flex:1;overflow:hidden;border-radius:16px;border:1px solid rgba(255,255,255,.14);}
.d3-sol-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.d3-sol-copy .code{color:var(--red);font-size:16px;font-weight:700;letter-spacing:.06em;}
.d3-sol-copy h3{margin-top:14px;font-size:36px;font-weight:700;line-height:1.35;color:#fff;}
.d3-sol-copy .en{margin-top:8px;color:rgba(255,255,255,.4);font-size:14px;font-weight:600;letter-spacing:.05em;}
.d3-sol-copy .summary{margin-top:24px;font-size:18px;line-height:1.75;color:rgba(255,255,255,.65);}
.d3-sol-copy .feat-lst{margin-top:32px;border-top:1px solid rgba(255,255,255,.14);}
.d3-sol-copy .feat-lst li{position:relative;padding:14px 0 14px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;line-height:1.6;color:rgba(255,255,255,.75);}
.d3-sol-copy .feat-lst li::before{content:'';position:absolute;left:0;top:22px;width:6px;height:6px;border-radius:50%;background:var(--red);}
.d3-sol-copy .field{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:baseline;margin-top:28px;font-size:14px;color:rgba(255,255,255,.45);}
.d3-sol-copy .field strong{color:rgba(255,255,255,.75);font-weight:600;}
.d3-sol-copy .btn{margin-top:32px;padding:18px 32px;font-size:16px;}

/* ===================== WHY HUNDRED ===================== */
.d3-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:64px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:20px;overflow:hidden;}
.d3-why-bx{padding:48px;background:#0a0a0a;}
.d3-why-bx .num{display:inline-block;margin-bottom:20px;color:var(--red);font-size:15px;font-weight:700;letter-spacing:.08em;}
.d3-why-bx h3{font-size:24px;font-weight:700;color:#fff;}
.d3-why-bx p{margin-top:16px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.6);}

/* ===================== PROCESS ===================== */
.d3-process-lst{display:flex;align-items:stretch;gap:0;margin-top:64px;padding:60px 0;border-top:1px solid #333;border-bottom:1px solid #333;}
.d3-process-bx{flex:1;display:flex;flex-direction:column;align-items:center;gap:28px;padding:0 20px;text-align:center;}
.d3-process-bx + .d3-process-bx{border-left:1px dashed #333;}
.d3-process-bx .num{display:flex;width:64px;height:64px;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;font-size:20px;font-weight:700;color:#fff;}
.d3-process-bx .name{font-size:22px;font-weight:600;color:#fff;line-height:1.4;}
.d3-process-bx .desc{font-size:15px;line-height:1.6;color:rgba(255,255,255,.6);}

/* ===================== TECHNOLOGY ===================== */
.hl{color:var(--red);}
.d3-tech-sec{overflow:hidden;background:radial-gradient(ellipse 65% 55% at 82% 60%, rgba(193,8,8,.16), rgba(1,1,1,0) 65%);}
.d3-tech-flex{align-items:center;margin-top:80px;}
.d3-tech-copy{flex:1;min-width:0;}
.d3-tech-mark{display:flex;align-items:center;gap:16px;}
.d3-tech-mark .line{position:relative;width:2px;height:34px;background:rgba(255,255,255,.2);}
.d3-tech-mark .line::before{content:'';position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--red);transform:translateX(-50%);box-shadow:0 0 0 4px rgba(193,8,8,.2);}
.d3-tech-mark .tit{font-size:20px;font-weight:600;color:#fff;}
.d3-tech-lead{max-width:440px;margin-top:20px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.5);}
.d3-tech-stack { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 12px 24px; list-style: none; margin: 0; padding: 50px 0 0 0; }
.d3-tech-stack li{position:relative;padding:14px 0 14px 20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:15px;line-height:1.6;color:rgba(255,255,255,.75);}
.d3-tech-stack li::before{content:'';position:absolute;left:0;top:22px;width:6px;height:6px;border-radius:50%;background:var(--red);}
.d3-tech-stack li:last-child{border-bottom:1px solid rgba(255,255,255,.1);}
.d3-tech-pager{display:none;}
.d3-tech-visual{position:relative;flex:0 0 70%;}
.d3-tech-visual::before{content:'';position:absolute;inset:-14%;z-index:0;background:radial-gradient(ellipse 60% 60% at 55% 45%, rgba(193,8,8,.35), rgba(1,1,1,0) 68%);filter:blur(6px);}
.d3-tech-visual .frame{position:relative;z-index:1;aspect-ratio:3/4;overflow:hidden;border-radius:28px;border:1px solid rgba(255,255,255,.14);background:#0a0a0a;}
.d3-tech-visual img{width:100%;height:100%;object-fit:cover;}

/* ===================== PROJECT TYPE ===================== */
.d3-project-sec{min-height:100vh;overflow:hidden;background:var(--red)!important;}
.d3-project-sec .sec-tit .eyebrow{color:#fff;}
.d3-project-sec .sec-tit h2{color:#fff;}
.d3-project-swiper{padding-bottom:230px;cursor:default;}
.d3-project-card{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0a0a0a;border-left:2px solid #0a0a0a;border-right:2px solid #0a0a0a;}
.d3-project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease,opacity .4s ease;}
.d3-project-card:hover img{transform:scale(1.05);opacity:1;}
.d3-project-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.65) 100%);}
.d3-project-card .idx{position:relative;z-index:1;display:inline-block;margin:24px 0 0 24px;padding:5px 12px;border:1px solid rgba(255,255,255,.5);border-radius: 15px;font-size:13px;font-weight:600;letter-spacing:.08em;color:#fff;}
.d3-project-card .tit{position:absolute;left:24px;bottom:25px;z-index:1;max-width:82%;font-size:26px;font-weight:700;line-height:1.3;color:#fff;}
.d3-project-swiper .swiper-pagination{position:relative;display:flex;justify-content:center;gap:8px;margin-top:36px;}
.d3-project-swiper .swiper-pagination-bullet{width:7px;height:7px;margin:0;border-radius:50%;background:rgba(10,10,10,.3);opacity:1;cursor:pointer;}
.d3-project-swiper .swiper-pagination-bullet-active{background:#0a0a0a;}

/* ===================== CTA ===================== */
/* .d3-cta{padding-bottom:200px;}
.d3-cta-banner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:90px 100px;border-radius:24px;background:linear-gradient(135deg,#C10808,#7a0505);}
.d3-cta-banner .txt h3{font-size:44px;font-weight:700;line-height:1.35;}
.d3-cta-banner .txt p{margin-top:14px;font-size:18px;line-height:1.5;opacity:.85;}
.d3-cta-banner .btn-wrap{display:flex;flex-direction:column;gap:12px;flex-shrink:0;}
.d3-cta-banner .btn{min-width:260px;background:#fff;color:#C10808;border-color:#fff;}
.d3-cta-banner .btn:hover{background:rgba(255,255,255,.85);}
.d3-cta-banner .btn.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.6);}
.d3-cta-banner .btn.btn-line:hover{background:rgba(255,255,255,.12);}
.d3-cta-note{max-width:900px;margin:36px auto 0;text-align:center;font-size:14px;line-height:1.7;color:rgba(255,255,255,.4);}
.d3-cta-note strong{color:rgba(255,255,255,.7);font-weight:600;} */

/* cta */
.cta-sec{padding:200px 50px;}
.cta-banner{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:100px;border-radius:20px;background:var(--red);}
.cta-banner .txt h3{font-size:48px;font-weight:700;line-height:1.35;}
.cta-banner .txt p{margin-top:10px;font-size:20px;line-height:1.4;opacity:.9;}
.cta-btn{position:relative;display:flex;align-items:center;justify-content:center;width:238px;height:238px;flex-shrink:0;}
.cta-btn .label{position:relative;z-index:1;font-size:30px;font-weight:700;line-height:1.4;text-align:center;}
.cta-btn .ring{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);pointer-events:none;animation:cta-ring-spin 20s linear infinite;}
@keyframes cta-ring-spin{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(360deg);}
}

@media screen and (max-width:1500px){
	.d3-sec:not(.d3-hero){padding:150px 0;}
	.d3-sec.model {padding: 0;}
	.d3-sec.copy {padding: 150px 0 0 0;}
	.d3-hero h1{font-size:44px;}
	.d3-hero .desc{font-size:18px;}
	.sec-tit h2,.sec-tit h3{font-size:42px;}
	.sec-tit .sec-desc{font-size:19px;}
	.d3-sol-lst{gap:120px;margin-top:80px;}
	.d3-sol-row{gap:56px;}
	.d3-sol-copy h3{font-size:30px;}
	.d3-why-bx{padding:36px;}
	.d3-process-bx .name{font-size:19px;}
	.d3-project-swiper{padding-bottom:200px;cursor:default;}
}

@media screen and (max-width:1024px){
	.d3-sec:not(.d3-hero){padding:120px 0;}
	.d3-sec .inner{padding:0 30px;}
	.d3-sec .btn{padding:18px 28px;font-size:16px;}
	.sec-tit{margin-bottom:50px;}
	.sec-tit .eyebrow{font-size:18px;}
	.sec-tit h2,.sec-tit h3{font-size:34px;}
	.sec-tit .sec-desc{font-size:16px;}
	.d3-hero{padding:180px 0 120px;}
	.d3-hero .eyebrow{font-size:16px;}
	.d3-hero h1{font-size:32px;}
	.d3-hero .desc{font-size:16px;}
	.d3-hero-flex{flex-direction:column;gap:48px;text-align:center;}
	.d3-hero-copy{text-align:center;}
	.d3-hero .btn-wrap{justify-content:center;}
	.d3-hero-badge{margin-left:auto;margin-right:auto;}
	.d3-hero-model{flex:0 0 auto;width:320px;height:320px;margin:0 auto;}
	.d3-marquee{padding:20px 0;}
	.d3-marquee-track{font-size:15px;gap:36px;}
	.d3-value-grid{grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px;}
	.d3-value-bx{padding:32px 24px;}
	.d3-sol-lst{gap:90px;margin-top:50px;}
	.d3-sol-row,
	.d3-sol-row:nth-child(even){flex-direction:column;gap:32px;}
	.d3-sol-copy h3{font-size:26px;}
	.d3-sol-copy .summary{font-size:16px;}
	.d3-why-grid{grid-template-columns:1fr;margin-top:40px;}
	.d3-why-bx{padding:32px;}
	.d3-process-lst{flex-wrap:wrap;padding:40px 0;margin-top:40px;}
	.d3-process-bx{flex:0 0 33.333%;gap:20px;padding:20px 12px;}
	.d3-process-bx + .d3-process-bx{border-left:0;}
	.d3-process-bx:not(:nth-child(3n+1)){border-left:1px dashed #333;}
	.d3-process-bx .name{font-size:17px;}
	.d3-tech-flex{flex-direction:column-reverse;gap:40px;margin-top:50px;}
	.d3-tech-visual{flex:0 0 auto;width:100%;max-width:360px;}
	.d3-tech-lead{max-width:none;}
	.d3-tech-stack li{font-size:14px;padding:16px 0;}
	.d3-project-sec .sec-tit{margin-bottom:40px;}
	.d3-cta{padding-bottom:120px;}
	.d3-cta-banner{padding:56px;}
	.d3-cta-banner .txt h3{font-size:30px;}
}

@media screen and (max-width:768px){
	.d3-sec:not(.d3-hero){padding:80px 0;}
	.d3-sec.copy{padding:80px 0 0 0;}
	.d3-sec.model{padding:0;}
	.d3-sec .inner{padding:0 20px;}
	.d3-hero{padding:160px 0 100px;}
	.d3-hero h1{font-size:26px;}
	.d3-hero .btn-wrap{flex-direction:column;width:100%;max-width:300px;margin:36px auto 0;}
	.d3-hero .btn-wrap .btn{width:100%;}
	.d3-hero-model{display:none;}
	.d3-value-grid{grid-template-columns:1fr;}
	.d3-sol-media,
	.d3-sol-gallery{aspect-ratio:1/1;}
	.d3-sol-media{width:100%;min-height:calc(100vw - 40px);}
	.d3-sol-copy h3{font-size:22px;}
	.d3-process-bx{flex:0 0 50%;}
	.d3-process-bx:nth-child(3n+1){border-left:1px dashed #333;}
	.d3-process-bx:nth-child(odd){border-left:0!important;}
	.d3-project-card .tit{font-size:20px;bottom:70px;}
	.d3-project-card .plus{width:36px;height:36px;}
	.d3-project-card .idx{margin:16px 0 0 16px;}
	.d3-project-card .tit,
	.d3-project-card .plus{left:16px;}
	.d3-cta-banner{flex-direction:column;text-align:center;padding:44px 24px;}
	.d3-cta-banner .btn-wrap{width:100%;}
	.d3-cta-banner .txt h3{font-size:24px;}
	.cta-sec{padding-bottom:120px;}
	.cta-banner{flex-direction:column;gap:30px;padding:60px 40px;text-align:center;}
	.cta-banner .txt h3{font-size:34px;}
	.cta-btn{width:180px;height:180px;}
	.cta-btn .label{font-size:22px;}	
	.cta-banner .txt p {font-size: 14px;}	
	.d3-project-swiper{padding-bottom:100px;cursor:default;}
	.d3-tech-sec .inner{overflow:visible;}
	.d3-architecture-pin{position:relative;width:100%;overflow:hidden;}
	.d3-tech-visual{width:100%;max-width:none;overflow:visible;}
	.d3-tech-visual .architecture-wrapper{width:1180px;max-width:none;will-change:transform;}
	.d3-tech-visual .main-layers{grid-template-columns:170px 26px 170px 26px 170px 26px 170px 26px 170px 26px 170px;gap:0;}
	.d3-tech-visual .connector-col{display:flex;}
	.d3-tech-visual .connection-graphic-area{display:block;}
	.d3-tech-visual .bottom-bar{grid-template-columns:repeat(5,1fr);}
	.d3-tech-stack{display:grid;grid-template-rows:repeat(4,auto);grid-template-columns:none;grid-auto-columns:calc(100vw - 56px);grid-auto-flow:column;gap:0 20px;width:calc(100vw - 40px);padding:40px 0 16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-left:0;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
	.d3-tech-stack::-webkit-scrollbar{display:none;}
	.d3-tech-stack li{font-size:14px;padding:16px;}
	.d3-tech-stack li:nth-child(4n+1){scroll-snap-align:start;scroll-snap-stop:always;}
	.d3-tech-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;}
	.d3-tech-pager button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:background-color .2s,transform .2s;}
	.d3-tech-pager button.is-active{background:var(--red);transform:scale(1.15);}
}

@media screen and (max-width: 500px) {
	.contact {
		height: 100vw;
	}
	.cta-sec{padding:50px 20px;}
	.cta-banner{padding:40px 24px;gap:24px;}
	.cta-banner .txt h3{font-size:20px;}
	.cta-btn{width:150px;height:150px;}
	.cta-btn .label{font-size:18px;}	
	.d3-sol-num{display: none;}

}

@media (prefers-reduced-motion:reduce){
	.d3-sol-fade-gallery img{animation:none;}
	.d3-sol-fade-gallery img:first-of-type{opacity:1;}
}


/* Main Layers Grid (11 columns: 6 layers + 5 arrows) */
.main-layers { display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr; gap: 0; align-items: stretch; }

.layer-box { background-color: rgba(20, 20, 22, 0.4); border: 1px solid #2a2a2e; border-radius: 10px; padding: 16px 12px; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; }
.layer-title { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; text-align: center; margin-bottom: 16px; color: #c10908; text-transform: uppercase; }
.layer-content { display: flex; flex-direction: column; gap: 12px; flex-grow: 1; justify-content: center; }

.item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #1f1f23; }
.item:last-child { border-bottom: none; }
.item-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: #9ca3af; flex-shrink: 0; }
.item-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.item-text { display: flex; flex-direction: column; }
.item-title { font-size: 14px; font-weight: 500; color: #e5e7eb; line-height: 1.2; }
.item-desc { font-size: 12px; color: #9ca3af; margin-top: 5px; }

/* Horizontal Connectors Between Layers */
.connector-col { display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 18px; z-index: 2; }

/* Bottom Connection Area */
.connection-graphic-area { height: 40px; position: relative; width: 100%; }

/* Bottom Layer Bar */
.bottom-layer-container { display: flex; flex-direction: column; gap: 12px; }
.bottom-bar { background-color: rgba(20, 20, 22, 0.4); border: 1px solid #2a2a2e; border-radius: 10px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 16px; gap: 10px; z-index: 2; }
.bottom-item { display: flex; align-items: center; gap: 12px; padding: 0 10px; border-right: 1px solid #222226; }
.bottom-item:last-child { border-right: none; }
.bottom-icon { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; color: #9ca3af; flex-shrink: 0; }
.bottom-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-text-wrap { display: flex; flex-direction: column; }
.bottom-title { font-size: 14px; font-weight: 600; color: #e5e7eb; }
.bottom-desc { font-size: 12px; color: #9ca3af; margin-top: 5px;}

/* Responsive */
@media(max-width: 1200px) { .main-layers { grid-template-columns: repeat(3, 1fr); gap: 12px; } .connector-col { display: none; } .bottom-bar { grid-template-columns: repeat(2, 1fr); } .connection-graphic-area { display: none; } }

/* Interactive server GLB viewer */
.d3-server-viewer {
	position: relative;
	margin-top: 70px;
}
.d3-server-model {
	position: relative;
	width: 100%;
	height: clamp(480px, 55vw, 720px);
	overflow: hidden;
}
.d3-server-model canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
}
.d3-model-status {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	margin: 0;
	color: #888;
	font-size: 14px;
	letter-spacing: .04em;
	transform: translate(-50%, -50%);
}
.d3-model-controls {
	position: absolute;
	left: 22px;
	bottom: 20px;
	z-index: 3;
	display: flex;
	gap: 8px;
}
.d3-model-controls button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid rgba(94,200,255,.32);
	border-radius: 50%;
	background: rgba(4,16,25,.78);
	color: #d9f5ff;
	font-size: 19px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	backdrop-filter: blur(8px);
	transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.d3-model-controls button:hover,
.d3-model-controls button.is-active {
	border-color: #5ec8ff;
	background: #5ec8ff;
	color: #041019;
}
.d3-model-controls button:active { transform: scale(.94); }
.d3-model-controls button:disabled { opacity: .35; cursor: wait; }
.d3-model-controls button svg {
	display: block;
	width: 24px;
	height: 24px;
	margin: auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.d3-model-controls [data-control="temperature"] svg { fill: currentColor; stroke: none; }
.d3-model-controls .control-layer-toggle svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.d3-model-controls .control-close-icon { display: none; }
.d3-model-controls .control-layer-toggle.is-active .control-open-icon { display: none; }
.d3-model-controls .control-layer-toggle.is-active .control-close-icon { display: block; }
.d3-control-guide {
	position: absolute;
	left: 22px;
	bottom: 82px;
	z-index: 4;
	max-width: min(360px, calc(100% - 36px));
	padding: 14px 18px;
	border: 1px solid rgba(94,200,255,.2);
	border-radius: 15px;
	background: rgba(4,16,25,.86);
	color: #ccefff;
	font-size: 13px;
	line-height: 1.7;
	backdrop-filter: blur(10px);
}
.d3-temp-panel {
	position: absolute;
	right: 18px;
	bottom: 78px;
	z-index: 4;
	width: min(320px, calc(100% - 36px));
	padding: 18px;
	border: 1px solid rgba(94,200,255,.22);
	border-radius: 15px;
	background: rgba(4,16,25,.3);
	color: #d9f5ff;
	font-size: 13px;
	backdrop-filter: blur(12px);
}
.d3-temp-panel[hidden] { display: none; }
.d3-temp-panel-head,
.d3-temp-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.d3-temp-panel-head {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(94,200,255,.16);
}
.d3-temp-panel-head strong { font-size: 13px; letter-spacing: .04em; }
.d3-temp-readout { color: #5ec8ff; font-size: 20px; font-weight: 700; }
.d3-temp-row { margin-top: 11px; color: #a9c7d4; }
.d3-temp-row button {
	width: auto;
	height: auto;
	padding: 6px 10px;
	border: 1px solid rgba(94,200,255,.26);
	border-radius: 4px;
	background: rgba(94,200,255,.1);
	color: #d9f5ff;
	font-size: 12px;
	cursor: pointer;
}
.d3-temp-row input[type="range"] { width: 150px; accent-color: #5ec8ff; }
.d3-temp-legend {
	display: flex;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg, #10108c, #198ce6, #26cc4d, #f2d91a, #f2730d, #d91a1a) 1;
	color: #8ba7b3;
	font-size: 10px;
}

@media screen and (max-width:768px) {
	.d3-server-viewer { margin-top: 44px; }
	.d3-server-model { height: min(110vw, 520px); min-height: 360px; }
	.d3-model-controls { left: 12px; bottom: 12px; gap: 6px; }
	.d3-model-controls button { width: 40px; height: 40px; font-size: 17px; }
	.d3-control-guide { left: 12px; bottom: 62px; max-width: calc(100% - 24px); font-size: 11px; }
	.d3-temp-panel { right: 12px; bottom: 62px; width: calc(100% - 24px); }
}