/* ================================================================
   건축사사무소 서울 / SEOUL Architects
   통합 스타일시트 — index.html + studio.html + projects.html
   Based on yuua.jp design system (exact computed values)
   ================================================================ */


/* ----------------------------------------------------------------
   0. RESET
   ---------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: none;
  box-sizing: border-box;
}

html {
  text-size-adjust: 100%;
}


/* ----------------------------------------------------------------
   1. BASE — 본문 타이포그래피
   font-family : "Zen Kaku Gothic New" (본문) / Inter (UI)
   font-size   : clamp(10px ~ 14px)
   color       : #000000
   ---------------------------------------------------------------- */
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: clamp(0.625rem, 0.181rem + 0.93vw, 0.875rem);
  font-weight: 400;
  color: #000000;
  line-height: 1.75;
  text-align: justify;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

a:link,
a:visited,
a:hover {
  text-decoration: none;
}

a {
  color: inherit;
}

img {
  width: 100%;
  display: block;
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}

button {
  border: 0;
  outline: none;
  font-size: 0;
  color: transparent;
  line-height: 0;
  background-color: transparent;
  cursor: pointer;
}

#en {
  text-align: left;
}


/* ----------------------------------------------------------------
   2. LOGO (#logo)
   position : fixed / left: 2% / top: 3%
   width    : 10.5%
   z-index  : 1002
   ---------------------------------------------------------------- */
#logo {
  width: 10.5%;
  min-width: 110px;
  position: fixed;
  left: 2%;
  top: 3%;
  z-index: 1002;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  color: #ffffff;
}

#logo a {
  color: #ffffff;
  display: block;
}

/* ----------------------------------------------------------------
   3. HEADER
   height    : ~63px (padding: 2% 0)
   position  : fixed / width: 100%
   background: transparent → 스크롤 시 black (::before slide-in)
   font      : Inter 500 / uppercase / 14px / #ffffff
   ---------------------------------------------------------------- */
header {
  width: 100%;
  padding: 2% 0;
  display: flex;
  align-items: center;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  position: fixed;
  z-index: 1001;
  color: #ffffff;
}

/* 스크롤 시 나타나는 검정 배경 (translate3d 슬라이드인) */
header::before {
  content: "";
  position: absolute;
  left: -10%;
  width: 120%;
  height: 100%;
  background: #000000;
  transform: translate3d(0, -100%, 0);
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 100px 0px;
  transition: transform 0.3s;
}

/* JS가 .sticky 클래스를 추가하면 배경 내려옴 */
header.sticky::before {
  transform: translate3d(0, 0, 0);
}

/* studio / projects 등 내부 페이지는 항상 배경 표시.
   배경이 검은색이므로 글씨는 흰색 유지 */
header.sticky {
  color: #ffffff;
}

header.sticky #gnav ul li a {
  color: #ffffff;
}

/* .top 클래스 (index 히어로에서 사용) */
header .top {
  opacity: 0;
}

/* #gnav */
header #gnav {
  width: 100%;
  padding: 0 8% 0 25%;
  transition: 0.3s;
}

header #gnav ul {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  color: #ffffff;
}

header #gnav ul li {
  line-height: 1;
}

header #gnav ul li a {
  transition: 0.5s;
  color: #ffffff;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
}

header #gnav ul li a:hover {
  opacity: 0.5;
}

/* 현재 페이지 메뉴 표시 */
header #gnav ul li a.nav-current {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* 슬라이드-인 애니메이션 (모바일 gnav open) */
header #gnav.visible {
  opacity: 1;
  transform: translate(0%, 0%);
}

header #gnav.visible ul {
  animation-name: slide;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

header #gnav.sticky {
  opacity: 1;
}


/* ----------------------------------------------------------------
   4. 모바일 햄버거 버튼 (#trigger)
   display: none → 1000px 이하에서 block
   width: 30px / height: 20px
   position: fixed / right: 6% / top: 3%
   z-index: 1002
   ---------------------------------------------------------------- */
