@import url('./design.css');
:root { color-scheme: dark; --page-gutter: clamp(24px,5vw,72px); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; font-family: 'Noto Sans KR', sans-serif; background: #080e17; }
h1,h2,h3,p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #80b7f2; outline-offset: 6px; }
a:hover { opacity: .85; }
.site { width: 100%; max-width: none; margin: 0; overflow: clip; }
main { width: 100%; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 12px 20px; background: #fff; color: #080e17; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
[data-pencil-name='Navigation'],#about,#vision,#contact,footer { padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
[data-pencil-name='Hero copy'] { left: var(--page-gutter); width: 54%; }
[data-pencil-name='첫 화면 · 사용자 촬영 도시 전경 / 하단 크롭'] { left: auto; right: 0; width: 54.167%; filter: none; }
[data-pencil-name='첫 화면 · 은은한 네이비 디밍'] { width: 100%; height: 100%; background-color: #080E1714; }
[data-pencil-name='Hero bottom'] { left: var(--page-gutter); width: calc(100% - 2 * var(--page-gutter)); height: auto; box-sizing: border-box; margin: 0; }
[data-pencil-name='Headline'] { font-size: clamp(32px,3.75vw,54px); line-height: 1.4; word-break: keep-all; }
[data-pencil-name='확정 E안 · 한옥과 도심 블루아워'] { isolation: isolate; }
[data-pencil-name='확정 E안 · 블루아워 색보정'] { width: 100%; height: 100%; }
[data-pencil-name='OUR MISSION'],[data-pencil-name='OUR VISION'],[data-pencil-name='Footer legal'] { width: 100%; height: auto; box-sizing: border-box; margin: 0; }
[data-pencil-name='OUR MISSION'],[data-pencil-name='OUR VISION'] { min-height: 241px; }
[data-pencil-name='OUR MISSION content'],[data-pencil-name='OUR VISION content'],[data-pencil-name='Company story'] { min-width: 0; }
[data-pencil-name='English 01'],[data-pencil-name='English 02'] { white-space: normal; line-height: 1.6; }
#about { background-color: #080e17; }
#about [data-pencil-name='About label'],#about [data-pencil-name='About Korean label'] { color: #93a8c2; }
#about [data-pencil-name='Introduction heading'] { color: #f1f3f7; }
#about [data-pencil-name='Founding story'] { color: #d1dae6; }
#about [data-pencil-name='Purpose'] { color: #adb9ca; }
.email-address { color: #324a65; font-size: 14px; text-underline-offset: 5px; text-decoration: underline; }
@media (max-width: 1050px) {
  [data-pencil-name='Introduction'] { gap: 48px; }
  [data-pencil-name='Introduction heading'] { font-size: 36px; line-height: 1.5; }
  [data-pencil-name='OUR MISSION index'],[data-pencil-name='OUR VISION index'] { width: 165px; }
  [data-pencil-name='OUR MISSION'],[data-pencil-name='OUR VISION'] { gap: 30px; }
  [data-pencil-name='Founding story'] br { display: none; }
  [data-pencil-name='Contact row'] { gap: 32px; }
  [data-pencil-name='Closing headline'] { font-size: 32px; line-height: 1.5; }
}
@media (max-width: 760px) {
  [data-pencil-name='Navigation'] { padding-top: 24px; padding-bottom: 22px; flex-wrap: wrap; gap: 24px; }
  [data-pencil-name='SPATIUM wordmark'] { font-size: 20px; letter-spacing: 5px; }
  [data-pencil-name='Navigation links'] { width: 100%; justify-content: space-between; gap: 14px; }
  [data-pencil-name='문의하기'] { padding: 8px 12px; gap: 8px; }
  #home { height: auto; display: flex; flex-direction: column; }
  [data-pencil-name='Hero copy'] { position: relative; left: auto; top: auto; width: 100%; padding: 40px var(--page-gutter) 32px; gap: 24px; }
  [data-pencil-name='Headline'] { font-size: clamp(28px,5.6vw,40px); letter-spacing: -1.3px; line-height: 1.5; }
  [data-pencil-name='Hero description'] { font-size: 15px; line-height: 1.9; }
  [data-pencil-name='첫 화면 · 사용자 촬영 도시 전경 / 하단 크롭'] { position: relative; order: 1; width: 100%; height: 330px; }
  [data-pencil-name='Image edge blend'] { width: 100%; height: 110px; background-image: linear-gradient(to bottom,#080e17,transparent); }
  [data-pencil-name='Hero bottom'] { position: relative; order: 2; left: auto; top: auto; width: auto; margin: 0 var(--page-gutter); padding: 24px 0; gap: 16px; flex-wrap: wrap; }
  [data-pencil-name='Brand promise'],[data-pencil-name='Scroll hint'] { font-size: 9px; letter-spacing: 1.5px; }
  #about,#vision { padding-top: 56px; padding-bottom: 56px; gap: 32px; }
  [data-pencil-name='Introduction'] { flex-direction: column; gap: 28px; }
  [data-pencil-name='Introduction heading'] { font-size: 32px; line-height: 1.5; }
  [data-pencil-name='Company story'] { flex: auto; }
  [data-pencil-name='Founding story'] { font-size: 17px; line-height: 1.85; }
  [data-pencil-name='Purpose'] { font-size: 15px; line-height: 1.9; }
  [data-pencil-name='확정 E안 · 한옥과 도심 블루아워'] { height: 280px; }
  [data-pencil-name='OUR MISSION'],[data-pencil-name='OUR VISION'] { flex-direction: column; gap: 24px; position: relative; padding-top: 28px; }
  [data-pencil-name='OUR MISSION content'],[data-pencil-name='OUR VISION content'] { gap: 20px; flex: auto; width: 100%; }
  [data-pencil-name='Statement 01'],[data-pencil-name='Statement 02'] { font-size: 31px; line-height: 1.45; }
  [data-pencil-name='Direction 01'],[data-pencil-name='Direction 02'] { position: absolute; right: 0; top: 24px; width: 24px; height: 24px; }
  #contact { padding-top: 56px; padding-bottom: 56px; gap: 26px; }
  [data-pencil-name='Contact row'] { flex-direction: column; align-items: flex-start; gap: 30px; }
  [data-pencil-name='Closing headline'] { font-size: 30px; white-space: normal; }
  footer { padding-top: 36px; padding-bottom: 30px; gap: 26px; }
  [data-pencil-name='Footer brand row'],[data-pencil-name='Footer legal'] { flex-direction: column; align-items: flex-start; gap: 20px; }
}
.language-switch { display: flex; align-items: center; gap: 4px; padding-left: 18px; border-left: 1px solid #334153; font: 12px Inter,sans-serif; letter-spacing: 1px; }
.language-switch a { padding: 10px 8px; color: #92a2b7; }
.language-switch a[aria-current='page'] { color: #f1f3f7; text-decoration: underline; text-underline-offset: 6px; }
html[lang='en'] [data-pencil-name='Headline'] { font-size: clamp(32px,3.65vw,52px); letter-spacing: -1.8px; }
html[lang='en'] [data-pencil-name='Introduction heading'] { font-size: clamp(30px,2.65vw,38px); line-height: 1.45; letter-spacing: -1px; }
html[lang='en'] [data-pencil-name='Closing headline'] { font-size: clamp(28px,2.65vw,38px); line-height: 1.45; letter-spacing: -1px; }
@media (max-width: 1050px) and (min-width: 761px) {
  [data-pencil-name='Navigation links'] { gap: 18px; }
  html[lang='en'] [data-pencil-name='Contact row'] { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .language-switch { padding-left: 8px; gap: 0; }
  .language-switch a { padding: 10px 6px; font-size: 11px; }
  html[lang='en'] [data-pencil-name='Headline'] { font-size: clamp(28px,6.6vw,40px); line-height: 1.4; letter-spacing: -1px; }
  html[lang='en'] [data-pencil-name='Statement 01'],html[lang='en'] [data-pencil-name='Statement 02'] { font-size: 29px; letter-spacing: -1px; }
  html[lang='en'] [data-pencil-name='Navigation links'] { gap: 8px; flex-wrap: wrap; }
  html[lang='en'] [data-pencil-name='Navigation links'] > a { font-size: 12px; }
}
.language-switch { display: flex; align-items: center; gap: 4px; font: 12px Inter, sans-serif; }
.language-switch a { padding: 8px; color: #91a0b3; }
.language-switch a[aria-current='page'] { color: #fff; box-shadow: inset 0 -1px #b2c5df; }
html[lang='en'] [data-pencil-name='Closing headline'] { white-space: normal; }
html[lang='en'] [data-pencil-name='Headline'] { letter-spacing: -1.5px; }
@media (max-width: 1050px) {
  [data-pencil-name='Navigation links'] { gap: 20px; }
}
@media (max-width: 760px) {
  [data-pencil-name='Navigation links'] { gap: 8px; flex-wrap: wrap; }
  html[lang='en'] [data-pencil-name='OUR MISSION content'],html[lang='en'] [data-pencil-name='OUR VISION content'] { overflow-wrap: anywhere; }
  html[lang='en'] [data-pencil-name='Statement 01'],html[lang='en'] [data-pencil-name='Statement 02'] { font-size: 28px; }
  html[lang='en'] [data-pencil-name='Contact button'] { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }