/* 주운건설 / one2three.kr형 가로 화면 + 아래 상세 구성 (2026-10-28) */
@font-face{font-family:Pretendard;src:url('fonts/Pretendard-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:Pretendard;src:url('fonts/Pretendard-Bold.otf') format('opentype');font-weight:700 900;font-display:swap}
:root{--ink:#04162e;--sub:#2f4560;--blue:#0b4a94;--blue2:#0b4a94;--light:#eef3f9;--line:#c9d5e3;--navy:#041d42;--top:68px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{color:var(--ink);background:#fff;font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',system-ui,sans-serif;font-size:17px;line-height:1.8;word-break:keep-all;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}img{max-width:100%;height:auto;display:block}
a,button{-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--blue2);outline-offset:4px}
ul,ol{list-style:none}
.skip-link{position:fixed;top:8px;left:16px;z-index:100;background:#fff;padding:10px 18px;border:1px solid var(--ink);transform:translateY(-200%)}.skip-link:focus{transform:none}

/* 상단 막대 */
.top{position:fixed;top:0;left:0;right:0;z-index:70;height:var(--top);display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 48px;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:-.03em;white-space:nowrap}
.brand img{width:40px;height:36px;object-fit:contain}
.site-nav{display:flex;gap:30px}
.site-nav a{font-size:16px;font-weight:700;color:var(--sub);padding:22px 0;border-bottom:2px solid transparent;white-space:nowrap}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--blue)}
.menu-button{display:none}

/* 가로 덱과 세로 칸 */
.deck{display:flex;height:100svh;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.deck::-webkit-scrollbar{display:none}
.col{flex:0 0 100vw;height:100svh;overflow-y:auto;overflow-x:hidden;scroll-snap-align:start;scroll-snap-stop:always;scrollbar-width:none;position:relative}
.col::-webkit-scrollbar{display:none}
.in{width:min(1180px,calc(100vw - 208px));margin:0 auto}
.in.narrow{max-width:820px}
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--top) + 56px) 0 112px;background:#fff}
.detail{padding:96px 0 128px;border-top:1px solid var(--line);background:var(--light)}

/* 글자 위계 */
.label{display:flex;align-items:center;gap:16px;font-family:Consolas,'SF Mono',monospace;font-size:14px;letter-spacing:.14em;color:var(--blue);margin-bottom:32px}
.label span{color:var(--ink);padding-right:16px;border-right:1px solid var(--line)}
h1{font-size:clamp(46px,6vw,88px);line-height:1.14;letter-spacing:-.055em;font-weight:700}
.h-lg{font-size:clamp(52px,6.4vw,96px);line-height:1.12;letter-spacing:.02em;font-weight:700}
.h-sub{display:block;font-size:.42em;letter-spacing:-.03em;margin-top:14px;color:var(--sub)}
.h-md{font-size:clamp(38px,4.6vw,66px);line-height:1.18;letter-spacing:-.05em;font-weight:700}
.h-news{font-size:clamp(28px,2.7vw,40px);line-height:1.35;letter-spacing:-.04em;font-weight:700}
.lead{font-size:clamp(17px,1.4vw,20px);color:var(--sub);max-width:640px;margin-top:28px;line-height:1.85}
.dtitle{font-family:Consolas,'SF Mono',monospace;font-size:14px;letter-spacing:.14em;color:var(--blue)}
.dh{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.04em;line-height:1.3;margin:14px 0 32px;font-weight:700}
.dh-s{font-size:22px;margin:72px 0 24px;padding-top:28px;border-top:1px solid var(--line)}
.body{font-size:18px;line-height:1.9;max-width:820px;margin-bottom:16px}
.note{font-size:15px;color:var(--sub);line-height:1.8;margin-top:24px;max-width:860px}
.date{font-size:15px;color:var(--sub);margin-bottom:16px}

