:root {
  --sidebar: 258px;
  --ink: #171717;
  --muted: #777;
}

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Regular.woff2") format("woff2");
    font-weight: 400;
}

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Medium.woff2") format("woff2");
    font-weight: 500;
}

@font-face {
    font-family: "Satoshi";
    src: url("fonts/Satoshi-Bold.woff2") format("woff2");
    font-weight: 700;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: Arial, "Noto Sans KR", sans-serif; }
button, a { color: inherit; }
button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-shell { min-height: 100svh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: relative; z-index: 10; min-height: 100svh; padding: 54px 31px 28px; display: flex; flex-direction: column; background: #fff; }
.brand { display: flex; align-items: flex-end; gap: 8px; text-decoration: none; width: fit-content; }
.brand strong { font-family: Georgia, "Times New Roman", serif; font-size: 27px; letter-spacing: -3px; line-height: .95; }
.brand span { font-size: 7px; line-height: 1.05; letter-spacing: -.1px; }
.main-nav { margin-top: 105px; display: flex; flex-direction: column; align-items: flex-end; gap: 25px; }
.main-nav a { position: relative; font-size: 12px; font-weight: 400; color: #777; text-decoration: none; transition: color .25s ease; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px; background: #111; transition: width .25s ease; }
.main-nav a:hover, .main-nav a:focus-visible { color: #111; }
.main-nav a:hover::after, .main-nav a:focus-visible::after { width: 100%; }
.copyright { margin: auto 0 0; color: #aaa; font-size: 8px; line-height: 1.5; }
.menu-toggle { display: none; }
.menu-toggle{ position:relative; z-index:30;}

/* ===========================
   PROJECT GRID
=========================== */

.project-grid{
    min-width:0;
    min-height:100svh;

    display:grid;
    grid-template-columns:repeat(3,minmax(280px,1fr));

    gap:55px 42px;

    padding:60px;

    align-content:start;

    background:#fff;
}

.project-card{
    display:block;
    text-decoration:none;
    color:#171717;
}

.project-card:hover{
    cursor:pointer;
}

.thumb{
    overflow:hidden;
    background:#f2f2f2;
}

.thumb img{
    display:block;
    width:100%;
    aspect-ratio:5 / 4;
    object-fit:cover;
    transition:.45s ease;
}

.project-card:hover img{
    transform:scale(1.03);
}

.project-text{
    margin-top:16px;
}

.project-text h3{
    font-family: Arial,"Noto Sans KR",sans-serif;
    font-size:18px;
    font-weight:400;
    letter-spacing:-0.02em;
}

.project-text p{
    margin-top:3px;
    color:#777;
    font-size:12px;
    letter-spacing:.01em;
    text-transform:uppercase;
}

body{
    font-family:"Satoshi","Noto Sans KR",sans-serif;
}

.brand strong{
    font-family:"Satoshi",sans-serif;
    font-weight:500;
    letter-spacing:-0.06em;
}

@media (max-width: 760px) {
  .site-shell { display: block; }
  .sidebar { position: fixed; inset: 0 0 auto; min-height: 0; height: 76px; padding: 0 22px; flex-direction: row; align-items: center; justify-content: space-between; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); }
  .brand strong { font-size: 24px; }
  .menu-toggle { display: grid; gap: 4px; padding: 10px 4px; border: 0; background: transparent; cursor: pointer; }
  .menu-toggle > span:not(.sr-only) { width: 23px; height: 1px; background: #111; transition: transform .25s, opacity .25s; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .main-nav { position: fixed; z-index: 20; inset: 76px 0 auto; margin: 0; padding: 38px 25px 44px; align-items: center; gap: 28px; background: rgba(255,255,255,.97); transform: translateY(-130%); opacity: 0; transition: transform .32s ease, opacity .25s ease; }
  .main-nav.is-open { transform: translateY(0); opacity: 1; }
  .main-nav a { font-size: 13px; }
  .copyright { display: none; }
  .hero { min-height: 100svh; }
  .project-info { left: 23px; bottom: 92px; }
  .project-info h1 { font-size: clamp(35px, 11vw, 54px); }
  .slider-controls { right: 20px; bottom: 27px; }
}

.project-slider{
    width:100%;
    height:calc(100vh - 120px);
}

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

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

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

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

.project-detail{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:50px;
    padding:60px;
    height:100vh;
}

.project-meta{
    align-self:end;
    padding-bottom:20px;
}

.project-meta{
    font-size:12px;
    line-height:1.8;
}


.project-meta h1{
    font-size:16px;
    font-weight:500;
    margin-bottom:40px;
}


.project-slider{
    width:100%;
    height:calc(100vh - 120px);
}


.project-slider img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.about-page{
    padding:80px 100px;
}

.about-intro{
    max-width:100%;
    padding-top:30px;
    margin-bottom:60px;
}

.about-intro p{
    font-size:15px;
    line-height:2.2;
    letter-spacing:-0.02em;
    color:#555;
}


.about-history{
    max-width:850px;
}


.about-history h2{
    font-size:11px;
    font-weight:400;
    letter-spacing:.15em;
    color:#888;
    margin-bottom:45px;
}


.history-item{
    display:grid;
    grid-template-columns:120px 1fr;
    padding:18px 0;
    border-bottom:1px solid #ededed;

    font-size:13px;
}


.history-item span{
    color:#999;
}


.history-item p{
    margin:0;
    color:#555;
}


.history-item{
    display:grid;
    grid-template-columns:100px 1fr;
    padding:14px 0;
    border-bottom:1px solid #eee;
    font-size:13px;
}


.history-item span{
    color:#888;
}


.history-item p{
    margin:0;
}

.contact-page{
    padding:80px;
}

.contact-content{
    max-width:500px;
}


.contact-content h1{
    font-size:12px;
    font-weight:400;
    margin-bottom:80px;
}


.contact-info{
    font-size:14px;
    line-height:2.2;
    color:#555;
}


.contact-info p{
    margin:0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* ===========================
   RESPONSIVE FIX
=========================== */


/* Tablet */
@media (max-width: 1024px) {

    :root {
        --sidebar: 220px;
    }


    .project-grid {
        grid-template-columns: repeat(2, minmax(220px,1fr));
        gap: 40px 30px;
        padding: 40px;
    }


    .project-detail {
        grid-template-columns: 220px 1fr;
        gap: 30px;
        padding: 40px;
    }


    .about-page {
        padding: 60px;
    }


    .contact-page {
        padding: 60px;
    }

}


/* Mobile */
@media (max-width:760px){


    /* 전체 레이아웃 */
    .site-shell{
        display:block;
    }


    /* 프로젝트 리스트 */
    .project-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:35px;

        padding:95px 22px 40px;

    }


    .project-card{
        width:100%;
    }


    .thumb img{
        aspect-ratio:4 / 3;
    }


    .project-text{
        margin-top:12px;
    }


    .project-text h3{
        font-size:16px;
    }


    /* 상세 페이지 */

    .project-detail{

        display:flex;

        flex-direction:column;

        height:auto;

        padding:100px 22px 40px;

        gap:30px;

    }


    .project-meta{

        order:2;

    }


    .project-meta h1{

        margin-bottom:20px;

    }


    .project-slider{

        order:1;

        height:auto;

        aspect-ratio:4 / 3;

    }


    .project-slider .swiper{

        height:100%;

    }


    .swiper-slide img{

        object-fit:contain;

    }


    /* ABOUT */

    .about-page{

        padding:110px 22px 50px;

    }


    .about-intro{

        padding-top:0;

        margin-bottom:40px;

    }


    .about-intro p{

        font-size:14px;

        line-height:2;

    }


    .history-item{

        grid-template-columns:80px 1fr;

        font-size:12px;

        gap:10px;

    }


    /* CONTACT */

    .contact-page{

        padding:110px 22px 50px;

    }


    .contact-content{

        max-width:none;

    }


    .contact-content h1{

        margin-bottom:50px;

    }


    .contact-info{

        font-size:13px;

    }


}


/* 작은 모바일 */
@media(max-width:420px){


    .brand strong{

        font-size:22px;

    }


    .project-grid{

        padding-left:18px;

        padding-right:18px;

    }


    .project-text h3{

        font-size:15px;

    }


}