.site-header .wordmark{display:flex;align-items:center;flex:0 0 auto;line-height:0}
.site-header .wordmark-logo{display:block;width:clamp(185px,14.6vw,224px);height:auto;max-height:100px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,7,15,.42))}
@media (max-width:760px){.site-header .wordmark-logo{width:176px;max-height:80px}}
@media (max-width:380px){.site-header .wordmark-logo{width:150px}}
.footer-logo{gap:12px}.footer-logo img{display:block;width:190px;height:auto}.dm-credit{letter-spacing:1.4px;color:#9fb3c0}.dm-credit b{color:#e3eef5;font-weight:700}
@media(max-width:760px){.footer-logo img{width:160px}.dm-credit{width:100%}}
.source-video{opacity:.01;width:2px;height:2px}

/* ---- language switch ---- */
.lang-switch{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.6px;color:#8fa5b4;margin-left:6px}
.lang-switch a{padding:6px 2px;transition:color .2s}
.lang-switch a:hover{color:#e3eef5}
.lang-switch a[aria-current]{color:#fafaf5;font-weight:600}
.lang-switch span{opacity:.45}
.desktop-nav+.lang-switch{margin-left:0}
.lang-switch-mobile{display:flex;align-items:center;gap:14px;padding-top:6px}
.mobile-menu .lang-switch-mobile a{font-size:14px;color:#9bb5c8;padding:4px 0;border:0}
.mobile-menu .lang-switch-mobile a[aria-current]{color:#fafaf5;font-weight:600}
.mobile-menu .lang-switch-mobile span{color:#5d7384}
.mobile-menu>a[target="_blank"]{font-size:12px;color:#9bb5c8;padding-top:15px;border-top:1px solid var(--rule)}
@media(max-width:760px){.site-header .lang-switch{display:none}}

/* ---- MADE BY DIRECTORMARKET ---- */
.studio{padding-top:96px;padding-bottom:88px;background:#0a1620;border-top:1px solid var(--rule)}
.studio .section-number{color:#7f939f}
.studio-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:9%;margin-top:56px;align-items:start}
.studio-head .eyebrow{color:#a7c8da;font-size:10px;margin-bottom:22px}
.studio-head h2{font-size:clamp(30px,3.3vw,48px);line-height:1.22;letter-spacing:-1.2px}
.studio-lead{margin-top:30px;font-size:15px;line-height:1.85;color:#c3d0d8;max-width:520px}
.studio-label{font-size:10px;letter-spacing:2.2px;color:#7f939f;margin-bottom:14px}
.studio-who{font-size:14px;line-height:1.85;color:#d3dbe0;margin-bottom:44px}
.studio-services{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.studio-services li{display:grid;grid-template-columns:34px 170px 1fr;gap:14px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--rule)}
.studio-index{font-size:10px;color:#6f8593;letter-spacing:1px}
.studio-services b{font-size:14px;font-weight:600;color:#fafaf5}
.studio-services p{font-size:13px;line-height:1.7;color:#a4afb7}
.studio-media{margin-top:22px;font-size:12px;line-height:1.9;color:#8fa5b4}
.studio-contact{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:72px;padding-top:34px;border-top:1px solid var(--rule)}
.studio-contact dl{display:grid;grid-template-columns:repeat(3,auto);gap:10px 48px;margin:0}
.studio-contact dt{font-size:10px;letter-spacing:1.6px;color:#6f8593;margin-bottom:6px}
.studio-contact dd{margin:0;font-size:13px;line-height:1.6;color:#d3dbe0}
.studio-contact dd a:hover{color:#fff}
.studio-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:flex-end}
.studio-actions .button{min-width:0}
.studio-actions .text-link{margin-top:0;font-size:12px;gap:14px}
@media(max-width:1100px){.studio-contact{flex-direction:column;align-items:flex-start}.studio-actions{justify-content:flex-start}.studio-contact dl{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.studio{padding-top:70px;padding-bottom:64px}.studio-grid{grid-template-columns:1fr;gap:44px;margin-top:40px}.studio-lead{font-size:14px}.studio-services li{grid-template-columns:28px 1fr;gap:4px 10px}.studio-services li p{grid-column:2}.studio-contact{margin-top:52px}.studio-contact dl{grid-template-columns:1fr}.studio-actions{gap:18px}}

/* ---- per-language typography ---- */
:lang(ja) body,html:lang(ja) body{font-family:Pretendard,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',Meiryo,sans-serif;word-break:normal;line-break:strict;overflow-wrap:anywhere}
html:lang(ja) h1,html:lang(ja) h2,html:lang(ja) h3,html:lang(ja) h4,html:lang(ja) .studio-lead,html:lang(ja) .place-copy{word-break:auto-phrase;letter-spacing:0}
html:lang(ja) .hero h1{letter-spacing:-1px}
html:lang(en) body{word-break:normal}
html:lang(en) .hero h1{letter-spacing:-2px}
.nowrap{white-space:nowrap}

/* ---- header: never break menu words; switch to the menu button when it doesn't fit ---- */
.site-header .nav-link,.site-header .header-visit,.site-header .lang-switch,.site-header .lang-switch a{white-space:nowrap}
.site-header .desktop-nav,.site-header .lang-switch,.site-header .header-visit{flex-shrink:0}

/* switch to the menu button where the full header no longer fits (measured per language) */
@media(max-width:860px) and (min-width:761px){html:lang(ko) .site-header .desktop-nav,html:lang(ko) .site-header .lang-switch,html:lang(ko) .site-header .header-visit{display:none}html:lang(ko) .menu-toggle{display:flex;flex-direction:column;gap:6px;justify-content:center;margin-left:auto}html:lang(ko) .menu-toggle span{height:1px;width:21px;display:block;background:#e3eef5;transition:transform .25s}html:lang(ko) .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}html:lang(ko) .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}html:lang(ko) .mobile-menu{position:absolute;z-index:25;top:0;left:0;right:0;background:#0b1a27fa;padding:130px var(--space) 34px;display:flex;flex-direction:column;gap:25px;backdrop-filter:blur(18px);border-bottom:1px solid var(--rule)}html:lang(ko) .mobile-menu>a:not([target]){font-size:20px;font-weight:400}}
@media(max-width:970px) and (min-width:761px){html:lang(en) .site-header .desktop-nav,html:lang(en) .site-header .lang-switch,html:lang(en) .site-header .header-visit{display:none}html:lang(en) .menu-toggle{display:flex;flex-direction:column;gap:6px;justify-content:center;margin-left:auto}html:lang(en) .menu-toggle span{height:1px;width:21px;display:block;background:#e3eef5;transition:transform .25s}html:lang(en) .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}html:lang(en) .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}html:lang(en) .mobile-menu{position:absolute;z-index:25;top:0;left:0;right:0;background:#0b1a27fa;padding:130px var(--space) 34px;display:flex;flex-direction:column;gap:25px;backdrop-filter:blur(18px);border-bottom:1px solid var(--rule)}html:lang(en) .mobile-menu>a:not([target]){font-size:20px;font-weight:400}}
@media(max-width:890px) and (min-width:761px){html:lang(ja) .site-header .desktop-nav,html:lang(ja) .site-header .lang-switch,html:lang(ja) .site-header .header-visit{display:none}html:lang(ja) .menu-toggle{display:flex;flex-direction:column;gap:6px;justify-content:center;margin-left:auto}html:lang(ja) .menu-toggle span{height:1px;width:21px;display:block;background:#e3eef5;transition:transform .25s}html:lang(ja) .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}html:lang(ja) .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}html:lang(ja) .mobile-menu{position:absolute;z-index:25;top:0;left:0;right:0;background:#0b1a27fa;padding:130px var(--space) 34px;display:flex;flex-direction:column;gap:25px;backdrop-filter:blur(18px);border-bottom:1px solid var(--rule)}html:lang(ja) .mobile-menu>a:not([target]){font-size:20px;font-weight:400}}

/* LED panel seams placed where the bridge's real seams cross the screen (measured: 33.15% / 70.42%) */
.projection-plane:after{background:linear-gradient(90deg,transparent 32.95%,rgba(0,0,0,.38) 33.05%,rgba(0,0,0,.38) 33.25%,transparent 33.35%,transparent 70.22%,rgba(0,0,0,.35) 70.32%,rgba(0,0,0,.35) 70.52%,transparent 70.62%)}

/* Songdo photo: keep POSCO Tower (right edge of the photo) inside narrower frames */
img[src$="songdo-central-park.webp"]{object-position:96% 50%}

/* ---- studio: key-visual band ---- */
.studio-hero{position:relative;margin:48px calc(-1*var(--space)) 0;min-height:clamp(520px,46vw,700px);display:flex;align-items:center;padding:0 var(--space);overflow:hidden}
.studio-hero-visual{position:absolute;top:0;right:0;bottom:0;width:72%;background:url(/assets/dm-hero.webp) 58% 38%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 16%,#000 76%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 38%),linear-gradient(180deg,transparent 0,#000 16%,#000 76%,transparent 100%);mask-composite:intersect;opacity:.92}
.studio-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0a1620 0,rgba(10,22,32,.55) 34%,rgba(10,22,32,0) 60%)}
.studio-hero .studio-head{position:relative;z-index:1;max-width:min(560px,46%)}
.studio-hero .studio-head h2{text-shadow:0 2px 28px rgba(5,12,20,.6)}
.studio .studio-grid{grid-template-columns:1fr 1.15fr;margin-top:64px}
.studio-who-col .studio-who{margin-bottom:26px}
@media(max-width:1100px){.studio-hero .studio-head{max-width:52%}.studio-hero-visual{width:80%}}
@media(max-width:760px){
  .studio-hero{display:block;min-height:0;margin-top:34px;padding:0}
  .studio-hero-visual{position:relative;width:100%;height:auto;aspect-ratio:1920/1386;background-position:center;-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 30%);mask-image:linear-gradient(0deg,transparent 0,#000 30%)}
  .studio-hero:after{display:none}
  .studio-hero .studio-head{max-width:none;padding:0 var(--space);margin-top:-36px}
  .studio .studio-grid{grid-template-columns:1fr;margin-top:44px}
}

/* studio: real logo + stack below 1100px so copy never sits on the pouch lettering */
.studio-logo{display:block;width:clamp(170px,14vw,220px);height:auto;margin-bottom:30px}
@media(max-width:1320px){
  .studio-hero{display:block;min-height:0;margin-top:40px;padding:0}
  .studio-hero-visual{position:relative;width:100%;height:auto;aspect-ratio:1920/1100;background-position:center 40%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent 100%)}
  .studio-hero:after{display:none}
  .studio-hero .studio-head{max-width:720px;padding:0 var(--space);margin-top:-40px}
}
@media(max-width:760px){.studio-logo{width:160px;margin-bottom:24px}.studio-hero-visual{aspect-ratio:1920/1386}}

/* ---- incheonbridge: portfolio + inquiry form ---- */
.pf-record{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pf-record li{padding:30px 22px 28px 0;display:flex;flex-direction:column;gap:6px}
.pf-record li+li{padding-left:24px;border-left:1px solid var(--rule)}
.pf-record b{font-size:clamp(28px,2.6vw,38px);font-weight:500;letter-spacing:-.8px;color:#fafaf5}
.pf-record span{font-size:13px;color:#d3dbe0;line-height:1.5}
.pf-record small{font-size:11px;color:#7f939f}
.pf-works-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;margin-top:84px}
.pf-works-head .studio-label{grid-column:1/-1;margin:0}
.pf-works-head h3{font-size:clamp(26px,2.6vw,36px);font-weight:500;letter-spacing:-.8px}
.pf-works-head p:not(.studio-label){grid-column:1;font-size:13px;color:#8fa5b4}
.pf-works-head .text-link{grid-column:2;grid-row:2/4;margin:0;font-size:12px;color:#cadfeb}
.pf-works{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px}
.pf-card{display:block}
.pf-thumb{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:#111e28}
.pf-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1),filter .3s;filter:saturate(.92)}
.pf-card:hover .pf-thumb img{transform:scale(1.04);filter:none}
.pf-meta{display:flex;flex-direction:column;gap:5px;margin-top:14px}
.pf-meta em{font-style:normal;font-size:10px;letter-spacing:1.6px;color:#7f939f;text-transform:uppercase}
.pf-meta b{font-size:14px;font-weight:500;line-height:1.45;color:#fafaf5}
.pf-meta span{font-size:12px;color:#8fa5b4}
.pf .studio-grid{margin-top:96px}
.pf-contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;margin-top:96px;padding-top:56px;border-top:1px solid var(--rule)}
.pf-contact-head h3{font-size:clamp(28px,3vw,42px);font-weight:500;line-height:1.25;letter-spacing:-1px;margin-top:4px}
.pf-contact-head>p:not(.studio-label){margin-top:22px;font-size:14px;line-height:1.85;color:#c3d0d8}
.pf-contact-head dl{margin:36px 0 0;display:grid;gap:16px}
.pf-contact-head dt{font-size:10px;letter-spacing:1.6px;color:#6f8593;margin-bottom:4px}
.pf-contact-head dd{margin:0;font-size:13px;color:#d3dbe0}
.pf-form{display:grid;gap:18px}
.pf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pf-form label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:#a4afb7}
.pf-form label i{font-style:normal;color:#91ccef;margin-left:3px}
.pf-form input:not([type=checkbox]),.pf-form select,.pf-form textarea{width:100%;background:#0e1d29;border:1px solid #ffffff26;border-radius:2px;color:#fafaf5;padding:13px 14px;font-size:14px;transition:border-color .2s}
.pf-form textarea{resize:vertical;min-height:120px;line-height:1.6}
.pf-form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8fa5b4 50%),linear-gradient(135deg,#8fa5b4 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.pf-form input:focus,.pf-form select:focus,.pf-form textarea:focus{outline:none;border-color:#91ccef}
.pf-form input:user-invalid,.pf-form textarea:user-invalid{border-color:#e08a8a}
.pf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.pf-consent{padding:16px;border:1px solid var(--rule);border-radius:2px;background:#0c1924}
.pf-consent label{flex-direction:row;align-items:flex-start;gap:10px;font-size:13px;color:#e3eef5}
.pf-consent input{margin-top:2px;width:16px;height:16px;accent-color:#b5def2;flex:none}
.pf-consent p{margin-top:8px;font-size:11px;line-height:1.7;color:#7f939f}
.pf-submit{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pf-submit .button{min-width:0}
.pf-status{font-size:13px;line-height:1.6}
.pf-status.is-ok{color:#b5def2}
.pf-status.is-err{color:#f0a7a7}
@media(max-width:1100px){.pf-record{grid-template-columns:1fr 1fr}.pf-record li:nth-child(3){padding-left:0;border-left:0}.pf-record li:nth-child(n+3){border-top:1px solid var(--rule)}.pf-works{grid-template-columns:repeat(2,1fr)}.pf-contact{grid-template-columns:1fr;gap:44px}}
@media(max-width:760px){.pf-record li{padding:22px 12px 20px 0}.pf-record li+li{padding-left:14px}.pf-record li:nth-child(3){padding-left:0}.pf-works-head{grid-template-columns:1fr}.pf-works-head .text-link{grid-column:1;grid-row:auto;margin-top:6px}.pf-works{gap:24px 14px}.pf-row{grid-template-columns:1fr}.pf .studio-grid,.pf-contact,.pf-works-head{margin-top:64px}}
.pf-contact>*,.pf-row>*,.pf-form>*{min-width:0}
.pf-form .pf-label{display:block}
.pf-form input:not([type=checkbox]),.pf-form select,.pf-form textarea{font-family:inherit;box-sizing:border-box;max-width:100%}
.pf-status .pf-mailto{display:inline-block;margin-top:8px;padding:9px 14px;border:1px solid #f0a7a7;border-radius:2px;color:#fff;font-weight:500;text-decoration:none}
.pf-status .pf-mailto:hover{background:#f0a7a71f}