#trigger {
  width: 30px;
  height: 20px;
  display: none;
  position: fixed;
  transition: 0.5s;
  right: 6%;
  top: 3%;
  z-index: 1002;
}

#trigger span {
  width: 30px;
  height: 2px;
  display: block;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  transition: 0.2s;
}

#trigger span:nth-of-type(1) { top: 0; }
#trigger span:nth-of-type(2) { top: 9px; }
#trigger span:nth-of-type(3) { bottom: 0; }

/* .open 상태 — X자 */
#trigger.open span:nth-of-type(1) {
  transform: translateY(8px) scale(0);
}
#trigger.open span:nth-of-type(2) {
  transform: rotate(-45deg);
}
#trigger.open span:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
}


/* ----------------------------------------------------------------
   5. MAIN — 공통 wrapper
   padding: 10% 15% 0  (computed: 122.5px 183.75px 0)
   ---------------------------------------------------------------- */
main {
  padding: 10% 15% 0;
}


/* ----------------------------------------------------------------
   6. .headline — 페이지 타이틀 / 섹션 헤딩
   font-family  : Inter
   font-size    : 2em (= 28px @14px base)
   font-weight  : 500
   letter-spacing: 0.12em (= 3.36px)
   text-transform: uppercase
   text-align   : center
   border-bottom: 2px solid #000
   padding-bottom: 2%  (≈17px)
   margin-bottom : 6%  (≈51px)
   ---------------------------------------------------------------- */
main .headline {
  font-family: Inter, sans-serif;
  font-size: 2em;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0 0 2%;
  margin: 0 0 6%;
  border-bottom: 2px solid #000000;
  color: #000000;
}


/* ----------------------------------------------------------------
   7. FOOTER
   padding: 0 15% 50px
   font: Zen Kaku Gothic New / 14px / #000
   ---------------------------------------------------------------- */
footer {
  padding: 0 15% 50px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  color: #000000;
}

footer #inner {
  padding: 50px 0;
  margin: 50px 0 0;
  border-top: 1px solid #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer #inner address {
  font-family: Inter, sans-serif;
  font-style: normal;
  line-height: 1;
  display: flex;
}

footer #inner address dl {
  display: flex;
  align-items: center;
}

/* 구분자 "|" */
footer #inner address dl:nth-child(1)::after,
footer #inner address dl:nth-child(2)::after {
  content: "|";
  padding: 0 15px;
}

footer #inner address dl:nth-child(2) a:hover {
  cursor: text;
}

footer #inner address dl dt {
  font-weight: 500;
  padding: 0 10px 0 0;
}

footer #inner address dl dd span {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

footer #inner address dl dd a {
  color: #000000;
}

/* SNS 아이콘 */
footer #inner #sns ul {
  display: flex;
  gap: 30px;
}

footer #inner #sns ul li {
  width: 25px;
  transition: 0.3s;
}

footer #inner #sns ul li:hover {
  opacity: 0.5;
}

footer #inner #sns ul li a {
  display: block;
}

footer #inner #sns ul li svg {
  width: 100%;
  height: auto;
  display: block;
}

/* 크레딧 */
footer #credit {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  color: #000000;
  padding-top: 20px;
}


/* ================================================================
   INDEX PAGE — 메인 페이지 전용
   ================================================================ */

/* ----------------------------------------------------------------
   9. #outline — 메인 콘텐츠 래퍼 (index only)
   padding-top: 100vh (슬라이더 아래 시작)
   padding-left/right: 15%
   ---------------------------------------------------------------- */
#outline {
  padding: 10% 15% 0;
}

/* ----------------------------------------------------------------
   10. #tagline — 메인 태그라인 섹션
   display: flex / space-between
   padding: 5% 0
   ---------------------------------------------------------------- */
