    :root{
      --header-h: 86px;
      --line: #e8e8e8;
      --ink: #111;
      --muted: #7a7a7a;
      --paper: #fff;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:var(--paper);
      color:var(--ink);
      font-family:"Manrope","Noto Sans KR",Arial,sans-serif;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}

    /* header */
    .site-header{
      height:var(--header-h);
      position:sticky;
      top:0;
      z-index:1000;
      background:rgba(255,255,255,.94);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line);
    }
    .brand{
      font-size:1.34rem;
      font-weight:600;
      letter-spacing:.24em;
      white-space:nowrap;
    }
    .brand small{
      display:block;
      margin-top:2px;
      font-size:.56rem;
      letter-spacing:.22em;
      font-weight:400;
      color:#888;
    }
    .desktop-nav{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      display:flex;
      align-items:center;
      gap:40px;
      white-space:nowrap;
    }
    .desktop-nav a{
      position:relative;
      margin-left:0;
      font-size:.83rem;
      font-weight:500;
      letter-spacing:.15em;
      text-transform:uppercase;
    }
    .desktop-nav a::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-7px;
      width:100%;
      height:1px;
      background:#111;
      transform:scaleX(0);
      transform-origin:right;
      transition:transform .35s ease;
    }
    .desktop-nav a:hover::after{transform:scaleX(1);transform-origin:left}

    .menu-btn{
      width:42px;height:42px;
      border:0;background:transparent;
      display:none;
      align-items:center;justify-content:center;
      padding:0;
    }
    .menu-btn span,.menu-btn span::before{
      content:"";display:block;width:22px;height:1px;background:#111;transition:.25s ease;
    }
    .menu-btn span::before{transform:translateY(6px)}
	
	/* 우측 서브메뉴 */
.header-side-nav{
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);

    display:flex;
    align-items:center;
    gap:18px;
}

.header-side-nav a{
    position:relative;

    font-size:.60rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;

    color:#777;

    transition:color .25s ease;
}

