/* NINEWORKS — sitewide stability reset / 2026-08-17
   Final layer to remove legacy overlap/shrink regressions across all public pages. */

:root{--container:1440px;--header-h:104px;--header-height:104px;--nw-pad:24px;--stable-line:#e7e7e4;--stable-soft:#f6f6f4}

html,body{max-width:100%;overflow-x:hidden}
body{font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}

/* --------------------------------------------------------------------------
   1) REMOVE THE AUTO DOCUMENT WRAPPER AS A LAYOUT DEPENDENCY
   The sidebar experiment caused nested grid / intrinsic-width collisions.
   Keep any generated markup harmless, hide the sidebar, and let page content
   use the same 1440px shell as the rest of the website.
   -------------------------------------------------------------------------- */
html body.nw-doc-page main,
html body.nw-doc-page .nw-doc-layout,
html body.nw-doc-page .nw-doc-content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding-left:0!important;
  padding-right:0!important;
}
html body.nw-doc-page .nw-doc-layout{display:block!important}
html body.nw-doc-page .nw-local-sidebar{display:none!important}
html body.nw-doc-page .nw-doc-content{display:block!important;overflow:visible!important}
html body.nw-doc-page .nw-doc-content>*{min-width:0!important}

/* Common container line */
html body:not(.portfolio-detail-page) .container,
html body.nw-doc-page .nw-doc-content>.container,
html body.nw-doc-page .nw-doc-content>section.container{
  width:min(calc(100% - 48px),1440px)!important;
  max-width:1440px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* Restore hidden category bars after sidebar removal */
html body.nw-doc-page.page-portfolio .category-nav.portfolio-filter,
html body.nw-doc-page.page-magazine .category-nav.magazine-filter{display:flex!important}

/* --------------------------------------------------------------------------
   2) HERO / PAGE HEADERS — no intrinsic shrinking, no overlapping columns
   -------------------------------------------------------------------------- */
html body .page-hero,
html body .portfolio-hero,
html body .magazine-hero{
  width:min(calc(100% - 48px),1440px)!important;
  max-width:1440px!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
html body .portfolio-hero,
html body .magazine-hero{
  display:grid!important;
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr)!important;
  gap:clamp(48px,6vw,96px)!important;
  align-items:end!important;
  padding-top:clamp(110px,9vw,150px)!important;
  padding-bottom:72px!important;
}
html body .portfolio-hero>div,
html body .portfolio-hero__copy,
html body .magazine-hero>div,
html body .magazine-hero__copy{
  grid-column:auto!important;
  position:static!important;
  float:none!important;
  width:auto!important;
  min-width:0!important;
  max-width:680px!important;
  margin:0!important;
  transform:none!important;
}
html body .portfolio-hero__copy,
html body .magazine-hero__copy{font-size:17px!important;line-height:1.7!important}

/* --------------------------------------------------------------------------
   3) CATEGORY FILTERS — simple horizontal rail, never sticky/overlaying copy
   -------------------------------------------------------------------------- */
html body .category-nav.portfolio-filter,
html body .category-nav.magazine-filter,
html body.nw-doc-page.page-portfolio .category-nav.portfolio-filter,
html body.nw-doc-page.page-magazine .category-nav.magazine-filter{
  position:relative!important;
  top:auto!important;
  z-index:2!important;
  display:flex!important;
  width:min(calc(100% - 48px),1440px)!important;
  max-width:1440px!important;
  margin:0 auto!important;
  padding:0!important;
  gap:28px!important;
  overflow-x:auto!important;
  border:0!important;
  border-top:1px solid var(--stable-line)!important;
  border-bottom:1px solid var(--stable-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  scrollbar-width:none!important;
}
html body .category-nav.portfolio-filter::-webkit-scrollbar,
html body .category-nav.magazine-filter::-webkit-scrollbar{display:none!important}
html body .category-nav.portfolio-filter button,
html body .category-nav.magazine-filter button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  min-height:58px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  color:#777!important;
  background:transparent!important;
  font-size:14px!important;
  font-weight:500!important;
  white-space:nowrap!important;
}
html body .category-nav.portfolio-filter button.is-active,
html body .category-nav.magazine-filter button.is-active{color:#111!important;box-shadow:inset 0 -1px 0 #111!important}

/* --------------------------------------------------------------------------
   4) PORTFOLIO ARCHIVE
   -------------------------------------------------------------------------- */
html body .portfolio-index-head,
html body.nw-doc-page.page-portfolio .portfolio-index-head{
  display:grid!important;
  grid-template-columns:minmax(260px,.65fr) minmax(0,1.35fr)!important;
  gap:clamp(48px,6vw,100px)!important;
  width:min(calc(100% - 48px),1440px)!important;
  max-width:1440px!important;
  margin:0 auto!important;
  padding:88px 0 62px!important;
  align-items:start!important;
  border-bottom:1px solid var(--stable-line)!important;
}
html body .portfolio-index-head__title,
html body .portfolio-index-head__meta{grid-column:auto!important;position:static!important;float:none!important;min-width:0!important;max-width:none!important;transform:none!important}
html body .portfolio-index-head__meta{
  display:grid!important;
  grid-template-columns:minmax(0,680px) auto!important;
  gap:32px!important;
  justify-content:space-between!important;
  align-items:start!important;
}
html body .portfolio-index-head__meta p{width:auto!important;max-width:680px!important;margin:0!important;font-size:17px!important;line-height:1.7!important}
html body .portfolio-list,
html body.nw-doc-page.page-portfolio .portfolio-list{
  width:min(calc(100% - 48px),1440px)!important;
  max-width:1440px!important;
  margin:0 auto!important;
  padding:64px 0 112px!important;
}
html body .portfolio-grid,
html body.nw-doc-page.page-portfolio .portfolio-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  gap:56px 22px!important;
}
html body .portfolio-card,
html body .portfolio-card__link,
html body .portfolio-card__media,
html body .portfolio-card__info{
  position:relative!important;
  float:none!important;
  clear:none!important;
  grid-column:auto!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
}
html body .portfolio-card__link{display:block!important}
html body .portfolio-card__media{aspect-ratio:16/9!important;min-height:0!important;overflow:hidden!important;border-radius:4px!important;background:#f1f1ef!important}
html body .portfolio-card__media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
html body .portfolio-card__info{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(180px,34%)!important;gap:20px!important;padding-top:16px!important}
html body .portfolio-card__info strong{font-size:18px!important;line-height:1.4!important}
html body .portfolio-card__info div>span,
html body .portfolio-card__scope{font-size:14px!important;line-height:1.55!important}

/* --------------------------------------------------------------------------
   5) MAGAZINE ARCHIVE
   -------------------------------------------------------------------------- */
html body .magazine-archive,
html body.nw-doc-page.page-magazine .magazine-archive{
  width:min(calc(100% - 48px),1440px)!important;
  max-width:1440px!important;
  margin:0 auto!important;
  padding:64px 0 112px!important;
}
html body .magazine-grid,
html body.nw-doc-page.page-magazine .magazine-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  gap:64px 22px!important;
}
html body .magazine-card,
html body .magazine-card__link,
html body .magazine-card__media,
html body .magazine-card__meta,
html body .magazine-card h3,
html body .magazine-card__summary,
html body .magazine-card__status{
  position:static!important;
  float:none!important;
  clear:none!important;
  grid-column:auto!important;
  min-width:0!important;
  transform:none!important;
}
html body .magazine-card{display:block!important;width:auto!important;max-width:none!important;margin:0!important}
html body .magazine-card__link{display:block!important;width:100%!important}
html body .magazine-card__media{display:block!important;width:100%!important;aspect-ratio:16/9!important;margin:0!important;overflow:hidden!important;border-radius:4px!important;background:#f1f1ef!important}
html body .magazine-card__media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
html body .magazine-card__meta{display:flex!important;width:100%!important;justify-content:space-between!important;gap:16px!important;margin:0!important;padding-top:16px!important;font-size:12px!important;line-height:1.45!important}
html body .magazine-card h3{display:block!important;width:100%!important;max-width:26ch!important;margin:12px 0 0!important;font-size:clamp(22px,1.8vw,28px)!important;line-height:1.35!important}
html body .magazine-card__summary{display:block!important;width:100%!important;max-width:46ch!important;margin:10px 0 0!important;font-size:16px!important;line-height:1.7!important}
html body .magazine-card__status{display:inline-flex!important;width:auto!important;margin-top:18px!important;font-size:12px!important}

/* --------------------------------------------------------------------------
   6) SELECTED PROJECTS / BRANDING / GENERAL SECTIONS
   -------------------------------------------------------------------------- */
html body .branding-projects,
html body .branding-about{width:min(calc(100% - 48px),1440px)!important;max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}
html body .project-grid,
html body.nw-doc-page.page-project .project-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;max-width:none!important;min-width:0!important;gap:56px 22px!important}
html body .project-grid>*{grid-column:auto!important;position:relative!important;float:none!important;width:auto!important;min-width:0!important;max-width:none!important;transform:none!important}
html body .project-random-media{width:100%!important;aspect-ratio:16/9!important;min-height:0!important;overflow:hidden!important}
html body .project-random-media img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
html body .branding-about__grid{display:grid!important;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr)!important;gap:clamp(56px,7vw,120px)!important;align-items:start!important}
html body .branding-about__grid>*{min-width:0!important}

