/* ================================
   RESET
================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



/* ================================
   COLORS / FONT
================================ */

:root {

  --background: #eee9df;

  --text: #30271f;

  --line: rgba(48, 39, 31, 0.18);

  --accent: #9a5c3f;

  --serif-en: "Noto Serif", serif;

  --serif-ko: "Noto Serif KR", serif;

  --sans: "Pretendard", sans-serif;
}



/* ================================
   BASIC
================================ */

html {
  scroll-behavior: smooth;
}


body {

  min-height: 100vh;

  color: var(--text);

  font-family: var(--sans);

  background-color: var(--background);

  background-image:

    linear-gradient(
      rgba(238, 233, 223, 0.38),
      rgba(238, 233, 223, 0.38)
    ),

    url("images/paper-texture.jpg");


  background-size:
    cover,
    900px auto;


  background-repeat:
    repeat,
    repeat;


  background-position:
    center,
    top left;


  background-attachment:
    fixed,
    fixed;

}


a {
  color: inherit;
  text-decoration: none;
}



/* ================================
   HEADER
================================ */

.header {

  height: 82px;

  padding:
    0
    5vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--line);

}



/* LOGO */

.logo {

  font-family:
    var(--serif-en);

  font-size:
    20px;

  font-weight:
    500;

  letter-spacing:
    -0.01em;

}



/* NAV */

nav {

  display: flex;

  gap: 42px;

}


nav a {

  font-family:
    var(--serif-en);

  font-size:
    13px;

  font-weight:
    500;

  letter-spacing:
    0.1em;

  transition:
    opacity
    0.25s ease;

}


nav a:hover {

  opacity:
    0.5;

}



/* ================================
   HERO
================================ */

.hero {

  min-height:
    calc(100vh - 82px);

  padding:

    7vh
    5vw
    5vh;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  border-bottom:
    1px solid
    var(--line);

}



.hero h1 {

  font-family:
    var(--serif-en);

  font-size:
    clamp(
      100px,
      15vw,
      245px
    );

  font-weight:
    700;

  line-height:
    0.9;

  letter-spacing:
    -0.055em;

}



.hero-bottom {

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

}



.designer {

  font-family:
    var(--serif-ko);

  font-size:
    18px;

  font-weight:
    500;

  line-height:
    1.65;

}



.scroll-button {

  width:
    52px;

  height:
    52px;

  border:
    1px solid
    var(--text);

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-family:
    var(--serif-en);

  font-size:
    23px;

  transition:

    background
    0.25s ease,

    color
    0.25s ease,

    transform
    0.25s ease;

}


.scroll-button:hover {

  background:
    var(--text);

  color:
    var(--background);

  transform:
    translateY(3px);

}



/* ================================
   COMMON SECTION
================================ */

.work,
.about {

  padding:

    100px
    5vw
    150px;

}



.section-heading {

  border-top:
    1px solid
    var(--line);

  padding-top:
    20px;

  margin-bottom:
    45px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    40px;

}



.section-title {

  display:
    flex;

  align-items:
    baseline;

  gap:
    25px;

}


.section-title span {

  font-family:
    var(--serif-en);

  color:
    var(--accent);

  font-size:
    22px;

  font-weight:
    500;

}


.section-title h2 {

  font-family:
    var(--serif-en);

  font-size:
    36px;

  font-weight:
    500;

}



/* ================================
   FILTER BUTTONS
================================ */

.filters {

  display:
    flex;

  gap:
    12px;

}


.filter {

  min-width:
    112px;

  padding:

    12px
    24px;

  border:

    1px solid
    rgba(
      48,
      39,
      31,
      0.32
    );

  background:
    rgba(
      238,
      233,
      223,
      0.18
    );

  color:
    var(--text);

  font-family:
    var(--serif-en);

  font-size:
    16px;

  font-weight:
    500;

  cursor:
    pointer;

  transition:

    background
    0.25s ease,

    color
    0.25s ease,

    border
    0.25s ease;

}


.filter:hover {

  background:

    rgba(
      48,
      39,
      31,
      0.07
    );

}


