:root{--paper:#fcfcfb;--ink:#1a1a1c;--body:#44454b;--muted:#6e6f77;--line:#e4e4e0;--accent:#2a4a93;--soft:#f3f5fa;--max:980px}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:Pretendard,"Noto Sans KR","Segoe UI",sans-serif;font-size:1rem;line-height:1.7}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #6f8bd3;outline-offset:4px}.site-header{position:sticky;top:0;z-index:20;padding:10px 16px;background:#fcfcfbeb;backdrop-filter:blur(14px)}.header-inner{width:min(100%,1060px);min-height:52px;margin:auto;padding:7px 10px 7px 14px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 24px #20233a0b}.brand{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:800;white-space:nowrap}.brand-mark{display:block;width:30px;height:30px;border-radius:9px;background:var(--accent);object-fit:cover}.header-inner nav{display:flex;align-items:center;gap:4px}.header-inner nav a{min-height:36px;padding:7px 11px;border-radius:10px;color:#55565d;font-size:.87rem;font-weight:700}.header-inner nav a:hover{background:var(--soft);color:var(--ink)}main{width:min(calc(100% - 40px),var(--max));margin:auto}.intro{padding:72px 0 58px}.intro h1{margin:0 0 18px;font-size:clamp(2rem, 4.7vw, 3.75rem);font-weight:800;line-height:1.16;letter-spacing:-.045em}.intro p{max-width:650px;margin:0;color:var(--body);font-size:1.02rem}.facts div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.facts dt{color:var(--muted);font-size:.78rem}.facts dd{margin:0;font-size:.85rem;font-weight:700}.project{padding:58px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(280px,0.72fr) minmax(0,1.28fr);gap:56px;align-items:center}.project.cubestow{grid-template-columns:minmax(0,1.15fr) minmax(280px,0.85fr)}.project-copy{min-width:0}.product-type{margin:0 0 8px;color:var(--accent);font-size:.7rem;font-weight:900;letter-spacing:.12em}.project h2,.section-heading h2{margin:0 0 14px;font-size:1.45rem;line-height:1.3}.project-copy>p:not(.product-type){margin:0 0 18px;color:var(--body);font-size:.94rem}.facts{margin:0 0 22px}.facts div{grid-template-columns:84px 1fr;padding:7px 0}.project-image{display:block;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:#f0f2f6}.project-image img{display:block;width:100%;height:auto}.text-link{display:inline-block;padding-bottom:2px;border-bottom:1px solid var(--accent);color:var(--accent);font-weight:800}.plain-list{margin:0 0 20px;padding-left:20px;color:var(--body);font-size:.9rem}.plain-list li{margin:4px 0}.work-list{padding:58px 0;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.section-heading h2{margin:0}.section-heading p{margin:0;color:var(--muted);font-size:.88rem}.rows{border-top:1px solid var(--ink)}.work-row{min-height:82px;display:grid;grid-template-columns:180px 1fr auto;gap:24px;align-items:center;border-bottom:1px solid var(--line)}.work-row span{font-weight:850}.work-row strong{font-size:.9rem;font-weight:500;color:var(--body)}.work-row em{color:var(--accent);font-size:.82rem;font-style:normal;font-weight:800}.work-row:hover strong{color:var(--ink)}.note{padding:38px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line)}.note p{margin:0;color:var(--body)}.note a{color:var(--accent);font-weight:800}footer{width:min(calc(100% - 40px),var(--max));margin:auto;padding:24px 0 38px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.08em}footer a:hover{color:var(--ink)}@media (max-width:760px){.site-header{padding:8px}.header-inner{overflow-x:auto}.header-inner nav{flex:none}.intro{padding:52px 0 42px}.project,.project.cubestow{grid-template-columns:1fr;gap:30px}.project.cubestow .project-image{order:2}.project.cubestow .project-copy{order:1}.work-row{grid-template-columns:1fr auto;gap:6px 18px;padding:16px 0}.work-row strong{grid-column:1/-1}.work-row em{grid-column:2;grid-row:1}.section-heading{display:block}.section-heading p{margin-top:5px}.note{align-items:flex-start;flex-direction:column;gap:10px}}@media (max-width:460px){footer,main{width:calc(100% - 28px)}.brand span:last-child{display:none}.header-inner nav a{padding-inline:9px}.intro h1{font-size:2.05rem}.project{padding:44px 0}.work-row{grid-template-columns:1fr}.work-row em{grid-column:1;grid-row:auto}.note{padding:30px 0}footer{flex-direction:column;gap:5px}}
.stat-row{min-height:56px;display:grid;grid-template-columns:1fr 96px 96px;gap:16px;align-items:center;border-bottom:1px solid var(--line)}.stat-row span{font-weight:850}.stat-row b{text-align:right;font-variant-numeric:tabular-nums;font-weight:800}.stat-head{min-height:40px;color:var(--muted);font-size:.82rem}.stat-head span,.stat-head b{font-weight:700}.stat-note{margin:14px 0 0;color:var(--muted);font-size:.8rem;line-height:1.6}.stat-note a{color:var(--accent)}@media (max-width:460px){.stat-row{grid-template-columns:1fr 64px 64px;gap:10px}}
.skin-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px}.skin-grid img{border-radius:5px;aspect-ratio:640/411;object-fit:cover}
.project.media-first:not(.cubestow){grid-template-columns:minmax(0,1.15fr) minmax(280px,0.85fr)}
@media (max-width:760px){.project.media-first:not(.cubestow){grid-template-columns:1fr;gap:30px}.project.media-first:not(.cubestow) .project-image{order:2}.project.media-first:not(.cubestow) .project-copy{order:1}}

/* Shared navigation and accessibility */
a{touch-action:manipulation}.skip-link{position:fixed;top:8px;left:8px;z-index:100;padding:10px 14px;border-radius:8px;background:var(--ink);color:#fff;font-weight:800;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}[id]{scroll-margin-top:88px}.header-inner nav a[aria-current="page"]{background:var(--soft);color:var(--accent)}

/* How I make page */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}.tool-grid article{padding:24px;background:var(--paper)}.tool-grid h3{margin:0 0 9px;font-size:1rem}.tool-grid p{margin:0;color:var(--body);font-size:.9rem}
@media (max-width:760px){.tool-grid{grid-template-columns:1fr}}
@media (max-width:460px){.brand span:last-child{display:inline}.brand{gap:7px;font-size:.76rem}.brand-mark{width:27px;height:27px}.header-inner{padding-inline:8px;gap:8px}.header-inner nav a{padding-inline:6px;font-size:.74rem}}