/* CTA never collapses into a thin column */
html body .cta,
html body.nw-doc-page .nw-doc-content>.cta{display:grid!important;width:100%!important;max-width:none!important;min-width:0!important;min-height:420px!important;margin-top:112px!important;padding:88px max(24px,calc((100vw - 1440px)/2)) 52px!important;grid-template-columns:1fr!important;align-content:space-between!important}
html body .cta>.container,
html body.nw-doc-page .nw-doc-content>.cta>.container{width:100%!important;max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}
html body .cta__bottom{display:flex!important;width:100%!important;justify-content:space-between!important;gap:40px!important}

/* --------------------------------------------------------------------------
   7) MOBILE / TABLET
   -------------------------------------------------------------------------- */
@media(max-width:1180px){
  html body .magazine-grid,
  html body.nw-doc-page.page-magazine .magazine-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  html body .portfolio-hero,
  html body .magazine-hero,
  html body .portfolio-index-head,
  html body .branding-about__grid{grid-template-columns:1fr!important;gap:28px!important}
  html body .portfolio-index-head__meta{grid-template-columns:1fr!important;gap:14px!important}
  html body .portfolio-grid,
  html body .project-grid{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  :root{--nw-pad:16px}
  html body:not(.portfolio-detail-page) .container,
  html body .page-hero,
  html body .portfolio-hero,
  html body .magazine-hero,
  html body .portfolio-index-head,
  html body .portfolio-list,
  html body .magazine-archive,
  html body .branding-projects,
  html body .branding-about,
  html body .category-nav.portfolio-filter,
  html body .category-nav.magazine-filter{width:calc(100% - 32px)!important}
  html body .portfolio-hero,
  html body .magazine-hero{padding-top:72px!important;padding-bottom:56px!important}
  html body .magazine-grid,
  html body .portfolio-grid,
  html body .project-grid{grid-template-columns:1fr!important;gap:44px!important}
  html body .portfolio-card__info{grid-template-columns:1fr!important;gap:6px!important}
  html body .portfolio-card__scope{text-align:left!important}
  html body .cta,
  html body.nw-doc-page .nw-doc-content>.cta{min-height:0!important;padding:72px 16px 40px!important}
  html body .cta__bottom{align-items:flex-start!important;flex-direction:column!important;gap:28px!important}
}

/* --------------------------------------------------------------------------
   8) ALL PORTFOLIO DETAIL PAGES — WHITE CANVAS
   Gray surfaces are removed globally. Structure comes from spacing and rules.
   Intentional black technical blocks remain dark.
   -------------------------------------------------------------------------- */
html body.portfolio-detail-page,
html body.portfolio-detail-page .site-shell,
html body.portfolio-detail-page main,
html body.portfolio-detail-page .portfolio-split-detail,
html body.portfolio-detail-page .portfolio-detail-sidebar,
html body.portfolio-detail-page .portfolio-detail-sidebar__inner,
html body.portfolio-detail-page .portfolio-detail-sidebar__top,
html body.portfolio-detail-page .portfolio-detail-story,
html body.portfolio-detail-page .portfolio-detail-facts,
html body.portfolio-detail-page .portfolio-detail-facts>div,
html body.portfolio-detail-page .portfolio-detail-index,
html body.portfolio-detail-page .portfolio-detail-scroll,
html body.portfolio-detail-page .portfolio-scroll-section,
html body.portfolio-detail-page .portfolio-scroll-section__head,
html body.portfolio-detail-page .portfolio-scroll-copy,
html body.portfolio-detail-page .portfolio-scroll-credit,
html body.portfolio-detail-page .portfolio-scroll-credit dl,
html body.portfolio-detail-page .portfolio-scroll-credit dl>div,
html body.portfolio-detail-page .dev-case-stat,
html body.portfolio-detail-page .dev-planning-card,
html body.portfolio-detail-page .dev-stack-card,
html body.portfolio-detail-page .dev-sitemap__group,
html body.portfolio-detail-page .dev-data-flow__step,
html body.portfolio-detail-page .dev-deployment__row{
  background:#fff!important;
}
html body.portfolio-detail-page .site-header{background:rgba(255,255,255,.98)!important}
html body.portfolio-detail-page .portfolio-scroll-media,
html body.portfolio-detail-page .portfolio-scroll-grid,
html body.portfolio-detail-page .portfolio-scroll-grid--two,
html body.portfolio-detail-page .portfolio-scroll-stack{background:#fff!important}
html body.portfolio-detail-page .portfolio-scroll-media img,
html body.portfolio-detail-page .portfolio-scroll-grid img,
html body.portfolio-detail-page .portfolio-scroll-stack img{background:transparent!important}
html body.portfolio-detail-page .dev-data-flow__step:after{background:#fff!important}

/* Preserve deliberate high-contrast technical areas. */
html body.portfolio-detail-page .dev-architecture,
html body.portfolio-detail-page .dev-architecture__node,
html body.portfolio-detail-page .dev-code-map,
html body.portfolio-detail-page .dev-code-card{background:#111!important}