/* ==========================================================================
   어반픽스 — 가구사이즈줄이기 (regagu.urbanfixkor.com)
   Design concept: MEASURE / CUT / FIT — precision, dimension, structure.
   ========================================================================== */

:root{
  --off-white:#F6F4EF;
  --warm-gray:#E8E6E0;
  --charcoal:#2D302C;
  --olive:#78866B;
  --brick:#C96F4A;
  --white:#FFFFFF;

  --sans:'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --mono:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --container:1240px;
  --gap-section: clamp(64px, 9vw, 128px);
  --pad-inline: clamp(20px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;max-width:100%}
body{
  margin:0;
  background:var(--off-white);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:keep-all;
  overflow-wrap:break-word;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font-family:inherit}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad-inline);
}

.mono{font-family:var(--mono)}

/* ---- section rhythm ---- */
section{padding-block:var(--gap-section)}

.section-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--olive);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
}
.section-label::before{
  content:"";
  width:22px;height:1px;
  background:var(--brick);
  display:inline-block;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.nav-toggle{display:none}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(246,244,239,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(45,48,44,.12);
}
.site-header__inner{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad-inline);
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand__mark{color:var(--brick);display:inline-flex}
.brand__name{white-space:nowrap}

.main-nav{display:flex;align-items:center;gap:clamp(16px,3vw,36px)}
.main-nav a{font-size:14px;font-weight:600;white-space:nowrap}
.main-nav__keyword{color:var(--charcoal)}
.main-nav a:not(.main-nav__keyword):not(.btn-call){
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--charcoal);
  opacity:.7;
}
.main-nav a:not(.main-nav__keyword):not(.btn-call):hover{opacity:1;color:var(--olive)}

.btn-call{
  border:1px solid var(--charcoal);
  padding:9px 16px;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.02em;
  transition:background .15s,color .15s;
}
.btn-call:hover{background:var(--charcoal);color:var(--off-white)}

.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.nav-burger span{width:22px;height:1.5px;background:var(--charcoal);display:block}

@media (max-width:860px){
  .nav-burger{display:flex}
  .main-nav{
    position:fixed;inset:76px 0 0 0;
    background:var(--off-white);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:36px var(--pad-inline);
    gap:28px;
    transform:translateX(100%);
    transition:transform .25s ease;
    height:calc(100vh - 76px);
  }
  .main-nav a{font-size:20px}
  .main-nav a:not(.main-nav__keyword):not(.btn-call){font-size:14px}
  .btn-call{margin-top:8px}
  .nav-toggle:checked ~ .site-header .main-nav{transform:translateX(0)}
}

/* ==========================================================================
   DIMENSION LINE GRAPHICS
   ========================================================================== */
.dim-h{display:flex;align-items:center;gap:8px;color:var(--brick)}
.dim-h .dim-track{flex:1;height:1px;background:currentColor;position:relative;min-width:24px}
.dim-h .dim-track::before,.dim-h .dim-track::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(-45deg);
}
.dim-h .dim-track::before{left:0}
.dim-h .dim-track::after{right:0;transform:translateY(-50%) rotate(135deg)}

.dim-v{display:inline-flex;flex-direction:column;align-items:center;color:var(--brick);height:100%}
.dim-v .dim-track{flex:1;width:1px;background:currentColor;min-height:24px}

.dim-tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--brick);
  text-transform:uppercase;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{padding-top:clamp(32px,6vw,56px)}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);
  gap:clamp(28px,4vw,56px);
  align-items:stretch;
}
.hero__media{position:relative}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:6/5;
}
.hero__media-frame{
  position:absolute;inset:14px;
  border:1px solid rgba(246,244,239,.55);
  pointer-events:none;
}
.hero__tag{
  position:absolute;left:24px;bottom:24px;
  background:var(--off-white);
  padding:8px 14px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--charcoal);
}

.hero__copy{display:flex;flex-direction:column;justify-content:center;gap:22px}
.hero__eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--olive);text-transform:uppercase}
.hero h1{
  font-size:clamp(32px,8vw,58px);
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  white-space:nowrap;
}
@media (min-width:560px){
  .hero h1{font-size:clamp(38px,4.6vw,58px)}
}
.hero__desc{font-size:16px;color:rgba(45,48,44,.78);max-width:38ch}

.hero__mcf{display:flex;gap:22px;margin-top:6px}
.hero__mcf div{display:flex;flex-direction:column;gap:6px}
.hero__mcf .num{font-family:var(--mono);font-size:11px;color:var(--brick)}
.hero__mcf .word{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.06em}

