:root{--ink:#13251f;--cream:#f2eee5;--acid:#d9f268;--muted:#66736e;--white:#fff;--line:rgba(19,37,31,.18)}
.header-right{display:flex;align-items:center;gap:32px}.language-switch{display:flex;align-items:center;gap:5px;border-left:1px solid var(--line);padding-left:22px}.language-switch span{font-size:10px;color:#93a09a}.lang-button{appearance:none;border:0;background:transparent;padding:4px 2px;color:#87938e;font:600 10px/1 "DM Sans",sans-serif;letter-spacing:.08em;cursor:pointer}.lang-button.active{color:var(--ink);text-decoration:underline;text-underline-offset:4px}.lang-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans","Noto Sans KR",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}.header{height:86px;padding:0 clamp(22px,4.5vw,76px);display:flex;align-items:center;justify-content:space-between;background:var(--cream);position:relative;z-index:5}.logo{display:flex;align-items:center;gap:10px;text-decoration:none}.logo strong{font-size:33px;line-height:1;letter-spacing:-.08em}.logo span{font-size:8px;line-height:1.05;letter-spacing:.12em;font-weight:600}.header nav{display:flex;align-items:center;gap:30px}.header nav a{font-size:13px;text-decoration:none}.nav-contact{border-bottom:1px solid var(--ink);padding-bottom:4px}.hero{height:calc(100vh - 86px);min-height:650px;position:relative;overflow:hidden;color:white}.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,20,17,.78) 0%,rgba(5,20,17,.36) 52%,rgba(5,20,17,.06) 80%),linear-gradient(0deg,rgba(5,20,17,.45),transparent 40%)}.hero-copy{position:absolute;left:clamp(24px,7vw,115px);top:50%;transform:translateY(-54%);max-width:1050px}.overline{font-size:11px;letter-spacing:.2em;font-weight:600;margin:0 0 30px}.hero h1{font-size:clamp(48px,6.3vw,100px);line-height:1.04;letter-spacing:-.065em;font-weight:500;margin:0;word-break:keep-all}.hero h1 em{font-style:normal;color:var(--acid)}.hero-intro{font-size:clamp(15px,1.3vw,19px);line-height:1.8;margin:38px 0 0;color:rgba(255,255,255,.83);word-break:keep-all}.hero-foot{position:absolute;bottom:30px;left:clamp(24px,4.5vw,76px);right:clamp(24px,4.5vw,76px);display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em}.hero-foot a{text-decoration:none}.intro{padding:130px clamp(24px,8vw,135px);background:white}.section-label{font-size:11px;letter-spacing:.12em;font-weight:600;color:#6f7a75}.intro-copy{display:grid;grid-template-columns:1.1fr .9fr;gap:10vw;margin-top:60px}.lead{font-size:clamp(36px,4.6vw,68px);line-height:1.22;letter-spacing:-.055em;font-weight:500;margin:0;word-break:keep-all}.body-copy{padding-top:12px}.body-copy p{font-size:16px;line-height:1.9;color:var(--muted);margin:0 0 22px;word-break:keep-all}.image-band{display:grid;grid-template-columns:1.45fr .55fr;gap:16px;padding:0 16px;background:white}.image-band figure{margin:0;position:relative;overflow:hidden;background:#ddd}.image-large,.image-tall{height:680px}.image-band img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.image-band figure:hover img{transform:scale(1.025)}.image-band figcaption{position:absolute;bottom:25px;left:28px;color:white;font-size:10px;letter-spacing:.12em;text-shadow:0 1px 12px rgba(0,0,0,.4)}.image-band figcaption span{color:var(--acid);margin-right:16px}.approach{padding:130px clamp(24px,8vw,135px);background:var(--ink);color:white}.approach-heading{display:grid;grid-template-columns:.65fr 1.35fr;gap:8vw;align-items:start}.section-label.light{color:var(--acid)}.approach h2{font-size:clamp(38px,5vw,72px);line-height:1.18;letter-spacing:-.055em;font-weight:500;margin:0;word-break:keep-all}.approach-list{margin-top:90px;border-top:1px solid rgba(255,255,255,.2)}.approach-list article{display:grid;grid-template-columns:80px .8fr 1.2fr;gap:35px;align-items:start;padding:38px 0;border-bottom:1px solid rgba(255,255,255,.2)}.approach-list span{font-size:11px;color:var(--acid);padding-top:8px}.approach-list h3{font-size:28px;font-weight:500;letter-spacing:-.03em;margin:0}.approach-list p{font-size:15px;color:#aeb9b4;line-height:1.75;margin:2px 0 0;max-width:520px;word-break:keep-all}.location{display:grid;grid-template-columns:1.15fr .85fr;min-height:720px}.location-image{overflow:hidden}.location-image img{width:100%;height:100%;object-fit:cover}.location-copy{padding:90px clamp(34px,6vw,100px);display:flex;flex-direction:column;justify-content:center;background:var(--acid)}.overline.dark{color:#4a5b4e}.location h2{font-size:clamp(38px,4.5vw,66px);line-height:1.17;letter-spacing:-.055em;font-weight:500;margin:0 0 35px;word-break:keep-all}.location-copy>p:not(.overline){font-size:16px;line-height:1.85;color:#475443;word-break:keep-all;max-width:520px}.location-copy>a{display:inline-flex;justify-content:space-between;align-items:center;width:min(100%,280px);padding:16px 0;border-bottom:1px solid var(--ink);text-decoration:none;margin-top:35px;font-size:14px}.contact{padding:140px clamp(24px,8vw,135px);background:var(--cream)}.contact>p{font-size:11px;letter-spacing:.18em;font-weight:600}.contact h2{font-size:clamp(44px,6vw,88px);line-height:1.1;letter-spacing:-.06em;font-weight:500;margin:35px 0 55px}.contact>a{font-size:clamp(24px,3vw,42px);font-weight:500;text-underline-offset:10px}.contact>a span{margin-left:40px}footer{background:#0b1814;color:white;padding:72px clamp(24px,5vw,82px) 35px;display:grid;grid-template-columns:.65fr 1.35fr;gap:60px}.footer-logo{display:flex;align-items:flex-start;gap:13px}.footer-logo strong{font-size:45px;line-height:.85;letter-spacing:-.08em}.footer-logo span{font-size:9px;letter-spacing:.15em;line-height:1.4}.company-info{display:grid;grid-template-columns:1fr 1fr;gap:0 50px}.company-info div{display:flex;justify-content:space-between;gap:15px;padding:13px 0;border-top:1px solid rgba(255,255,255,.16);font-size:12px}.company-info div:last-child{grid-column:1/-1}.company-info span{color:#82908a}.company-info b{font-weight:500;text-align:right}.disclaimer{grid-column:2;color:#788780;font-size:11px;line-height:1.7;max-width:760px;margin:22px 0 0}.copyright{grid-column:1/-1;color:#68766f;font-size:9px;letter-spacing:.09em;border-top:1px solid rgba(255,255,255,.12);padding-top:28px;margin:20px 0 0}
@media(max-width:900px){.header nav a:not(.nav-contact){display:none}.hero{min-height:620px}.intro-copy,.approach-heading,.location{grid-template-columns:1fr}.image-band{grid-template-columns:1fr 1fr}.image-large,.image-tall{height:520px}.approach-list article{grid-template-columns:45px 1fr}.approach-list article p{grid-column:2}.location-image{height:500px}footer{grid-template-columns:1fr}.disclaimer{grid-column:1}}
@media(max-width:560px){.header{height:72px}.hero{height:calc(100vh - 72px);min-height:600px}.hero-copy{transform:translateY(-48%)}.hero h1{font-size:46px}.desktop-only{display:none}.hero-foot span{display:none}.hero-foot{justify-content:flex-end}.intro,.approach,.contact{padding-top:90px;padding-bottom:90px}.intro-copy{margin-top:42px}.image-band{grid-template-columns:1fr;padding:0;gap:8px}.image-large{height:390px}.image-tall{height:520px}.approach-list{margin-top:60px}.approach-list h3{font-size:23px}.location-image{height:340px}.location-copy{padding-top:75px;padding-bottom:75px}.company-info{grid-template-columns:1fr}.company-info div:last-child{grid-column:auto}.footer-logo{margin-bottom:10px}}
@media(max-width:560px){.header-right{gap:14px}.language-switch{padding-left:12px}.nav-contact{font-size:11px!important}.hero h1{font-size:clamp(40px,12vw,52px)}html[lang="en"] .hero h1{font-size:clamp(36px,10.5vw,48px)}html[lang="en"] .lead,html[lang="en"] .approach h2,html[lang="en"] .location h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.image-band img{transition:none}}
/* ===== 31ch.com 배포 수정 (2026-10-14) — 원본 zip 위에 덧씌운다. 위의 원본 규칙은 건드리지 않는다 ===== */
/* ① 첫 화면 글 상자: 원본은 오른쪽 여백이 0 이라 모바일에서 글자가 화면 끝에 붙어 잘렸다 — 왼쪽과 같은 여백 */
.hero-copy{right:clamp(24px,7vw,115px)}
/* ③ CONTACT 제목: 원본에만 word-break:keep-all 이 빠져 모바일에서 «이야기 / 를» 처럼 단어 중간이 끊겼다 (다른 제목들과 같게) */
.contact h2{word-break:keep-all}
/* ② 사이트 폭 고정(상자형): 첫 화면 사진·배경색·바닥글까지 사이트 전체를 가운데 상자(--site-w) 안에 두고 바깥은 크림색.
      그 폭 이하 화면은 원본 그대로. 더 넓은 화면은 화면 폭(vw)으로 커지던 글자·여백을 «그 폭 화면일 때 값»으로 고정한다
      (원본에서 vw 를 쓰는 규칙 전부를 같은 식으로 옮김: 원본 N vw → var(--site-w) × N/100).
      폭 바꾸는 법: --site-w 와 바로 아래 min-width(폭 + 1px) 두 곳만 고친다. 1440px(10-14 오전) → 1280px(10-14 사용자 «조금 더 줄이자») */
@media (min-width:1281px){
  :root{--site-w:1280px}
  html{background:var(--cream)}
  body{max-width:var(--site-w);margin-inline:auto}
  .header{padding-inline:clamp(22px,calc(var(--site-w)*.045),76px)}
  .hero-copy{left:clamp(24px,calc(var(--site-w)*.07),115px);right:clamp(24px,calc(var(--site-w)*.07),115px)}
  .hero h1{font-size:clamp(48px,calc(var(--site-w)*.063),100px)}
  .hero-intro{font-size:clamp(15px,calc(var(--site-w)*.013),19px)}
  .hero-foot{left:clamp(24px,calc(var(--site-w)*.045),76px);right:clamp(24px,calc(var(--site-w)*.045),76px)}
  .intro,.approach,.contact{padding-inline:clamp(24px,calc(var(--site-w)*.08),135px)}
  .intro-copy{gap:calc(var(--site-w)*.1)}
  .lead{font-size:clamp(36px,calc(var(--site-w)*.046),68px)}
  .approach-heading{gap:calc(var(--site-w)*.08)}
  .approach h2{font-size:clamp(38px,calc(var(--site-w)*.05),72px)}
  .location-copy{padding-inline:clamp(34px,calc(var(--site-w)*.06),100px)}
  .location h2{font-size:clamp(38px,calc(var(--site-w)*.045),66px)}
  .contact h2{font-size:clamp(44px,calc(var(--site-w)*.06),88px)}
  .contact>a{font-size:clamp(24px,calc(var(--site-w)*.03),42px)}
  footer{padding-inline:clamp(24px,calc(var(--site-w)*.05),82px)}
}