#outline #tagline {
  display: flex;
  justify-content: space-between;
  padding: 5% 0;
}

/* h2: 좌측 29.4% 너비 / Inter 700 / 30px / uppercase / letter-spacing 0.07em */
#outline #tagline h2 {
  width: 29.4%;
  font-family: Inter, sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* h2 span: 한국어 부제 / Zen Kaku Gothic New / 20px / 500 */
#outline #tagline h2 span {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 2;
  display: block;
  letter-spacing: 0;
}

/* p: 우측 64.7% 너비 / 15px / line-height 2 */
#outline #tagline p {
  width: 64.7%;
  font-size: 15px;
  line-height: 2;
}

/* ----------------------------------------------------------------
   11. #outline #case — 메인 프로젝트 그리드
   ※ projects.html의 #case와 동일한 규칙 재사용
   ---------------------------------------------------------------- */
#outline #case {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: 80px;
}

#outline #case figure {
  position: relative;
  overflow: hidden;
}

#outline #case figure a {
  color: #ffffff;
  display: block;
}

#outline #case figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: all 0.3s;
}

#outline #case figure figcaption {
  width: 100%;
  height: 100%;
  padding: 0 5px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
  font-size: 1em;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  background-color: rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s;
  opacity: 0;
}

#outline #case figure:hover figcaption {
  opacity: 1;
}


/* ================================================================
   PROJECTS PAGE — projects.html 전용
   ================================================================ */

/* ----------------------------------------------------------------
   12. #item — 카테고리 필터 컨테이너
   display: flex / justify-content: center
   margin: 0 auto 6%
   font: Inter 500 / uppercase
   ---------------------------------------------------------------- */
#item {
  display: flex;
  justify-content: center;
  margin: 0 auto 6%;
  font-family: Inter, sans-serif;
  font-weight: 500;
  text-transform: uppercase;
}

/* 모바일 드롭다운 트리거 (데스크탑 숨김) */
#item div {
  display: none;
  font-size: 1.2em;
  text-align: center;
}

#item div span {
  display: inline-block;
  padding: 0 24px 0 0;
  margin: 0 0 10%;
  line-height: 1;
  position: relative;
  cursor: pointer;
}

/* 드롭다운 화살표 (::after) */
#item div span::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  right: 1px;
  top: 1px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
  transform: rotate(135deg);
  transition: 0.2s;
}

#item div span.open::after {
  transform: rotate(-45deg);
  top: 45%;
}

/* 필터 UL */
#item ul {
  display: flex;
  justify-content: center;
  gap: 40px;
}

#item ul li {
  line-height: 1;
  margin: 0 0 2px;
}

#item ul li span {
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  letter-spacing: 0.02em;
}

#item ul li span:hover {
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s;
}

/* current 상태 — 1px 밑줄 */
#item ul li span.current {
  border-bottom: 1px solid #000000;
}

#item ul li span.current:hover {
  cursor: auto;
  opacity: 1;
}

/* ----------------------------------------------------------------
   13. #case — 프로젝트 그리드 (projects.html)
   display: grid / repeat(3, 1fr) / gap: 50px
   ---------------------------------------------------------------- */
#case {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  line-height: 1;
  text-transform: uppercase;
}

#case figure {
  position: relative;
  overflow: hidden;
}

#case figure a {
  color: #ffffff;
  display: block;
}

/* 이미지: 1:1 비율 (원본 900×900) */
#case figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: all 0.3s;
}

/* figcaption — 호버 오버레이
   기본: opacity 0 / 호버 시: opacity 1
   배경: rgba(0,0,0,0.2) */
#case figure figcaption {
  width: 100%;
  height: 100%;
  padding: 0 5px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, sans-serif;
  font-size: 1em;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  line-height: 1.2;
  background-color: rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s;
  opacity: 0;
}

#case figure:hover figcaption {
  opacity: 1;
}


/* ================================================================
   STUDIO PAGE — studio.html 전용
   ================================================================ */