@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr}
  .hero__media img{aspect-ratio:4/3}
}

/* ==========================================================================
   WHY REDUCE
   ========================================================================== */
.why{background:var(--charcoal);color:var(--off-white)}
.why .section-label{color:var(--olive)}
.why__title{
  font-size:clamp(30px,4vw,48px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.15;
  margin-bottom:40px;
  max-width:16ch;
}
.why__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:rgba(246,244,239,.18);
  border-top:1px solid rgba(246,244,239,.18);
}
.why__item{
  background:var(--charcoal);
  padding:28px clamp(20px,3vw,32px);
}
.why__item:nth-child(odd){padding-left:0}
.why__item:nth-child(even){padding-right:0}
.why__item p{font-size:15.5px;color:rgba(246,244,239,.82)}
@media (max-width:720px){
  .why__grid{grid-template-columns:1fr}
  .why__item:nth-child(odd),.why__item:nth-child(even){padding:28px 0}
}

/* ==========================================================================
   WIDTH / DEPTH / HEIGHT
   ========================================================================== */
.dims__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,0px);
  border-top:1px solid rgba(45,48,44,.15);
}
.dims__col{
  padding:36px clamp(8px,3vw,32px) 8px 0;
  border-right:1px solid rgba(45,48,44,.15);
}
.dims__col:last-child{border-right:none}
.dims__col:not(:first-child){padding-left:clamp(20px,3vw,32px)}
.dims__word{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(28px,4vw,42px);
  letter-spacing:-.01em;
  margin-bottom:6px;
}
.dims__kr{font-size:14px;color:rgba(45,48,44,.55);margin-bottom:20px}
.dims__graphic{height:44px;margin-bottom:22px}
.dims__text{font-size:15px;color:rgba(45,48,44,.8)}

@media (max-width:760px){
  .dims__grid{grid-template-columns:1fr;border-top:none}
  .dims__col{border-right:none;border-top:1px solid rgba(45,48,44,.15);padding-inline:0}
  .dims__col:not(:first-child){padding-left:0}
}

/* ==========================================================================
   FURNITURE TYPES — NSEO GRID (asymmetric, real proportions)
   ========================================================================== */
.types__grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(160px,auto);
  gap:16px;
}
.type-card{
  position:relative;
  display:block;
  overflow:hidden;
  background:var(--warm-gray);
  color:var(--off-white);
}
.type-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.type-card:hover img{transform:scale(1.045)}
.type-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(45,48,44,0) 35%, rgba(45,48,44,.82) 100%);
}
.type-card__body{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px;
  z-index:2;
}
.type-card__num{font-family:var(--mono);font-size:12px;color:var(--brick);margin-bottom:8px;display:block}
.type-card__title{font-size:clamp(19px,2vw,24px);font-weight:800;margin-bottom:6px}
.type-card__desc{font-size:13.5px;color:rgba(246,244,239,.86);max-width:32ch}

/* asymmetric spans reflecting real furniture proportions */
.type-card--table  { grid-column:span 6; aspect-ratio: 21/9; }        /* wide table */
.type-card--bookshelf{ grid-column:span 2; grid-row:span 2; }         /* tall bookshelf */
.type-card--cabinet{ grid-column:span 4; grid-row:span 2; aspect-ratio:16/9;} /* low & wide */
.type-card--drawer { aspect-ratio:4/3; }                              /* medium, inside .types__grid-pair */
.type-card--closet { grid-column:span 3; aspect-ratio:3/4; }          /* tall */

/* drawer card + filler text stacked to match closet's taller column */
.types__grid-pair{
  grid-column:span 3;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.types__filler{
  flex:1;
  background:var(--charcoal);
  color:var(--off-white);
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:160px;
}
.types__filler-eyebrow{font-size:12px;letter-spacing:.18em;color:var(--brick);margin-bottom:12px}
.types__filler-text{font-size:clamp(19px,2vw,23px);font-weight:800;line-height:1.3;margin-bottom:10px}
.types__filler-sub{font-size:13.5px;color:rgba(246,244,239,.75);max-width:34ch}

@media (max-width:900px){
  .types__grid{grid-template-columns:repeat(2,1fr)}
  .type-card--table{grid-column:span 2;aspect-ratio:16/10}
  .type-card--bookshelf{grid-column:span 1;grid-row:span 2;aspect-ratio:3/4}
  .type-card--cabinet{grid-column:span 2;grid-row:span 1;aspect-ratio:16/9}
  .type-card--closet{grid-column:span 1;grid-row:span 2;aspect-ratio:3/4}
  .types__grid-pair{grid-column:span 1}
}
@media (max-width:560px){
  .types__grid{grid-template-columns:1fr}
  .type-card--table,.type-card--bookshelf,.type-card--cabinet,.type-card--closet{
    grid-column:1;grid-row:auto;aspect-ratio:4/3;
  }
  .types__grid-pair{grid-column:1}
}

/* ==========================================================================
   ORIGINAL / NEW FIT
   ========================================================================== */
.fit__pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(16px,3vw,28px);
  align-items:end;
}
.fit__frame{position:relative}
.fit__frame img{width:100%;aspect-ratio:3/4;object-fit:cover}
.fit__caption{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(45,48,44,.18);
}
.fit__label{font-family:var(--mono);font-size:13px;letter-spacing:.16em}
.fit__frame--before .fit__label{color:rgba(45,48,44,.55)}
.fit__frame--after .fit__label{color:var(--brick)}
.fit__note{font-size:14px;color:rgba(45,48,44,.7);margin-top:26px;max-width:60ch}