/* 단추와 연결 */
.row{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px}
.btn{display:inline-flex;align-items:center;gap:36px;min-height:56px;padding:14px 24px;font-size:16px;font-weight:700;border:1px solid transparent;transition:background .2s,color .2s}
.btn-light{background:#fff;color:var(--ink)}.btn-light:hover{background:var(--blue);color:#fff}
.btn-line-light{border-color:rgba(255,255,255,.55);color:#fff}.btn-line-light:hover{background:#fff;color:var(--ink)}
.text-link{display:inline-flex;gap:28px;margin-top:40px;font-weight:700;padding-bottom:8px;border-bottom:1px solid var(--ink)}
.text-link:hover{color:var(--blue);border-color:var(--blue)}

/* 표지 */
.hero-photo-bg{color:#fff;background:var(--navy);isolation:isolate}
.hero-photo,.hero-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-2;object-fit:cover;object-position:center 65%}
.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(3,22,52,.88),rgba(3,22,52,.55) 60%,rgba(3,22,52,.3)),linear-gradient(0deg,rgba(3,22,52,.7),transparent 50%)}
.hero-photo-bg .label{color:#fff}.hero-photo-bg .label span{color:#fff;border-color:rgba(255,255,255,.35)}
.hero-sub{font-size:21px;margin-top:28px;color:#e8f1f5}
.photo-credit{position:absolute;right:48px;bottom:36px;font-size:14px;color:#dbe7ec}
.lines{border-top:1px solid var(--ink)}
.lines a{display:grid;grid-template-columns:64px 180px 1fr 32px;align-items:baseline;gap:24px;padding:30px 0;border-bottom:1px solid var(--line);transition:color .2s}
.lines a:hover{color:var(--blue)}
.lines .no{font-family:Consolas,monospace;font-size:14px;color:var(--blue)}
.lines strong{font-size:22px;letter-spacing:-.03em}
.lines .txt{font-size:17px;color:var(--sub)}
.lines .go{font-size:20px;text-align:right}

/* 둘로 나눈 첫 화면 */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:88px;align-items:center}
.pic img{width:100%;max-height:min(58svh,560px);object-fit:cover}
.pic-tall img{max-height:min(62svh,600px);object-position:center 65%}
figcaption{font-size:14px;color:var(--sub);margin-top:12px;line-height:1.7}

/* 소개 */
.hanja{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink)}
.hanja>div{padding:28px 0 0}
.hanja>div+div{padding-left:32px;border-left:1px solid var(--line)}
.hanja strong{display:block;font-family:'Noto Serif CJK KR','Batang','바탕',serif;font-size:clamp(88px,9vw,140px);line-height:1.15;font-weight:400;color:var(--blue)}
.hanja p{font-size:16px;margin-top:16px}
.meaning,.info{display:grid;grid-template-columns:120px 1fr;max-width:820px;border-top:1px solid var(--ink)}
.meaning dt,.meaning dd,.info dt,.info dd{padding:18px 0;border-bottom:1px solid var(--line);font-size:17px}
.meaning dt,.info dt{color:var(--sub)}
.meaning dt{font-family:'Noto Serif CJK KR','Batang','바탕',serif;font-size:22px;color:var(--blue);line-height:1.5}

/* 브랜드 */
.brand-promise{font-size:clamp(24px,2.2vw,32px);font-weight:700;line-height:1.5;margin-top:32px;letter-spacing:-.03em}
.logo-display{display:flex;align-items:center;justify-content:center;gap:28px;min-height:360px;border:1px solid var(--line);padding:48px}
.logo-display img{width:min(170px,30vw);mix-blend-mode:multiply}
.logo-display strong{font-size:34px;letter-spacing:-.04em;white-space:nowrap}
.brand-palette{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.brand-palette li{padding:24px 24px 24px 0}
.brand-palette li+li{padding-left:24px;border-left:1px solid var(--line)}
.color-swatch{height:96px;margin-bottom:16px}
.color-black{background:#000}.color-main{background:#1d6fb8}.color-medium{background:#35a8df}.color-light{background:#79bde0}
.brand-palette h4{font-size:17px}
.brand-palette code{font-family:Consolas,monospace;font-size:15px;color:var(--sub)}
.business-card-slot{position:relative}
.business-card-slot .pending{position:absolute;right:0;top:30px;font-size:14px;color:var(--sub);border:1px solid var(--line);padding:4px 14px;background:#fff}

/* 수주 계획 */
.kinds{margin-top:44px;border-top:1px solid var(--ink);max-width:760px}
.kinds li{display:flex;gap:20px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.kinds strong{display:block;font-size:20px;letter-spacing:-.03em}
.kinds span{font-size:15px;color:var(--sub)}
.kinds b,.kind>b,.legend i{flex:none;width:32px;height:32px;line-height:32px;border-radius:50%;text-align:center;font-size:15px;font-style:normal;background:var(--blue);color:#fff}
.kinds b.o,.kind>b.o,.legend i.o{background:#fff;color:var(--blue);border:1px solid var(--blue);line-height:30px}
.status-note{margin-top:28px;padding-left:16px;border-left:3px solid var(--blue);font-size:16px;max-width:760px}
.plan{display:grid;grid-template-columns:3fr 7fr;gap:64px;align-items:start}
.map{width:100%;max-height:340px}
.map .mu{fill:#dfe7ef;stroke:#fff;stroke-width:2}.map .rg{fill:#0b4a94;stroke:#fff;stroke-width:2}
.map .tag circle{fill:var(--navy);stroke:#fff;stroke-width:2}.map .tag text{fill:#fff;font-size:18px;font-weight:700;text-anchor:middle}.map .cap{fill:var(--sub);font-size:15px}
.legend{margin-top:16px;font-size:15px;color:var(--sub)}
.legend li{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.legend i{width:24px;height:24px;line-height:24px;font-size:14px}.legend i.o{line-height:22px}
.proj{margin-bottom:48px}
.kind{display:flex;gap:12px;align-items:center;font-size:20px;font-weight:700;margin-bottom:16px;letter-spacing:-.02em}
table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.65;background:#fff}
th,td{padding:17px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-size:15px;color:var(--sub);border-top:1px solid var(--ink);background:#fff}
td.amt{white-space:nowrap;font-weight:700;color:var(--blue)}
.desc{display:block;color:var(--sub);font-size:15px;margin-top:6px}
.mobile-table-cards{display:none}

/* 빈집 재생 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.chips li{font-size:15px;border:1px solid var(--line);padding:4px 14px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);counter-reset:s;margin-top:40px}
.steps li{counter-increment:s;padding:28px 32px 8px 0}
.steps li+li{padding-left:32px;border-left:1px solid var(--line)}
.steps li::before{content:'0' counter(s);display:block;font-family:Consolas,monospace;font-size:15px;color:var(--blue);margin-bottom:14px}
.steps b{display:block;font-size:21px;margin-bottom:10px;letter-spacing:-.03em}
.steps span{font-size:16px;color:var(--sub)}
.partner{display:flex;justify-content:space-between;align-items:flex-end;gap:64px}
.partner .text-link{flex:none}

/* 대표 소개 */
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--ink)}
.facts.facts-2{grid-template-columns:repeat(2,1fr);max-width:480px}
.facts>div{padding:20px 16px 0 0}
.facts>div+div{padding-left:20px;border-left:1px solid var(--line)}
.facts b{display:block;font-size:26px;letter-spacing:-.04em}
.facts span{font-size:14px;color:var(--sub)}

/* 문의 */
.hero-dark{background:var(--navy);color:#fff}
.hero-dark .label{color:#fff}.hero-dark .label span{color:#fff;border-color:rgba(255,255,255,.3)}
.hero-dark .lead{color:#cfdde5}
.tel{display:inline-block;margin-top:40px;font-size:clamp(40px,5.4vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1.2;border-bottom:1px solid rgba(255,255,255,.4)}
.tel:hover{border-color:#fff}
.footer{margin-top:96px;padding-top:32px;border-top:1px solid var(--ink);font-size:15px;color:var(--sub)}
.footer p{margin-top:16px}
.footer a:hover{color:var(--blue)}
.footer-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
.credits{max-width:600px}.credits summary{cursor:pointer;text-align:right}.credits p{margin:12px 0}

/* 이동 장치 */
.downhint{position:absolute;left:50%;bottom:68px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background:none;border:0;font-size:15px;color:var(--sub);cursor:pointer;padding:8px 4px}
.downhint span{animation:dn 1.6s ease-in-out infinite}
.hero-photo-bg .downhint,.hero-dark .downhint{color:#e3edf2}
@keyframes dn{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.arrow{position:fixed;top:50%;z-index:65;width:52px;height:52px;transform:translateY(-50%);background:#fff;border:1px solid var(--line);font-size:20px;cursor:pointer;transition:background .2s,color .2s,opacity .25s}
.arrow:hover:not(:disabled){background:var(--ink);color:#fff;border-color:var(--ink)}
.arrow.prev{left:28px}.arrow.next{right:28px}
.arrow:disabled{opacity:0;pointer-events:none}
.pager{position:fixed;left:48px;right:48px;bottom:30px;z-index:65;display:flex;justify-content:center;align-items:center;pointer-events:none;transition:opacity .25s}
.dots{display:flex;gap:6px;pointer-events:auto}
.dot{width:28px;height:20px;border:0;background:none;cursor:pointer;position:relative}
.dot::after{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:#9fb0c4;transition:background .2s}
.dot[aria-selected=true]::after{background:var(--blue);height:3px;top:8px}
.counter{position:absolute;right:0;font-family:Consolas,monospace;font-size:14px;color:var(--sub)}
.counter b{color:var(--blue)}
body.on-dark .dot::after{background:rgba(255,255,255,.4)}body.on-dark .dot[aria-selected=true]::after{background:#fff}body.on-dark .counter{color:#dbe7ec}body.on-dark .counter b{color:#fff}
.hero .downhint{transition:opacity .25s}
body.scrolled .arrow,body.scrolled .pager{opacity:0;pointer-events:none}
body.on-cover .pager .counter{display:none}

@media(max-width:1100px){
  .top{padding:0 28px}.site-nav{gap:20px}.site-nav a{font-size:15px}
  .in{width:calc(100vw - 176px)}
  .split{gap:48px}
  .lines a{grid-template-columns:48px 140px 1fr 24px}
  .plan{gap:40px}
  .brand-palette{grid-template-columns:1fr 1fr}.brand-palette li:nth-child(3){padding-left:0;border-left:0}
  .brand-palette li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:860px){
  :root{--top:60px}
  .top{padding:0 20px;height:var(--top)}
  .brand{font-size:18px}.brand img{width:34px;height:31px}
  .menu-button{display:block;background:none;border:1px solid var(--line);padding:6px 14px;font-size:15px;min-height:40px;cursor:pointer}
  .site-nav{display:none;position:fixed;top:var(--top);left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:4px 20px 12px}
  .site-nav.open{display:flex}
  .site-nav a{font-size:17px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .site-nav a:last-child{border-bottom:0}
  .site-nav a[aria-current]{color:var(--blue);border-bottom-color:var(--line)}
  .in{width:calc(100vw - 40px)}
  .hero{padding:calc(var(--top) + 36px) 0 128px;align-items:flex-start}
  .hero-photo-bg{align-items:center}
  .detail{padding:56px 0 112px}
  .split{grid-template-columns:1fr;gap:36px}
  .label{margin-bottom:22px}
  h1{font-size:clamp(38px,10vw,56px)}
  .h-lg{font-size:clamp(46px,13vw,64px)}
  .h-md{font-size:clamp(34px,9vw,46px)}
  .h-news{font-size:24px}
  .lead{font-size:17px;margin-top:20px}
  .hero-sub{font-size:17px}
  .row{margin-top:32px}.btn{gap:20px;min-height:52px;padding:12px 18px;font-size:15px}
  .photo-credit{left:auto;right:20px;bottom:auto;top:calc(var(--top) + 12px)}
  .hanja strong{font-size:84px}.hanja>div+div{padding-left:20px}.hanja p{font-size:15px}
  .lines a{grid-template-columns:36px 1fr 20px;gap:4px 12px;padding:22px 0}
  .lines .txt{grid-column:2 / 4;font-size:16px}
  .lines strong{font-size:20px}
  .lines .go{grid-row:1;grid-column:3}
  .meaning,.info{grid-template-columns:72px 1fr}
  .body{font-size:17px}
  .dh-s{margin-top:52px}
  .logo-display{min-height:220px;padding:28px;gap:18px}.logo-display img{width:104px}.logo-display strong{font-size:26px}
  .brand-promise{font-size:22px;margin-top:20px}
  .brand-palette li,.brand-palette li+li{padding:20px 12px 20px 0}
  .brand-palette li:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
  .color-swatch{height:64px}
  .business-card-slot .pending{position:static;display:inline-block;margin-bottom:4px}
  .kinds{margin-top:28px}.kinds strong{font-size:18px}
  .plan{grid-template-columns:1fr;gap:28px}
  .map{max-width:400px;margin:0 auto}
  .desktop-table{display:none}
  .mobile-table-cards{display:block}
  .mobile-table-cards>li{border-top:1px solid var(--line);padding:20px 0}
  .mobile-table-cards>li:first-child{border-top-color:var(--ink)}
  .mobile-table-cards>li:last-child{border-bottom:1px solid var(--line)}
  .mobile-table-cards h4{font-size:18px;line-height:1.6;letter-spacing:-.02em}
  .mobile-table-cards h4 .desc{font-weight:400}
  .project-meta{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:15px;color:var(--sub)}
  .project-meta strong{font-size:17px;color:var(--blue);white-space:nowrap}
  .career-period{font-size:14px;color:var(--blue);margin-bottom:6px;font-family:Consolas,monospace}
  .career-meta{font-size:15px;color:var(--sub);margin-top:8px}
  .kind{font-size:18px}
  .pic img,.pic-tall img{max-height:300px;width:100%}
  .chips{margin-top:24px}.chips li{font-size:14px}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li+li{padding:22px 0;border-left:0;border-bottom:1px solid var(--line)}
  .partner{display:block}
  .facts,.facts.facts-2{grid-template-columns:1fr;margin-top:28px;max-width:none}
  .facts>div,.facts>div+div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-left:0;border-bottom:1px solid var(--line)}
  .facts b{font-size:22px}.facts span{text-align:right}
  .tel{font-size:clamp(32px,9.6vw,44px)}
  .footer{margin-top:64px}
  .footer-bottom{display:block}.credits{margin-top:16px}.credits summary{text-align:left}
  .arrow{display:none}
  .hero{flex-direction:column;align-items:stretch;gap:40px;padding-bottom:80px}
  .hero-photo-bg .in{margin-top:auto}
  .downhint{position:static;transform:none;margin-top:auto;align-self:center;font-size:14px}
  .pager{left:0;right:0;bottom:0;justify-content:flex-start;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);border-top:1px solid var(--line)}
  body.on-dark .pager{background:transparent;border-top-color:transparent}
  .counter{right:20px}
  .dot{width:22px}
}
@media(max-width:359px){h1{font-size:34px}.h-lg{font-size:42px}.hanja strong{font-size:68px}.dot{width:18px}}
@media(prefers-reduced-motion:reduce){.downhint span{animation:none}*{transition:none!important}}