/* ----------------------------------------------------------------
   14. #outline (studio) — 개요 텍스트 섹션
   padding-bottom: 6%  (≈44px)
   ---------------------------------------------------------------- */
main > #outline {
  padding: 0 0 6%;
}

/* ----------------------------------------------------------------
   15. .photo — 사무소 사진 (full width)
   margin-bottom: 15%
   ---------------------------------------------------------------- */
.photo {
  margin: 0 0 15%;
}

.photo img {
  width: 100%;
  display: block;
}

/* ----------------------------------------------------------------
   16. #philosophy — 철학 그리드
   display: grid / repeat(3, 1fr) / gap: 6%
   text-align: center
   margin-bottom: 15%
   ---------------------------------------------------------------- */
#philosophy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6%;
  text-align: center;
  margin: 0 0 15%;
}

#philosophy div h3 {
  font-size: 1.6em;
  font-weight: 500;
  margin: 0 0 5%;
}

#philosophy div p {
  font-size: 14px;
  line-height: 2;
}

/* ----------------------------------------------------------------
   17. #team — 팀 멤버 섹션
   margin-bottom: 15%
   section: grid / repeat(3, 1fr) / gap: 6%
   ---------------------------------------------------------------- */
#team {
  margin: 0 0 15%;
}

#team section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6%;
  margin: 0 0 6%;
}

#team section:last-child {
  margin: 0;
}

#team section div span {
  text-transform: uppercase;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

#team section div h3 {
  font-size: 1.6em;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 8px;
}

#team section div p {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 12px;
}

#team section div dl {
  display: flex;
  line-height: 1.75;
}

#team section div dl dt {
  width: 20%;
  font-weight: 500;
  font-family: Inter, sans-serif;
}

#team section div dl dd {
  width: 80%;
}

/* ----------------------------------------------------------------
   18. #awards — 수상 이력
   margin-bottom: 13%
   dl: flex / line-height: 2.5
   dt: 8% / dd: 92%
   ---------------------------------------------------------------- */
#awards {
  margin: 0 0 13%;
}

#awards dl {
  display: flex;
  line-height: 2.5;
}

#awards dl dt {
  width: 8%;
  font-weight: 500;
  font-family: Inter, sans-serif;
}

#awards dl dd {
  width: 92%;
  text-align: left;
}

#awards dl dd span {
  display: block;
}

#awards dl dd a {
  color: #000000;
  margin: 0 0 0 10px;
}

#awards dl dd a::before {
  content: "> ";
}

#awards dl dd a.link {
  text-decoration: underline;
  margin: 0;
}

#awards dl dd a.link::before {
  content: none;
}

/* ----------------------------------------------------------------
   19. #service — 서비스 안내
   margin-bottom: 15%
   ---------------------------------------------------------------- */
#service {
  margin: 0 0 15%;
}

#service p {
  padding: 0 0 4%;
  line-height: 2;
}

#service p a {
  color: #000000;
  text-decoration: underline;
}

#service ul {
  padding: 0 0 4%;
}

#service ul li {
  text-indent: -1em;
  padding: 0 0 0 1em;
  line-height: 2;
}

#service ul li::before {
  content: "· ";
}

/* 워크플로우 그리드: repeat(3, 1fr) / gap: 6% */
#service #workflow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6%;
}

#service #workflow a {
  transition: 0.3s;
  display: block;
}

#service #workflow a:hover {
  opacity: 0.5;
}

/* ----------------------------------------------------------------
   20. #companyinfo — 회사 정보
   display: flex / space-between
   ---------------------------------------------------------------- */
#companyinfo {
  display: flex;
  justify-content: space-between;
  margin: 0 0 80px;
}

#companyinfo div:first-child {
  width: 65%;
}

#companyinfo div:first-child dl {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid #d9d9d9;
  padding: 10px 0;
}