.filter.active {

  background:
    var(--text);

  color:
    var(--background);

  border-color:
    var(--text);

}



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

.project-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:

    55px
    22px;

}



.project {

  cursor:
    pointer;

}



.project-image {

  overflow:
    hidden;

  background:
    #ded7ca;

  aspect-ratio:
    4 / 3;

}


.project-image img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform
    0.55s ease;

}


.project:hover img {

  transform:
    scale(1.025);

}



.project-info {

  margin-top:
    13px;

  display:
    grid;

  grid-template-columns:
    1fr auto;

  align-items:
    start;

  gap:
    15px;

}


.project-title {

  font-family:
    var(--serif-en);

  font-size:
    18px;

  font-weight:
    500;

}


.project-meta {

  font-family:
    var(--serif-en);

  font-size:
    12px;

  text-align:
    right;

  line-height:
    1.5;

  opacity:
    0.55;

}



/* ================================
   ABOUT
================================ */

.about {

  padding-bottom:
    170px;

}


/*
사진 : 텍스트 비율

약 45 : 55
*/

.about-layout {

  display:
    grid;

  grid-template-columns:
    minmax(340px, 0.9fr)
    minmax(420px, 1.1fr);

  gap:
    clamp(50px, 7vw, 120px);

  align-items:
    center;

  padding-top:
    25px;

}



/* PROFILE PHOTO */

.about-photo {

  width:
    100%;

  overflow:
    hidden;

}


.about-photo img {

  width:
    100%;

  height:
    auto;

  display:
    block;

}



/* ABOUT COPY */

.about-copy {

  max-width:
    720px;

}



.about-label {

  margin-bottom:
    32px;

  color:
    var(--accent);

  font-family:
    var(--serif-en);

  font-size:
    11px;

  font-weight:
    500;

  letter-spacing:
    0.16em;

}



.about-title {

  margin-bottom:
    48px;

  font-family:
    var(--serif-ko);

  font-size:
    clamp(
      34px,
      3.6vw,
      58px
    );

  font-weight:
    600;

  line-height:
    1.45;

  letter-spacing:
    -0.045em;

}



.about-description {

  max-width:
    610px;

  font-family:
    var(--serif-ko);

  font-size:
    15px;

  font-weight:
    400;

  line-height:
    2;

  word-break:
    keep-all;

}


.about-description p {

  margin-bottom:
    22px;

}



.about-keywords {

  margin-top:
    50px;

  padding-top:
    18px;

  border-top:
    1px solid
    var(--line);

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    12px 30px;

}


.about-keywords span {

  font-family:
    var(--serif-en);

  font-size:
    11px;

  font-weight:
    500;

  letter-spacing:
    0.1em;

}



/* ================================
   FOOTER
================================ */

footer {

  padding:

    110px
    5vw
    35px;

  background:
    var(--text);

  color:
    var(--background);

}


.footer-small {

  font-family:
    var(--serif-en);

  font-size:
    14px;

  margin-bottom:
    65px;

}


footer h2 {

  font-family:
    var(--serif-en);

  font-size:

    clamp(
      70px,
      11vw,
      170px
    );

  font-weight:
    500;

  line-height:
    0.9;

}


footer h2 em {

  color:
    #b97453;

  font-style:
    italic;

  font-weight:
    500;

}



.footer-bottom {

  margin-top:
    150px;

  padding-top:
    20px;

  border-top:

    1px solid
    rgba(
      255,
      255,
      255,
      0.2
    );

  display:
    flex;

  justify-content:
    space-between;

  font-family:
    var(--serif-en);

  font-size:
    12px;

}



/* ================================
   TABLET
================================ */

@media
(max-width: 900px) {


  .hero h1 {

    font-size:
      17vw;

  }


  .project-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .section-heading {

    align-items:
      flex-start;

    flex-direction:
      column;

  }


  .about-layout {

    grid-template-columns:
      1fr;

    gap:
      60px;

  }


  .about-photo {

    max-width:
      620px;

  }


  .about-copy {

    max-width:
      700px;

  }

}



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

