:root{--W:1440px;--P:60px;--white:#fff;--bg:#f6f8fb;--bg2:#eef1f7;--ink:#0f172a;--ink2:#334155;--ink3:#64748b;--ink4:#94a3b8;--ink5:#cbd5e1;--blue:#2563eb;--blueS:#eff6ff;--green:#059669;--greenS:#ecfdf5;--purple:#7c3aed;--purpleS:#f5f3ff;--amber:#d97706;--amberS:#fffbeb;--cyan:#0891b2;--cyanS:#ecfeff;--border:#e2e8f0;--borderL:#f1f5f9;--s2:0 4px 16px rgba(15,23,42,.06);--s3:0 12px 40px rgba(15,23,42,.08);--r:16px;--rs:10px;--ease:cubic-bezier(.4,0,.2,1)}
	main{background:var(--bg);}
	img{max-width:100%;display:block}button{font-family:inherit;cursor:pointer;border:none;background:none}a{text-decoration:none;color:inherit}
	.wrap{width:100%;max-width:var(--W);margin:0 auto;padding:0 var(--P)}
	@media(max-width:768px){:root{--P:20px}}
	#bread { background: #fff; }

	/* ═══ BREADCRUMB ═══ */
	.bc{padding:18px 0;display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink4);flex-wrap:wrap}
	.bc a{color:var(--ink3);font-weight:500}.bc a:hover{color:var(--blue)}
	.bc .sep{color:var(--ink5)}.bc .cur{color:var(--ink);font-weight:600}

	/* ═══ DETAIL TWO COLUMN ═══ */
	.dt-grid{display:grid;grid-template-columns:1fr 360px;gap:44px;padding-bottom:60px}
	@media(max-width:1000px){.dt-grid{grid-template-columns:1fr;gap:28px}}

	.dt-badge{display:inline-flex;padding:5px 14px;border-radius:100px;font-size:11.5px;font-weight:700;margin-bottom:12px}
	.dt-badge.hdd{background:var(--blueS);color:var(--blue)}.dt-badge.nas{background:var(--greenS);color:var(--green)}.dt-badge.server{background:var(--purpleS);color:var(--purple)}.dt-badge.etc{background:var(--amberS);color:var(--amber)}
	.dt-left h1{font-family:'Sora','Noto Sans KR',sans-serif;font-size:clamp(22px,2.2vw,28px);font-weight:800;line-height:1.3;margin-bottom:5px}
	.dt-sub{font-size:14px;color:var(--ink3);margin-bottom:28px}
	.sec-t{display:flex;align-items:center;gap:9px;margin:32px 0 16px}.sec-t .sd{width:7px;height:7px;border-radius:50%}
	.sd.bl{background:var(--blue)}.sd.gr{background:var(--green)}.sd.pu{background:var(--purple)}.sd.cy{background:var(--cyan)}
	.sec-t h2{font-size:16px;font-weight:700}

	/* ═══ GALLERY ═══ */
	.dt-gal{display:grid;grid-template-columns:1fr 110px;gap:8px;margin-bottom:24px}
	@media(max-width:768px){.dt-gal{grid-template-columns:1fr;gap:6px}}
	.gal-main{position:relative;border-radius:12px;overflow:hidden;background:var(--bg2);aspect-ratio:16/9;cursor:pointer}
	.gal-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
	.gal-main .ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:absolute;inset:0}
	.gal-main .ph .ph-ic{width:44px;height:44px;border-radius:12px;background:var(--white);box-shadow:0 2px 6px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;font-size:20px}
	.gal-main .ph .ph-tx{font-size:11px;color:var(--ink4)}
	.gal-counter{position:absolute;bottom:8px;right:8px;padding:3px 10px;border-radius:100px;background:rgba(0,0,0,.4);color:#fff;font-size:10px;font-weight:600;z-index:3}
	.gal-strip{display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:none;scrollbar-width:thin;scrollbar-color:var(--ink5) transparent;padding-right:2px}
	@media(max-width:768px){.gal-strip{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-right:0;padding-bottom:4px}}
	.gal-strip::-webkit-scrollbar{width:3px}.gal-strip::-webkit-scrollbar-thumb{background:var(--ink5);border-radius:3px}
	.gal-th{width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--bg2);flex-shrink:0;cursor:pointer;border:2px solid transparent;transition:.2s;opacity:.5;position:relative}
	@media(max-width:768px){.gal-th{width:90px;aspect-ratio:16/9}}
	.gal-th.on{border-color:var(--blue);opacity:1;box-shadow:0 0 0 1.5px rgba(37,99,235,.12)}
	.gal-th:hover{opacity:.85}
	.gal-th img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
	.gal-th .tp{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--ink4);font-weight:600;text-align:center;padding:3px;line-height:1.2}

	/* ═══ QUOTE ═══ */
	.qt{background:var(--bg);border-radius:var(--r);padding:24px 28px;margin-bottom:32px;position:relative}
	.qt::before{content:'\201C';position:absolute;top:6px;left:20px;font-size:48px;color:var(--blue);opacity:.1;line-height:1}
	.qt-who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--blue);margin-bottom:8px}
	.qt p{font-size:14px;color:var(--ink2);line-height:1.85}

	/* ═══ DETAIL TABLE ═══ */
	.dtb{width:100%;border-collapse:collapse;margin-bottom:32px}
	.dtb tr{border-bottom:1px solid var(--border)}.dtb tr:last-child{border-bottom:none}
	.dtb th{text-align:left;padding:13px 16px;font-size:12px;font-weight:600;color:var(--ink4);width:140px;background:var(--bg);vertical-align:top}
	.dtb td{padding:13px 16px;font-size:13.5px;color:var(--ink2);line-height:1.7}

	/* ═══ WORKFLOW TIMELINE ═══ */
	.wf{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:32px;margin-bottom:32px;overflow:hidden}
	.wf-title{font-size:16px;font-weight:800;margin-bottom:4px;display:flex;align-items:center;gap:8px}
	.wf-total{font-size:13px;color:var(--ink3);margin-bottom:24px}
	.wf-total strong{color:var(--blue);font-family:'Sora',sans-serif;font-size:20px;font-weight:700}

	/* Horizontal bar */
	.wf-bar{display:flex;height:44px;border-radius:12px;overflow:hidden;margin-bottom:24px;background:var(--bg2);position:relative}
	.wf-bar .seg{display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;color:#fff;min-width:24px;position:relative;transition:width .8s var(--ease)}

	/* Phase colors */
	.ph-1{background:#3b82f6}.ph-2{background:#8b5cf6}.ph-3{background:#06b6d4}.ph-4{background:#f59e0b}.ph-5{background:#10b981}

	/* Phase cards */
	.wf-phases{display:flex;flex-direction:column;gap:0}
	.wf-phase{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--borderL);position:relative}
	.wf-phase:last-child{border-bottom:none}
	.wf-phase.skipped{opacity:.35}
	.wf-phase.skipped::after{content:'해당 없음';position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:var(--ink4);background:var(--bg2);padding:3px 12px;border-radius:100px}

	.wf-num{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
	.wf-num.n1{background:#3b82f6}.wf-num.n2{background:#8b5cf6}.wf-num.n3{background:#06b6d4}.wf-num.n4{background:#f59e0b}.wf-num.n5{background:#10b981}

	.wf-body{flex:1;min-width:0}
	.wf-body .wf-name{font-size:14px;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
	.wf-body .wf-name .wf-hrs{font-family:'Sora',sans-serif;font-size:12px;font-weight:600;padding:2px 10px;border-radius:100px;background:var(--bg2);color:var(--ink3)}
	.wf-body .wf-desc{font-size:13px;color:var(--ink3);line-height:1.7}
	.wf-body .wf-detail{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
	.wf-tag{padding:3px 12px;border-radius:100px;font-size:11.5px;font-weight:600}
	.wf-tag.t-blue{background:var(--blueS);color:var(--blue)}
	.wf-tag.t-purple{background:var(--purpleS);color:var(--purple)}
	.wf-tag.t-cyan{background:var(--cyanS);color:var(--cyan)}
	.wf-tag.t-amber{background:var(--amberS);color:var(--amber)}
	.wf-tag.t-green{background:var(--greenS);color:var(--green)}

	/* Phase image */
	.wf-phase .wf-img{width:140px;height:90px;border-radius:var(--rs);background:var(--bg2);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
	.wf-phase .wf-img img{width:100%;height:100%;object-fit:cover}
	@media(max-width:768px){.wf-phase .wf-img{display:none}}

	/* ═══ CUSTOMER REVIEW ═══ */
	.review-box{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:28px;margin-bottom:32px;position:relative;overflow:hidden}
	.review-box::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(to bottom,var(--green),var(--blue));border-radius:2px}
	.review-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
	.review-header .rv-icon{width:36px;height:36px;border-radius:50%;background:var(--greenS);display:flex;align-items:center;justify-content:center;font-size:16px}
	.review-header .rv-label{font-size:13px;font-weight:700;color:var(--green)}
	.review-header .rv-stars{display:flex;gap:2px;margin-left:auto}
	.review-header .rv-stars .star{color:#fbbf24;font-size:14px}
	.review-text{font-size:14px;color:var(--ink2);line-height:1.85;padding-left:12px}
	.review-author{margin-top:12px;padding-left:12px;font-size:12px;color:var(--ink4);font-weight:500}

	/* ═══ PREV/NEXT ═══ */
	.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:40px 0 20px;border-top:1px solid var(--border);padding-top:28px}
	@media(max-width:600px){.pn{grid-template-columns:1fr;gap:10px}}
	.pn-card{padding:20px 24px;border:1.5px solid var(--border);border-radius:var(--r);cursor:pointer;transition:.25s;display:flex;flex-direction:column;gap:4px;text-decoration:none}
	.pn-card:hover{border-color:var(--blue);background:var(--blueS);box-shadow:var(--s2)}
	.pn-card .dir{font-size:11px;font-weight:600;color:var(--ink4);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px}
	.pn-card .ttl{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4}
	.pn-card .meta{font-size:12px;color:var(--ink4)}
	.pn-card.next{text-align:right;align-items:flex-end}
	.pn-card.empty{opacity:0;pointer-events:none}
	.pn-back{display:flex;justify-content:center;padding-bottom:20px}
	.pn-back-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 36px;border-radius:100px;font-size:14px;font-weight:700;background:var(--ink);color:#fff;transition:.3s var(--ease);text-decoration:none}
	.pn-back-btn:hover{background:var(--blue);box-shadow:0 4px 20px rgba(37,99,235,.25)}

	/* ═══ SIDEBAR ═══ */
	.side-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px;margin-bottom:18px}
	@media(min-width:1001px){.dt-side .side-card:first-child{position:sticky;top:20px}}
	.side-card h3{font-size:14px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:7px}
	.side-card h3 span{font-size:16px}
	.res-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}
	.rg{text-align:center;padding:16px 10px;border-radius:var(--rs)}
	.rg:nth-child(1){background:var(--greenS)}.rg:nth-child(2){background:var(--blueS)}.rg:nth-child(3){background:var(--bg)}.rg:nth-child(4){background:var(--purpleS)}
	.rg .rv{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;line-height:1.1}
	.rg:nth-child(1) .rv{color:var(--green)}.rg:nth-child(2) .rv{color:var(--blue)}.rg:nth-child(3) .rv{color:var(--ink)}.rg:nth-child(4) .rv{color:var(--purple)}
	.rg .rl{font-size:10.5px;color:var(--ink4);font-weight:500;margin-top:2px}
	.sp-list{display:flex;flex-direction:column}
	.sp-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
	.sp-row:last-child{border-bottom:none}
	.sp-row .sk{font-size:12.5px;color:var(--ink4);font-weight:500}.sp-row .sv{font-size:13px;font-weight:600;text-align:right;max-width:180px}
	.side-cta{padding:12px 0;display:flex;flex-direction:column;gap:8px;margin-top:8px}
	.side-cta .bp{padding:12px;background:var(--blue);color:#fff;border-radius:10px;font-size:14px;font-weight:700;text-align:center;transition:.2s;text-decoration:none;display:block}.side-cta .bp:hover{background:#1d4ed8}
	.side-cta .bs{padding:12px;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-weight:600;text-align:center;color:var(--ink);text-decoration:none;display:block}.side-cta .bs:hover{border-color:var(--ink5)}
	.related{margin-top:16px}.related h4{font-size:13px;font-weight:700;margin-bottom:10px;color:var(--ink3)}
	.rel-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:.15s;text-decoration:none;color:inherit}
	.rel-item:last-child{border-bottom:none}.rel-item:hover{opacity:.65}
	.rel-item .ri-ic{width:40px;height:40px;border-radius:9px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
	.rel-item .ri-t{font-size:12px;font-weight:600;line-height:1.4}
	.rel-item .ri-s{font-size:10.5px;color:var(--ink4);margin-top:1px}

	/* ═══ DETAIL CONTENT ═══ */
	.dt-content{font-size:14px;color:var(--ink2);line-height:1.85;margin-bottom:32px}
	.dt-content p{margin-bottom:12px}
	.dt-content img{border-radius:var(--rs);margin:12px 0}
	.dt-content ul,.dt-content ol{padding-left:20px;margin-bottom:12px}
	.dt-content li{margin-bottom:6px}

	/* ═══ LIGHTBOX ═══ */
	.lb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;cursor:zoom-out}
	.lb-overlay.active{display:flex}
	.lb-overlay img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:8px;box-shadow:0 0 40px rgba(0,0,0,.4)}
	.lb-close{position:absolute;top:20px;right:24px;color:#fff;font-size:28px;font-weight:700;cursor:pointer;background:rgba(0,0,0,.4);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none}

	/* ═══ MOBILE BREADCRUMB — 2줄 줄바꿈 깨짐 보강 ═══ */
	@media (max-width: 640px) {
		#bread { padding: 10px 0 8px; }
		#bread .container { padding: 0 16px; }
		#bread .container ol {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 4px 6px;
			margin: 0;
			padding: 0;
			list-style: none;
			font-size: 12px;
			line-height: 1.55;
			color: #64748b;
		}
		#bread .container ol li {
			display: inline-flex;
			align-items: center;
			max-width: 100%;
			white-space: normal;
			word-break: keep-all;
			overflow-wrap: anywhere;
		}
		#bread .container ol li a { color: #64748b; }
		#bread .container ol li:last-child {
			flex: 1 1 100%;
			margin-top: 2px;
			color: #0f172a;
			font-weight: 600;
		}
		#bread .container ol li:last-child span { display: inline; word-break: keep-all; overflow-wrap: anywhere; }
		.bc {
			padding: 14px 0 6px;
			gap: 4px 6px;
			font-size: 12px;
			line-height: 1.55;
		}
		.bc .cur {
			flex: 1 1 100%;
			margin-top: 2px;
			word-break: keep-all;
			overflow-wrap: anywhere;
			white-space: normal;
		}
	}

	@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
	.anim{animation:fadeUp .45s var(--ease) both}.anim-d1{animation-delay:.08s}.anim-d2{animation-delay:.16s}.anim-d3{animation-delay:.24s}