#companyinfo div:first-child dl:last-child {
  border-bottom: none;
  padding: 10px 0 0;
}

#companyinfo div:first-child dl dt {
  width: 17%;
  font-weight: 500;
  line-height: 1.75;
  flex-shrink: 0;
}

#companyinfo div:first-child dl dd {
  width: 83%;
  text-align: left;
  line-height: 1.75;
}

#companyinfo div:first-child dl dd#list span {
  display: block;
}

#companyinfo div:last-child {
  width: 30%;
}

#companyinfo div:last-child img {
  width: 100%;
  display: block;
}


/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

/* 메뉴 슬라이드-인 (모바일 gnav) */
@keyframes slide {
  0%   { transform: translate(0, -80px); opacity: 0; }
  100% { transform: translate(0, 0);     opacity: 1; }
}

/* 팝업 배너 페이드-인 */
@keyframes banner {
  0%   { visibility: hidden; opacity: 0; }
  100% { visibility: visible; opacity: 1; }
}

/* 슬라이더 이미지 Ken Burns 효과 */
@-webkit-keyframes imageAnimation {
  0%       { opacity: 0; animation-timing-function: ease-in; }
  5.71429% { opacity: 1; }
  14.2857% { opacity: 1; }
  17.7143% { opacity: 0; animation-timing-function: ease-out;
              transform: scale(1.2) translateY(-4%); }
  100%     { opacity: 0; transform: scale(1.2) translateY(-4%); }
}

@keyframes imageAnimation {
  0%       { opacity: 0; animation-timing-function: ease-in; }
  5.71429% { opacity: 1; }
  14.2857% { opacity: 1; }
  17.7143% { opacity: 0; animation-timing-function: ease-out;
              transform: scale(1.2) translateY(-4%); }
  100%     { opacity: 0; transform: scale(1.2) translateY(-4%); }
}

/* 슬라이더 타이틀 애니메이션 */
@-webkit-keyframes titleAnimation {
  0%       { opacity: 0; transform: translateY(-200px); }
  5.71429% { opacity: 1; transform: translateY(0%); }
  14.2857% { opacity: 1; transform: translateY(0%); }
  16%      { opacity: 0; transform: scale(1.2) translateY(100%); }
  100%     { opacity: 0; }
}

@keyframes titleAnimation {
  0%       { opacity: 0; transform: translateY(-200px); }
  5.71429% { opacity: 1; transform: translateY(0%); }
  14.2857% { opacity: 1; transform: translateY(0%); }
  16%      { opacity: 0; transform: scale(1.2) translateY(100%); }
  100%     { opacity: 0; }
}


/* ================================================================
   RESPONSIVE — max-width: 1000px
   원본과 동일한 단일 브레이크포인트
   ================================================================ */