@media (max-width:640px){
  .fit__pair{grid-template-columns:1fr}
}

/* ==========================================================================
   DETAIL
   ========================================================================== */
.detail__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:20px;
}
.detail__grid img{width:100%;height:100%;object-fit:cover}
.detail__main{aspect-ratio:4/5}
.detail__side{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.detail__side img{aspect-ratio:4/3}
@media (max-width:760px){
  .detail__grid{grid-template-columns:1fr}
  .detail__side{grid-template-columns:1fr 1fr;grid-template-rows:none}
}

/* ==========================================================================
   CHECKLIST — editorial vertical list
   ========================================================================== */
.checklist__list{border-top:1px solid rgba(45,48,44,.18)}
.checklist__item{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:clamp(16px,4vw,40px);
  padding:clamp(28px,4vw,40px) 0;
  border-bottom:1px solid rgba(45,48,44,.18);
}
.checklist__num{
  font-family:var(--mono);
  font-size:clamp(28px,3vw,36px);
  font-weight:700;
  color:rgba(45,48,44,.28);
}
.checklist__body h3{font-size:clamp(19px,2vw,23px);font-weight:800;margin-bottom:10px}
.checklist__body p{font-size:15px;color:rgba(45,48,44,.75);max-width:62ch}
.checklist__body .rule{width:32px;height:1px;background:var(--brick);margin-bottom:14px}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about__grid{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.about__title{font-size:clamp(24px,3vw,32px);font-weight:800;line-height:1.35;max-width:14ch}
.about__body p{font-size:15.5px;color:rgba(45,48,44,.78);margin-bottom:16px}
.about__body p:last-child{margin-bottom:0}
@media (max-width:760px){.about__grid{grid-template-columns:1fr}}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{
  background:var(--olive);
  color:var(--off-white);
  text-align:center;
}
.final-cta__label{font-family:var(--mono);font-size:12px;letter-spacing:.3em;opacity:.85;margin-bottom:18px}
.final-cta__title{font-size:clamp(36px,6vw,72px);font-weight:800;letter-spacing:-.02em;margin-bottom:20px}
.final-cta__text{font-size:16px;opacity:.92;margin-bottom:34px;line-height:1.7}

.btn-outline{
  display:inline-block;
  border:1px solid var(--off-white);
  padding:14px 28px;
  font-family:var(--mono);
  font-size:15px;
  letter-spacing:.03em;
  transition:background .15s,color .15s;
}
.btn-outline:hover{background:var(--off-white);color:var(--olive)}
.btn-outline--lg{padding:17px 34px;font-size:16px}

/* ==========================================================================
   RELATED SERVICES (NSEO internal link — single photo-card section)
   ========================================================================== */
.related__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;
}
.related-card{
  display:block;
  position:relative;
  overflow:hidden;
  background:var(--warm-gray);
  color:var(--off-white);
}
.related-card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s ease}
.related-card:hover img{transform:scale(1.05)}
.related-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(45,48,44,0) 45%,rgba(45,48,44,.85) 100%)}
.related-card__body{position:absolute;left:0;right:0;bottom:0;padding:18px;z-index:2}
.related-card__title{font-weight:800;font-size:17px}
.related-card__arrow{font-family:var(--mono);font-size:12px;color:var(--brick);margin-top:6px;display:block}
.related__grid--region img{aspect-ratio:1/1}

/* ==========================================================================
   PAGE HERO (NSEO detail pages)
   ========================================================================== */