@media
(max-width: 600px) {


  .header {

    height:
      65px;

    padding:

      0
      20px;

  }


  nav {

    gap:
      14px;

  }


  nav a {

    font-size:
      10px;

  }


  .logo {

    font-size:
      16px;

  }


  .hero {

    min-height:
      72vh;

    padding:

      55px
      20px
      35px;

  }


  .hero h1 {

    font-size:
      19vw;

    letter-spacing:
      -0.045em;

  }


  .designer {

    font-size:
      14px;

  }


  .scroll-button {

    width:
      43px;

    height:
      43px;

  }


  .work,
  .about {

    padding:

      80px
      20px
      100px;

  }


  .filters {

    width:
      100%;

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        1fr
      );

  }


  .filter {

    width:
      100%;

    min-width:
      0;

  }


  .project-grid {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .section-title h2 {

    font-size:
      30px;

  }


  /* ABOUT MOBILE */

  .about-layout {

    display:
      flex;

    flex-direction:
      column;

    gap:
      45px;

    padding-top:
      10px;

  }


  .about-photo {

    width:
      100%;

  }


  .about-title {

    font-size:
      32px;

    margin-bottom:
      35px;

  }


  .about-description {

    font-size:
      14px;

    line-height:
      1.9;

  }


  .about-keywords {

    margin-top:
      40px;

    gap:
      12px 20px;

  }

}/* =================================
   PROJECT GRID — PORTFOLIO UPDATE
================================= */

.project-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: start;

  gap:
    70px
    24px;
}


/* 각 작업물 */

.project {
  min-width: 0;

  cursor: pointer;
}


/* 이미지 영역 */

.project-image {
  width: 100%;

  aspect-ratio:
    var(--project-ratio, 4 / 3);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(255, 255, 255, 0.26);

  border:
    1px solid
    rgba(48, 39, 31, 0.06);
}


/* 실제 작업물 */

.project-image img {
  width: 100%;
  height: 100%;

  display: block;

  transition:
    transform 0.55s ease;

}


/* 마우스 올렸을 때 */

.project:hover
.project-image img {
  transform:
    scale(1.018);
}


/* 작업 이름 */

.project-info {
  margin-top: 14px;

  padding-top: 2px;

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 20px;
}


.project-title {
  font-family:
    var(--serif-ko);

  font-size: 16px;

  font-weight: 500;

  line-height: 1.5;
}


/* Print / Digital / Branding */

.project-meta {
  flex-shrink: 0;

  font-family:
    var(--serif-en);

  font-size: 11px;

  font-weight: 500;

  letter-spacing: 0.04em;

  opacity: 0.48;
}



/* =================================
   TABLET
================================= */

@media (max-width: 900px) {

  .project-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      55px
      18px;
  }

}



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

@media (max-width: 600px) {

  .project-grid {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }

}
/* =================================
   CONTACT
================================= */

footer {
  padding:
    60px
    5vw
    35px;

  background:
    var(--text);

  color:
    var(--background);
}


/* 03 CONTACT */

.contact-heading {

  padding-bottom:
    22px;

  border-bottom:
    1px solid
    rgba(238, 233, 223, 0.22);

  display:
    flex;

  align-items:
    baseline;

  gap:
    25px;

}


.contact-number {

  color:
    #b97453;

  font-family:
    var(--serif-en);

  font-size:
    22px;

}


.contact-label {

  font-family:
    var(--serif-en);

  font-size:
    32px;

}



/* MAIN MESSAGE */

.contact-main {

  padding:
    90px
    0
    80px;

  display:
    grid;

  grid-template-columns:
    1fr
    280px;

  gap:
    80px;

  align-items:
    end;

}


.contact-main h2 {

  font-family:
    var(--serif-en);

  font-size:
    clamp(
      65px,
      8vw,
      135px
    );

  font-weight:
    500;

  line-height:
    0.95;

  letter-spacing:
    -0.045em;

}


.contact-main h2 em {

  color:
    #b97453;

  font-weight:
    500;

  font-style:
    italic;

}


.contact-intro {

  padding-bottom:
    10px;

  font-family:
    var(--serif-ko);

  font-size:
    14px;

  line-height:
    1.9;

  opacity:
    0.75;

}



/* CONTACT LINKS */

.contact-links {

  border-top:
    1px solid
    rgba(238, 233, 223, 0.22);

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

}


.contact-item {

  min-height:
    170px;

  padding:
    35px
    0;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    25px;

}


.contact-item:first-child {

  padding-right:
    45px;

  border-right:
    1px solid
    rgba(238, 233, 223, 0.22);

}


.contact-item:last-child {

  padding-left:
    45px;

}



/* ICON */

.contact-icon {

  width:
    44px;

  height:
    44px;

  flex-shrink:
    0;

  border:
    1px solid
    rgba(238, 233, 223, 0.55);

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

}


.contact-icon svg {

  width:
    20px;

  height:
    20px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.4;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


/* 카카오 말풍선만 채우기 */

.contact-item:first-child
.contact-icon svg {

  fill:
    currentColor;

  stroke:
    none;

}



/* CONTACT TEXT */

.contact-info {

  display:
    flex;

  flex-direction:
    column;

  gap:
    13px;

}


.contact-type {

  font-family:
    var(--serif-en);

  font-size:
    12px;

  letter-spacing:
    0.1em;

  opacity:
    0.55;

}


.contact-info p {

  font-family:
    var(--serif-ko);

  font-size:
    15px;

  font-weight:
    400;

  line-height:
    1.8;

}


.contact-info strong {

  font-weight:
    600;

}



/* EMAIL HOVER */

a.contact-item {

  transition:
    opacity
    0.25s ease;

}


a.contact-item:hover {

  opacity:
    0.6;

}



/* FOOTER BOTTOM */

.footer-bottom {

  margin-top:
    90px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(238, 233, 223, 0.22);

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  font-family:
    var(--serif-en);

  font-size:
    11px;

}


.footer-bottom > div {

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

}


.footer-logo {

  font-size:
    16px;

}


.footer-role {

  opacity:
    0.45;

}



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

@media (max-width: 700px) {

  .contact-main {

    padding:
      65px
      0;

    grid-template-columns:
      1fr;

    gap:
      40px;

  }


  .contact-main h2 {

    font-size:
      14vw;

  }


  .contact-links {

    grid-template-columns:
      1fr;

  }


  .contact-item {

    min-height:
      auto;

    padding:
      30px
      0;

  }


  .contact-item:first-child {

    padding-right:
      0;

    border-right:
      none;

    border-bottom:
      1px solid
      rgba(238, 233, 223, 0.22);

  }


  .contact-item:last-child {

    padding-left:
      0;

  }


  .footer-bottom {

    margin-top:
      60px;

  }

}
/* =================================
   PROJECT HOVER
================================= */

.project-image {
  position: relative;
}


.project-hover {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    rgba(48, 39, 31, 0);

  color:
    #f3eee5;

  opacity: 0;

  transition:
    background 0.3s ease,
    opacity 0.3s ease;

}


.project-hover span {

  padding:
    10px
    18px;

  border:
    1px solid
    rgba(255,255,255,0.65);

  font-family:
    var(--serif-en);

  font-size:
    11px;

  letter-spacing:
    0.12em;

  transform:
    translateY(8px);

  transition:
    transform 0.3s ease;

}


.project:hover
.project-hover {

  opacity: 1;

  background:
    rgba(48, 39, 31, 0.25);

}


.project:hover
.project-hover span {

  transform:
    translateY(0);

}



/* =================================
   MODAL
================================= */

.modal-open {
  overflow: hidden;
}


.project-modal {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    40px;

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;

}


.project-modal.active {

  opacity: 1;

  visibility: visible;

}



/* BACKDROP */

.project-modal-backdrop {

  position: absolute;

  inset: 0;

  background:
    rgba(30, 24, 20, 0.72);

  backdrop-filter:
    blur(6px);

}



/* CONTENT */

.project-modal-content {

  position: relative;

  z-index: 1;

  width:
    min(1100px, 92vw);

  max-height:
    90vh;

  overflow-y: auto;

  background:
    #eee9df;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,0.25);

  transform:
    translateY(20px)
    scale(0.98);

  transition:
    transform 0.3s ease;

}


.project-modal.active
.project-modal-content {

  transform:
    translateY(0)
    scale(1);

}



/* CLOSE */

.project-modal-close {

  position: absolute;

  top: 18px;

  right: 20px;

  z-index: 2;

  width:
    42px;

  height:
    42px;

  border:
    1px solid
    rgba(48,39,31,0.25);

  border-radius:
    50%;

  background:
    rgba(238,233,223,0.9);

  color:
    var(--text);

  font-family:
    var(--serif-en);

  font-size:
    26px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    background 0.25s ease,
    color 0.25s ease;

}


.project-modal-close:hover {

  background:
    var(--text);

  color:
    var(--background);

}



/* IMAGE */

.project-modal-image-wrap {

  width:
    100%;

  min-height:
    360px;

  max-height:
    70vh;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background:
    #ddd7cc;

}


.project-modal-image {

  max-width:
    100%;

  max-height:
    70vh;

  width:
    auto;

  height:
    auto;

  display: block;

  object-fit:
    contain;

}



/* INFO */

.project-modal-info {

  padding:
    28px
    32px
    34px;

}


.project-modal-category {

  margin-bottom:
    8px;

  color:
    var(--accent);

  font-family:
    var(--serif-en);

  font-size:
    11px;

  letter-spacing:
    0.12em;

}


.project-modal-title {

  font-family:
    var(--serif-ko);

  font-size:
    26px;

  font-weight:
    600;

  line-height:
    1.4;

}



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

@media (max-width: 600px) {

  .project-modal {

    padding:
      16px;

  }


  .project-modal-content {

    width:
      100%;

    max-height:
      92vh;

  }


  .project-modal-image-wrap {

    min-height:
      250px;

  }


  .project-modal-info {

    padding:
      22px
      20px
      28px;

  }


  .project-modal-title {

    font-size:
      22px;

  }


  .project-modal-close {

    top:
      12px;

    right:
      12px;

    width:
      38px;

    height:
      38px;

  }

}
/* =================================
   PROJECT DETAIL MODAL V2
================================= */

.project-modal-content {

  position: relative;

  z-index: 1;

  width:
    min(1200px, 94vw);

  max-height:
    92vh;

  overflow-y:
    auto;

  background:
    #eee9df;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,0.28);

}



/* HEADER */

.project-modal-header {

  position:
    sticky;

  top:
    0;

  z-index:
    3;

  padding:
    28px
    80px
    28px
    34px;

  background:
    rgba(238,233,223,0.95);

  backdrop-filter:
    blur(8px);

  border-bottom:
    1px solid
    rgba(48,39,31,0.15);

}



.project-modal-category {

  margin-bottom:
    8px;

  color:
    var(--accent);

  font-family:
    var(--serif-en);

  font-size:
    11px;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}



.project-modal-title {

  font-family:
    var(--serif-ko);

  font-size:
    28px;

  font-weight:
    600;

  line-height:
    1.4;

}



/* GALLERY */

.project-modal-gallery {

  padding:
    30px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    24px;

}



/* EACH IMAGE */

.modal-gallery-item {

  width:
    100%;

  margin:
    0;

  background:
    rgba(255,255,255,0.25);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

}



.modal-gallery-item img {

  width:
    100%;

  height:
    auto;

  display:
    block;

  object-fit:
    contain;

}



/* CLOSE BUTTON */

.project-modal-close {

  position:
    sticky;

  float:
    right;

  top:
    18px;

  margin-right:
    18px;

  margin-top:
    18px;

  z-index:
    10;

}



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

@media (max-width: 600px) {

  .project-modal {

    padding:
      10px;

  }


  .project-modal-content {

    width:
      100%;

    max-height:
      95vh;

  }


  .project-modal-header {

    padding:
      22px
      65px
      22px
      20px;

  }


  .project-modal-title {

    font-size:
      22px;

  }


  .project-modal-gallery {

    padding:
      14px;

    gap:
      14px;

  }

}