: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; }

	/* header removed */

	/* ═══ HERO ═══ */
	.hero{background:var(--white);padding:60px 0 52px;border-bottom:1px solid var(--border)}
	.hero-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;background:var(--blueS);border-radius:100px;font-size:12px;font-weight:600;color:var(--blue);margin-bottom:20px}
	.hero h1{font-family:'Sora','Noto Sans KR',sans-serif;font-size:clamp(28px,4.5vw,44px);font-weight:800;line-height:1.2;letter-spacing:-1.5px;margin-bottom:14px}
	.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--blue),#3b82f6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
	.hero-p{font-size:clamp(14px,1.2vw,17px);color:var(--ink3);max-width:600px;line-height:1.8}

	/* ═══ CATEGORY TABS ═══ */
	.cat-sec{padding:32px 0 0}
	.cat-bar{display:flex;gap:8px;margin-bottom:28px;position:sticky;top:0;z-index:100;background:var(--bg);padding:12px 0;overflow-x:auto;scrollbar-width:none}.cat-bar::-webkit-scrollbar{display:none}
	.cb{display:flex;align-items:center;gap:8px;padding:12px 20px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);font-size:14px;font-weight:500;color:var(--ink3);transition:.25s;white-space:nowrap}
	.cb:hover{border-color:var(--ink5)}
	.cb .ci{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px}
	.cb .cc{padding:2px 8px;border-radius:100px;font-size:11px;font-weight:700;background:var(--bg2);color:var(--ink4)}
	.cb[data-c="hdd"] .ci{background:var(--blueS)}.cb[data-c="nas"] .ci{background:var(--greenS)}.cb[data-c="server"] .ci{background:var(--purpleS)}.cb[data-c="etc"] .ci{background:var(--amberS)}
	.cb.on{font-weight:700;box-shadow:var(--s2)}
	.cb.on[data-c="hdd"]{border-color:var(--blue);background:var(--blueS);color:var(--blue)}.cb.on[data-c="hdd"] .cc{background:rgba(37,99,235,.13);color:var(--blue)}
	.cb.on[data-c="nas"]{border-color:var(--green);background:var(--greenS);color:var(--green)}.cb.on[data-c="nas"] .cc{background:rgba(5,150,105,.13);color:var(--green)}
	.cb.on[data-c="server"]{border-color:var(--purple);background:var(--purpleS);color:var(--purple)}.cb.on[data-c="server"] .cc{background:rgba(124,58,237,.13);color:var(--purple)}
	.cb.on[data-c="etc"]{border-color:var(--amber);background:var(--amberS);color:var(--amber)}.cb.on[data-c="etc"] .cc{background:rgba(217,119,6,.13);color:var(--amber)}

	/* ═══ CARD — 16:9 IMAGE ═══ */
	.feed{display:flex;flex-direction:column;gap:20px}
	.card{display:grid;grid-template-columns:420px 1fr;background:var(--white);border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;transition:.35s var(--ease);opacity:0;transform:translateY(16px)}
	.card.show{opacity:1;transform:translateY(0)}.card:hover{border-color:var(--ink5);box-shadow:var(--s3);transform:translateY(-2px)}.card.show:hover{transform:translateY(-2px)}
	@media(max-width:900px){.card{grid-template-columns:1fr}}

	/* 16:9 aspect ratio */
	.card-img{position:relative;overflow:hidden;background:var(--bg2);aspect-ratio:16/9}
	.card-img picture,.card-img img{width:100%;height:100%;object-fit:cover}
	.card-img .ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
	.ph-ic{width:52px;height:52px;border-radius:16px;background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;font-size:24px}
	.ph-tx{font-size:12px;color:var(--ink4);font-weight:500}
	.card-img .cl{position:absolute;top:14px;left:14px;padding:5px 13px;border-radius:100px;font-size:11px;font-weight:700;z-index:2;backdrop-filter:blur(8px)}
	.cl.c-hdd{background:rgba(37,99,235,.88);color:#fff}.cl.c-nas{background:rgba(5,150,105,.88);color:#fff}.cl.c-server{background:rgba(124,58,237,.88);color:#fff}.cl.c-etc{background:rgba(217,119,6,.88);color:#fff}
	.card-bd{padding:28px 32px;display:flex;flex-direction:column}
	@media(max-width:600px){.card-bd{padding:20px}}
	.card-bd h3{font-size:clamp(16px,1.4vw,19px);font-weight:800;line-height:1.35;margin-bottom:8px}
	.chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
	.chip{padding:3px 11px;background:var(--bg2);border-radius:100px;font-size:12px;font-weight:500;color:var(--ink3)}
	.card-ex{font-size:14px;color:var(--ink3);line-height:1.75;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
	.card-div{height:1px;background:var(--border);margin-bottom:14px}
	.card-met{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
	.cm{text-align:center;padding:10px 4px;background:var(--bg);border-radius:var(--rs)}
	.cm .v{font-family:'Sora',sans-serif;font-size:clamp(15px,1.3vw,18px);font-weight:700;line-height:1.2}
	.cm .v.vg{color:var(--green)}.cm .v.vb{color:var(--blue)}.cm .v.vk{color:var(--ink)}
	.cm .l{font-size:10px;color:var(--ink4);font-weight:500;margin-top:1px}
	.card-ft{margin-top:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
	.card-ft .hint{font-size:12px;color:var(--ink4)}
	.card-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 22px;border-radius:100px;font-size:13px;font-weight:600;background:var(--ink);color:#fff;transition:.3s}
	.card:hover .card-btn{background:var(--blue)}

	/* PAGINATION */
	.pagi{display:flex;align-items:center;justify-content:center;gap:6px;padding:36px 0 50px}
	.pg{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--ink3);border:1.5px solid var(--border);background:var(--white);transition:.2s}
	.pg:hover{border-color:var(--ink5)}.pg.on{background:var(--blue);border-color:var(--blue);color:#fff}.pg.dis{opacity:.3;pointer-events:none}

	/* ═══ DETAIL PAGE ═══ */
	.page{display:none}.page.active{display:block}
	.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 Gallery — inside left column, 16:9 */
	.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}
	.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}

	/* 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}
	.review-empty{font-size:13px;color:var(--ink4);font-style:italic;padding-left:12px}

	/* 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}

	/* Quote */
	.qt{background:var(--bg);border-radius:var(--r);padding:24px 28px;margin-bottom:32px;position:relative}
	.qt::before{content:'"';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)}
	.wf-bar .seg .seg-label{position:absolute;bottom:-22px;font-size:9.5px;font-weight:600;color:var(--ink3);white-space:nowrap}

	/* 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}}

	/* 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}
	.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 .dir svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
	.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)}
	.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}.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)}.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}
	.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}

	/* CTA */
	.cta-sec{padding:0 0 70px}
	.cta-box{background:var(--white);border:1.5px solid var(--border);border-radius:24px;padding:clamp(36px,5vw,60px);text-align:center}
	.cta-box h2{font-family:'Sora','Noto Sans KR',sans-serif;font-size:clamp(22px,2.5vw,28px);font-weight:800;margin-bottom:8px}
	.cta-box p{font-size:15px;color:var(--ink3);margin-bottom:28px}
	.cta-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
	.cta-p{padding:13px 28px;background:var(--blue);color:#fff;border-radius:12px;font-size:15px;font-weight:700;transition:.3s}.cta-p:hover{background:#1d4ed8}
	.cta-s{padding:13px 28px;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;font-size:15px;font-weight:600;color:var(--ink)}

	/* ═══ MOBILE CAT BAR — 좌우 스크롤 인지 강화 ═══ */
	@media (max-width: 640px) {
		.cat-bar { gap: 6px; padding: 10px 0; padding-right: 36px; scroll-padding-inline: 12px; -webkit-overflow-scrolling: touch; }
		.cat-bar::after { content: ""; flex: 0 0 12px; }
		.cb { padding: 8px 12px; font-size: 12px; gap: 6px; border-radius: 10px; flex-shrink: 0; }
		.cb .ci { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
		.cb .cc { padding: 1px 6px; font-size: 10px; }
	}
	@media (max-width: 380px) {
		.cb { padding: 7px 10px; font-size: 11.5px; }
		.cb .ci { width: 24px; height: 24px; font-size: 13px; }
	}

	@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}