.page-hero{padding-top:clamp(32px,6vw,56px)}
.page-hero__crumb{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:rgba(45,48,44,.55);
  margin-bottom:18px;
}
.page-hero__crumb a{color:var(--olive)}
.page-hero h1{
  font-size:clamp(32px,4.4vw,52px);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.14;
  margin-bottom:16px;
}
.page-hero__desc{font-size:16px;color:rgba(45,48,44,.78);max-width:60ch;margin-bottom:34px}

/* landscape hero (table) */
.page-hero--landscape .page-hero__media img{width:100%;aspect-ratio:16/7;object-fit:cover}
/* portrait hero (bookshelf) */
.page-hero--portrait .page-hero__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
/* tall hero (closet — height emphasis) */
.page-hero--tall .page-hero__media img{width:100%;aspect-ratio:2/3;object-fit:cover}
/* split hero (cabinet — low & wide) */
.page-hero--split .page-hero__media img{width:100%;aspect-ratio:16/9;object-fit:cover}
/* detail-forward hero (drawer) */
.page-hero--detail .page-hero__media{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.page-hero--detail .page-hero__media img{width:100%;height:100%;object-fit:cover}
.page-hero--detail .page-hero__media .tall{aspect-ratio:3/4}
.page-hero--detail .page-hero__media .stack{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.page-hero--detail .page-hero__media .stack img{aspect-ratio:4/3}

/* pair hero (two real photos, no before/after claim — closet, drawer) */
.page-hero--pair .page-hero__media{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.page-hero--pair .page-hero__media img{width:100%;aspect-ratio:3/4;object-fit:cover}

@media (max-width:760px){
  .page-hero--portrait .page-hero__media{grid-template-columns:1fr}
  .page-hero--pair .page-hero__media{grid-template-columns:1fr 1fr}
  .page-hero--detail .page-hero__media{grid-template-columns:1fr}
  .page-hero--detail .page-hero__media .stack{grid-template-columns:1fr 1fr;grid-template-rows:none}
}

/* horizontal split hero (cabinet — image + text side by side) */
.page-hero--split-h .page-hero__grid{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center;
}
.page-hero--split-h .page-hero__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:840px){
  .page-hero--split-h .page-hero__grid{grid-template-columns:1fr}
}

/* generic content blocks reused on NSEO pages */
.content-block{max-width:74ch}
.content-block p{font-size:15.5px;color:rgba(45,48,44,.8);margin-bottom:16px}
.content-block p:last-child{margin-bottom:0}

.points{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(45,48,44,.18);border-top:1px solid rgba(45,48,44,.18);margin-top:36px;border-collapse:collapse;width:100%}
table.points tbody{display:contents}
.points__item{background:var(--off-white);padding:24px clamp(20px,3vw,28px);display:block}
.points__item:nth-child(odd){padding-left:0}
.points__item:nth-child(even){padding-right:0}
table.points .points__item td{display:block;padding:0;border:0}
.points__item .k{font-family:var(--mono);font-size:12px;color:var(--brick);letter-spacing:.1em;margin-bottom:8px;display:block}
.points__item p{font-size:14.5px;color:rgba(45,48,44,.78)}
@media (max-width:640px){
  .points{grid-template-columns:1fr}
  .points__item:nth-child(odd),.points__item:nth-child(even){padding:24px 0}
}

.faq{border-top:1px solid rgba(45,48,44,.18)}
.faq__item{border-bottom:1px solid rgba(45,48,44,.18);padding:22px 0}
.faq__q{font-weight:700;font-size:15.5px;margin-bottom:8px;display:flex;gap:10px}
.faq__q::before{content:"Q";font-family:var(--mono);color:var(--brick);font-weight:700}
.faq__a{font-size:14.5px;color:rgba(45,48,44,.78);padding-left:22px}

.faq--grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(24px,4vw,48px);
  border-top:1px solid rgba(45,48,44,.18);
}
@media (max-width:760px){
  .faq--grid{grid-template-columns:1fr}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--charcoal);color:rgba(246,244,239,.75);padding-block:48px}
.site-footer__inner{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-inline)}
.site-footer__brand{color:var(--off-white);font-weight:800;font-size:18px;margin-bottom:14px}
.site-footer__biz p{font-size:13.5px;line-height:1.9}
.site-footer__biz a{text-decoration:underline;text-underline-offset:3px}

.cta-mobile{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--charcoal);color:var(--off-white);
  text-align:center;padding:15px;
  font-family:var(--mono);font-size:14px;letter-spacing:.04em;
}
@media (max-width:760px){
  .cta-mobile{display:block}
  .site-footer{padding-bottom:76px}
}