@media screen and (max-width: 1000px) {

  /* --- Base --- */
  body {
    font-size: 13px;
  }

  /* --- Logo --- */
  #logo {
    width: max(10%, 100px);
    left: 6%;
  }

  /* --- Header --- */
  header {
    padding: 6% 0;
    justify-content: flex-end;
  }

  /* 모바일: gnav = 풀스크린 오버레이 */
  header #gnav {
    width: 100%;
    height: 100%;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
    transform: translate(0%, -100%);
  }

  header #gnav.visible {
    transform: translate(0%, 0%);
    opacity: 1;
  }

  header #gnav ul {
    height: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    text-align: center;
  }

  header #gnav ul li {
    font-size: 120%;
  }

  /* 모바일에서 gnav 색상은 항상 흰색 (배경이 검정) */
  header #gnav ul li a,
  header.sticky #gnav ul li a {
    color: #ffffff;
  }

  /* --- Hamburger --- */
  #trigger {
    display: block;
  }

  /* --- Main wrapper --- */
  main {
    padding: 20% 6% 0;
  }

  main .headline {
    font-size: 1.5em;
    padding: 0 0 4%;
  }

  /* --- Index: #outline --- */
  #outline {
    padding: 20% 6% 0;
  }

  #outline #tagline {
    flex-direction: column;
    padding: 40px 0 30px;
  }

  #outline #tagline h2 {
    width: 100%;
    font-size: 26px;
    margin: 0 0 20px;
    line-height: 1.5;
  }

  #outline #tagline p {
    width: 100%;
    font-size: 13px;
  }

  /* Index 메인 그리드 모바일: 1열 */
  #outline #case {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }

  #outline #case figure figcaption {
    width: auto;
    height: auto;
    margin: 10px 0 0;
    position: relative;
    display: block;
    text-align: center;
    color: #000000;
    background: transparent;
    opacity: 1;
  }

  /* --- Projects: #item --- */
  #item {
    flex-direction: column;
    margin: 0 auto 4%;
  }

  #item div {
    display: block;
  }

  #item div span {
    margin: 0 0 4%;
  }

  #item ul {
    display: none;
    flex-direction: column;
    text-align: center;
    gap: 0;
  }

  #item ul li {
    margin: 0 0 5%;
  }

  /* --- Projects: #case 모바일 1열 --- */
  #case {
    grid-template-columns: repeat(1, 1fr);
    gap: 30px;
  }

  #case figure figcaption {
    width: auto;
    height: auto;
    margin: 10px 0 0;
    position: relative;
    display: block;
    text-align: center;
    color: #000000;
    background: transparent;
    opacity: 1;
  }

  /* --- Studio: #philosophy 모바일 1열 --- */
  #philosophy {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    text-align: left;
  }

  #philosophy div {
    margin: 0 0 5%;
  }

  #philosophy div:last-child {
    margin: 0;
  }

  #philosophy div h3 {
    font-size: 1.2em;
    margin: 0 0 1%;
  }

  #philosophy div p br {
    display: none;
  }

  /* --- Studio: #team 모바일 1열 --- */
  #team section {
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
    margin: 0 0 5%;
  }

  #team section div {
    margin: 0 0 5%;
  }

  #team section div:last-child {
    margin: 0;
  }

  #team section div h3 {
    font-size: 1.2em;
  }

  #team section div dl dt {
    width: 15%;
  }

  #team section div dl dd {
    width: 85%;
  }

  /* --- Studio: #awards 모바일 --- */
  #awards dl {
    line-height: 1.75;
    margin: 0 0 5%;
  }

  #awards dl:last-child {
    margin: 0;
  }

  #awards dl dt {
    width: 12%;
  }

  #awards dl dd {
    width: 88%;
  }

  #awards dl dd span {
    display: block;
    margin: 0 0 2%;
  }

  #awards dl dd a {
    display: block;
    margin: 0;
  }

  /* --- Studio: #service 모바일 --- */
  #service p {
    padding: 0 0 6%;
  }

  #service ul {
    padding: 0 0 6%;
  }

  #service #workflow {
    display: block;
    width: 200px;
    margin: auto;
  }

  /* --- Studio: #companyinfo 모바일 --- */
  #companyinfo {
    flex-direction: column-reverse;
  }

  #companyinfo div:first-child {
    width: 100%;
  }

  #companyinfo div:first-child dl dt {
    width: 20%;
  }

  #companyinfo div:first-child dl dd {
    width: 80%;
  }

  #companyinfo div:last-child {
    width: 100%;
    margin-bottom: 30px;
  }

  /* --- Footer 모바일 (이전 메시지에서 잘린 부분 보강) --- */
  footer #inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  footer #inner address {
    flex-direction: column;
    gap: 15px;
  }

  footer #inner address dl:nth-child(1)::after,
  footer #inner address dl:nth-child(2)::after {
    content: none;
    padding: 0;
  }

  footer #inner #sns ul {
    gap: 20px;
  }

  footer #credit {
    font-size: 10px;
  }
}
/* === end of @media === */