.header-side-nav a:hover{
    color:#111;
}

    /* intro strip */
    .intro-strip{
      min-height:110px;
      display:flex;
      align-items:center;
      border-bottom:1px solid var(--line);
    }
    .intro-title{
      margin:0;
      font-size:clamp(1.5rem,1.8vw,2.9rem);
      line-height:1.05;
      font-weight:300;
      letter-spacing:-.04em;
    }
    .intro-meta{
      font-size:.68rem;
      letter-spacing:.14em;
      line-height:1.8;
      color:#666;
      text-transform:uppercase;
    }

    /* grid */
    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(5,minmax(0,1fr));
      gap:0;
      border-left:1px solid var(--line);
    }
    .tile{
      position:relative;
      aspect-ratio:1 / 1;
      overflow:hidden;
      border-right:1px solid var(--line);
      border-bottom:1px solid var(--line);
      background:#f4f4f4;
      isolation:isolate;
    }

    .project-tile img{
      width:100%;height:100%;object-fit:cover;display:block;
      transform:scale(1.001);
      filter:saturate(.88) contrast(.98);
      transition:transform .75s cubic-bezier(.2,.68,.22,1), filter .5s ease;
    }
    .project-tile::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.62) 100%);
      opacity:0;
      transition:opacity .45s ease;
      z-index:1;
    }
    .project-tile:hover img{transform:scale(1.045);filter:saturate(.98)}
    .project-tile:hover::after{opacity:1}

    .project-no{
      position:absolute;left:20px;top:18px;z-index:3;
      font-size:.64rem;letter-spacing:.14em;
      color:white;text-shadow:0 1px 15px rgba(0,0,0,.35);
    }
    .project-caption{
      position:absolute;
      left:22px;right:22px;bottom:21px;
      z-index:3;color:white;
      transform:translateY(10px);
      opacity:0;
      transition:opacity .38s ease,transform .45s ease;
    }
    .project-tile:hover .project-caption{opacity:1;transform:translateY(0)}
    .project-caption h3{
      margin:0 0 5px;
      font-size:clamp(.98rem,1.15vw,1.25rem);
      font-weight:400;
      letter-spacing:-.02em;
    }
    .project-caption p{
      margin:0;
      font-size:.63rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      opacity:.82;
    }

    .mobile-only-project{display:none;}

    /* info tiles */
    .info-tile{
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:clamp(22px,2.2vw,38px);
      background:#fff;
      transition:background .35s ease,color .35s ease;
    }
	.info-tile.beige{background:#efeee9;}
	.beige .info-kicker{color:#aaa}
    .info-title{
      margin:0;
      font-size:clamp(1.55rem,2.8vw,3.1rem);
      line-height:.98;
      letter-spacing:-.055em;
      font-weight:300;
    }
    .info-tile.dark{background:#111;color:white}
    .info-kicker{
      font-size:.61rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#888;
    }
    .dark .info-kicker{color:#aaa}
    .info-title{
      margin:0;
      font-size:clamp(1.55rem,2.8vw,3.1rem);
      line-height:.98;
      letter-spacing:-.055em;
      font-weight:300;
    }
    .info-title.kr{
      font-family:"Noto Sans KR",sans-serif;
      letter-spacing:-.055em;
      line-height:1.08;
    }
    .info-bottom{display:flex;align-items:end;justify-content:space-between;gap:20px}
    .info-copy{
      margin:0;
      max-width:220px;
      font-family:"Noto Sans KR",sans-serif;
      font-size:clamp(.7rem,.78vw,.82rem);
      line-height:1.75;
      color:#666;
      font-weight:300;
    }
    .dark .info-copy{color:#bbb}
    .arrow{
      width:40px;height:40px;
      flex:0 0 40px;
      display:flex;align-items:center;justify-content:center;
      border:1px solid #d5d5d5;border-radius:50%;
      font-size:1.1rem;
      transition:transform .35s ease,background .35s ease,color .35s ease;
    }
    .dark .arrow{border-color:#444}
    .info-tile:hover .arrow{transform:translate(4px,-4px);background:#111;color:white}
    .info-tile.dark:hover .arrow{background:white;color:#111}

    .quote-tile{
      background:#efeee9;
      color:#111;
    }
    .quote-tile .big-word{
      font-size:clamp(2rem,2.8vw,4.1rem);
      line-height:.92;
      font-weight:300;
      letter-spacing:-.065em;
    }

    /* full width statement */
    .statement{
      padding:clamp(70px,9vw,150px) 0;
      border-bottom:1px solid var(--line);
    }
    .statement .eyebrow{
      font-size:.63rem;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:#888;
    }
    .statement h2{
      margin:25px 0 0;
      max-width:1100px;
      font-size:clamp(2.15rem,5vw,6rem);
      line-height:.96;
      font-weight:300;
      letter-spacing:-.06em;
    }

    /* footer */
    footer{padding:45px 0 40px;border-top:0 solid var(--line)}
    .footer-label{font-size:.6rem;letter-spacing:.15em;color:#888;text-transform:uppercase;margin-bottom:8px}
    .footer-copy{font-size:.76rem;line-height:1.8;color:#444}
    .copyright{font-size:.62rem;color:#999;letter-spacing:.08em}
    footer .brand img{
      display:block;
      transform:scale(.8);
      transform-origin:left center;
    }

    .footer-social{
      display:flex;
      align-items:center;
      gap:16px;
      flex-shrink:0;
    }
    .footer-social a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:#111;
      line-height:1;
      transition:opacity .25s ease,transform .25s ease;
    }
    .footer-social a:hover{
      opacity:.55;
      transform:translateY(-2px);
    }
    .footer-social svg{
      width:20px;
      height:20px;
      display:block;
    }
    .footer-social .naver-blog-icon{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:20px;
      height:20px;
      font-size:1.1rem;
      font-weight:700;
      letter-spacing:-.06em;
      line-height:1;
    }

    /* modal */
    .modal-content{border:0;border-radius:0}
    .project-modal-image{width:100%;height:min(62vh,700px);object-fit:cover;background:#eee}
    .project-modal-meta{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;color:#888}
    .project-modal-title{font-size:clamp(1.8rem,3vw,3.5rem);font-weight:300;letter-spacing:-.04em}

    /* reveal */
    .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
    .reveal.is-visible{opacity:1;transform:none}


    /* top button */
    .to-top-btn{
      width:54px;
      height:54px;
      border:1px solid #111;
      background:#fff;
      color:#111;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.62rem;
      font-weight:500;
      letter-spacing:.14em;
      cursor:pointer;
      transition:background .25s ease,color .25s ease,transform .25s ease;
    }
    .to-top-btn:hover{
      background:#111;
      color:#fff;
      transform:translateY(-3px);
    }

    /* mobile drawer */
    .mobile-menu{
      position:fixed;inset:var(--header-h) 0 0 0;z-index:999;
      background:#fff;display:none;
      padding:35px 22px;
    }
    .mobile-menu.open{display:block}
    .mobile-menu a{display:block;padding:17px 0;border-bottom:1px solid var(--line);font-size:1.55rem;font-weight:300;letter-spacing:-.03em}

    @media (max-width:1399.98px){
      .portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    }
    @media (max-width:1199.98px){
      .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    @media (max-width:767.98px){
      :root{--header-h:72px}
      .site-header{height:var(--header-h)}
      .desktop-nav{display:none}
      .menu-btn{display:flex}
      .brand{font-size:1.05rem}
      .intro-strip{min-height:125px}
      .intro-meta{margin-top:16px}
      .portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .mobile-only-project{display:block;}
      .info-tile{padding:18px}
      .info-copy{font-size:.67rem;line-height:1.55}
      .arrow{width:34px;height:34px;flex-basis:34px}
      .project-caption{left:14px;right:14px;bottom:14px;opacity:1;transform:none}
      .project-tile::after{opacity:.38}
      .project-no{left:13px;top:12px}
      .project-caption p{font-size:.54rem}
      .statement{padding:68px 0}
      .to-top-btn{width:48px;height:48px}
      footer .to-top-btn{margin-left:auto}
      footer{padding-bottom:40px}
    }
    @media (max-width:390px){
      .info-copy{display:none}
    }
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
      .reveal{opacity:1;transform:none}
    }


/* ==============================
   COMPANY PAGE ONLY
============================== */

/* Company Hero */
.company-hero{
    min-height:calc(50vh - var(--header-h));
    display:flex;
    align-items:flex-end;
    border-bottom:1px solid var(--line);
}

.company-hero .inner{
    width:100%;
    padding:clamp(70px,4vw,140px) 0 clamp(55px,5vw,110px);
}

.company-kicker,
.section-kicker{
    font-size:.62rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#888;
}

.company-hero h1{
    margin:24px 0 0;
    font-size:clamp(3.4rem,6vw,9rem);
    line-height:.84;
    font-weight:300;
    letter-spacing:-.07em;
}

.company-hero p{
    max-width:760px;
    margin:34px 0 0;
    font-family:"KoPubWorldDotum",sans-serif;
    font-size:clamp(.95rem,0.8vw,1.22rem);
    line-height:1.95;
    color:#555;
    font-weight:300;
}


/* Company Section */
.company-section{
    border-bottom:1px solid var(--line);
}


/* Section Header */
.section-head{
    padding:clamp(70px,8vw,125px) 0 clamp(42px,5vw,75px);
}

.section-head h2{
    margin:18px 0 0;
    font-size:clamp(2.7rem,6vw,7rem);
    line-height:.9;
    font-weight:300;
    letter-spacing:-.065em;
}

.section-head p{
    max-width:720px;
    margin:28px 0 0 auto;
    font-family:"Noto Sans KR",sans-serif;
    font-size:clamp(.88rem,1vw,1.02rem);
    line-height:1.95;
    color:#555;
    font-weight:300;
}


/* Philosophy */
.company-split{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    border-top:1px solid var(--line);
}

.company-split.reverse{
    grid-template-columns:.95fr 1.05fr;
}

.company-image{
    min-height:620px;
    overflow:hidden;
    background:#eee;
}

.company-image img{
    width:100%;
    height:100%;
    min-height:620px;
    object-fit:cover;
    display:block;
    filter:saturate(.88) contrast(.98);
    transition:transform .8s ease;
}

.company-image:hover img{
    transform:scale(1.025);
}

.company-panel{
    min-height:620px;
    padding:clamp(36px,5vw,82px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:#fff;
}

.company-panel.dark{
    background:#111;
    color:#fff;
}

.company-panel h3{
    margin:0;
    font-size:clamp(2.2rem,4vw,5rem);
    line-height:.95;
    font-weight:300;
    letter-spacing:-.06em;
}

.company-panel h3.kr{
    font-family:"Noto Sans KR",sans-serif;
    line-height:1.08;
}

.company-panel p{
    margin:0;
    max-width:520px;
    font-family:"KoPubWorldDotum",sans-serif;
    font-size:.92rem;
    line-height:1.95;
    color:#666;
    font-weight:300;
}

.company-panel.dark p{
    color:#bbb;
}


/* Process */
.process-list{
    border-top:1px solid var(--line);
}

.process-row{
    display:grid;
    grid-template-columns:90px 1fr 1.2fr;
    align-items:center;
    min-height:115px;
    border-bottom:1px solid var(--line);
}

.process-no{
    font-size:.62rem;
    letter-spacing:.18em;
    color:#999;
}

.process-title{
    font-size:clamp(1.2rem,2vw,2rem);
    font-weight:300;
    letter-spacing:-.04em;
}

.process-copy{
    font-family:"KoPubWorldDotum",sans-serif;
    font-size:.82rem;
    line-height:1.8;
    color:#666;
}


/* ==============================
   COMPANY MOBILE
============================== */

@media(max-width:767.98px){

    .company-hero{
        min-height:auto;
    }

    .company-hero .inner{
        padding:70px 0 56px;
    }

    .company-hero h1{
        font-size:clamp(3rem,17vw,5.5rem);
    }

    .section-head{
        padding:60px 0 38px;
    }

    .section-head p{
        margin-left:0;
    }

    .company-split,
    .company-split.reverse{
        grid-template-columns:1fr;
    }

    .company-image,
    .company-image img{
        min-height:390px;
    }

    .company-panel{
        min-height:430px;
        padding:34px 22px;
    }

    .process-row{
        grid-template-columns:54px 1fr;
        padding:22px 0;
    }

    .process-copy{
        grid-column:2;
        margin-top:8px;
    }
}


/* ========================================
   CONTACT PAGE
======================================== */

/* Contact Layout */
.contact-wrap {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    border-bottom: 1px solid var(--line);
}


/* Left Image */
.contact-visual {
    min-height: 640px;
    overflow: hidden;
    background: #eee;
}

.contact-visual img {
    width: 100%;
    height: 100%;
    min-height: 640px;
    object-fit: cover;
    display: block;
    filter: saturate(.86) contrast(.98);
    transition: transform .8s ease;
}

.contact-visual:hover img {
    transform: scale(1.025);
}


/* Right Contact Information */
.contact-info {
    min-height: 640px;
    padding: clamp(40px, 5vw, 82px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #efeee9;
}

.contact-kicker {
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #888;
}

.contact-info h2 {
    margin: 18px 0 0;
    font-size: clamp(2.5rem, 4.8vw, 5.6rem);
    line-height: .92;
    font-weight: 300;
    letter-spacing: -.065em;
}


/* Address / Phone */
.contact-detail {
    font-family: "KoPubWorldDotum"f;
    font-size: clamp(.84rem, .95vw, .98rem);
    line-height: 2;
    color: #555;
    font-weight: 500;
}

.contact-detail .address {
    margin-bottom: 28px;
}


/* View Map */
.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.contact-link span {
    width: 40px;
    height: 40px;
    border: 1px solid #bbb;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease;
}

.contact-link:hover span {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: translate(3px, -3px);
}


/* ========================================
   NAVER MAP
======================================== */

.google-map-section{
  width:100%;
  padding:clamp(55px,1vw,90px) 0;
  background:#fff;
  border-top:1px solid var(--line);
}

.map-section-inner{
  width:100%;
  padding:0 clamp(18px,4vw,64px);
}

.map-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
}

.map-kicker{
  margin-bottom:12px;
  font-size:.62rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#999;
}

.map-section-head h2{
  margin:0;
  font-family:"Noto Sans KR",sans-serif;
  font-size:clamp(2rem,2.8vw,4rem);
  line-height:1;
  font-weight:300;
  letter-spacing:-.05em;
}

.map-address{
  max-width:420px;
  text-align:right;
  font-family:"Noto Sans KR",sans-serif;
  font-size:.82rem;
  line-height:1.8;
  color:#666;
  font-weight:300;
}

.map-divider{
  width:100%;
  height:1px;
  margin:28px 0 30px;
  background:var(--line);
}

.map-frame{
  position:relative;
  overflow:hidden;
  background:#eee;
  box-shadow:0 18px 50px rgba(0,0,0,.06);
}

.map-frame iframe{
  width:100%;
  height:460px;
  border:0;
  display:block;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767.98px) {

    .contact-wrap {
        grid-template-columns: 1fr;
    }

    .contact-visual,
    .contact-visual img {
        min-height: 380px;
    }

    .contact-info {
        min-height: 430px;
        padding: 36px 22px;
    }

    .google-map-section iframe {
        height: 340px;
    }
}

@media(max-width:767.98px){

  .google-map-section{
    padding:40px 0;
  }

  .map-section-inner{
    padding:0 15px;
  }

  .map-section-head{
    align-items:flex-start;
    flex-direction:column;
    gap:14px;
  }

  .map-address{
    text-align:left;
    font-size:.76rem;
  }

  .map-divider{
    margin:22px 0 24px;
  }

  .map-frame iframe{
    height:340px;
  }
}


#projectModal .modal-dialog {
    width: calc(100% - 2rem);
    max-width: 1200px;
    height: calc(100dvh - 2rem);
    margin: 1rem auto;
}

#projectModal .modal-content {
    height: 100%;
    overflow: hidden;
}

#projectModal .modal-body {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: #111;
}

#projectModal .project-swiper {
    width: 100%;
    height: 100%;
}

#projectModal .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

#projectModal .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#projectModal .swiper-button-prev,
#projectModal .swiper-button-next {
    color: #fff;
}

#projectModal .swiper-pagination-bullet {
    background: #fff;
}

#projectModal .swiper-pagination-bullet-active {
    opacity: 1;
}

@media (max-width: 575.98px) {
    #projectModal .modal-dialog {
        width: calc(100% - 1rem);
        height: calc(100dvh - 1rem);
        margin: .5rem auto;
    }
}