/* ㈜원패밀리 홈페이지 — 디자인 토큰은 design/TONE-AND-MANNER.md 와 같다 */
:root {
  --ink: #161817; --ink-2: #3b403d; --muted: #6f7571; --line: #e4e6e5; --line-2: #cfd3d1;
  --bg: #fff; --soft: #f4f5f4; --foot: #141615; --tag: #eceeed;
  --ci: #0071bc; --dgdr: #00866b; --unj: #2563eb;
  --r-card: 8px; --r-img: 6px; --r-btn: 6px;
  --wrap: 1280px;
  --sec: 68px; --sec-short: 40px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; color: var(--ink-2); background: var(--bg);
  font: 17px/1.7 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; }
h1, h2, h3 { color: var(--ink); font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; }
:focus-visible { outline: 2px solid var(--ci); outline-offset: 2px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 40px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; border-radius: 4px; z-index: 50; }
.skip:focus { left: 8px; }

/* 초안 미리보기 전용 */
.draft-bar { background: #1c1c1c; color: #ddd; font-size: 13px; padding: 9px 0; }
.draft-bar b { color: #ffd98a; margin-right: 8px; }
.chk { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; vertical-align: middle; white-space: nowrap; font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: 0; color: #9a5a00; background: #fff3d6; border-radius: 4px; padding: 4px 6px; }
.chk::before { content: "!"; font-weight: 800; }

/* 링크·버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 50px; padding: 0 22px; border-radius: var(--r-btn); font-size: 16px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.btn.sm { height: 40px; padding: 0 14px; font-size: 14px; }
.btn.primary { background: var(--ink); color: #fff; }
.btn.line { border: 1px solid var(--line-2); color: var(--ink); background: #fff; }
.btn.primary:hover { background: #2c302e; }
.btn.line:hover { border-color: var(--ink); }
.tlink { font-size: 15px; font-weight: 600; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.tlink:hover { color: var(--ci); }
.tlink.brand { color: var(--dgdr); }
#unj .tlink.brand { color: var(--unj); }
#wfd .tlink.brand { color: var(--ink); }
.ar { font-weight: 600; }
.nolink { border-bottom: 0; color: var(--muted); }

/* 머리글 */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; height: 72px; gap: 44px; }
.logo img { height: 44px; width: auto; }
.gnb { display: flex; gap: 32px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.gnb a:hover, .gnb a.on { color: var(--ink); }
.gnb a.on { box-shadow: inset 0 -2px 0 var(--ink); padding-bottom: 4px; }
.dd { margin-left: auto; position: relative; }
.dd summary { list-style: none; }
.dd summary::-webkit-details-marker, .mnav summary::-webkit-details-marker { display: none; }
.dd summary::after { content: "▾"; margin-left: 6px; font-size: 11px; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.dd-link { display: block; padding: 9px 12px; border-radius: 4px; font-size: 15px; font-weight: 600; color: var(--ink); }
.dd-link:hover { background: var(--soft); }
.mnav { display: none; }

/* 섹션 */
.sec { padding: var(--sec) 0; }
.sec.soft { background: var(--soft); }
.sec.short { padding: var(--sec-short) 0; }
.sec.joined { padding-top: 0; }
.sec.joined > .wrap { border-top: 1px solid var(--line); padding-top: 48px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; }
.sec-head h2 { font-size: 34px; letter-spacing: -0.03em; }
.sec-head p { margin-top: 8px; font-size: 16px; color: var(--muted); max-width: 680px; }
.cap, .note { font-size: 13.5px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.muted { color: var(--muted); }

/* 첫 화면 */
.hero { padding: 56px 0 var(--sec); border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; }
.kicker { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 16px; }
.hero h1 { font-size: 52px; line-height: 1.26; letter-spacing: -0.035em; }
.lead { font-size: 18.5px; line-height: 1.75; margin-top: 24px; max-width: 560px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.paths { border-top: 2px solid var(--ink); }
.paths h2 { font-size: 15px; font-weight: 700; color: var(--muted); padding: 14px 0 6px; letter-spacing: 0; }
.path { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.path .who { font-size: 13px; font-weight: 600; color: var(--muted); }
.path .q { grid-column: 1; font-size: 17px; font-weight: 700; color: var(--ink); }
.path .go { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.path .go:hover { color: var(--ci); }

/* 관리 건물 — 6개 가로 배치 */
.blds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.bld .photo { border-radius: 4px; overflow: hidden; background: var(--soft); }
.bld .photo.sq { aspect-ratio: 1 / 1; }
.bld img { width: 100%; height: 100%; object-fit: cover; }
.bld figcaption { margin-top: 12px; }
.bld b { display: block; font-size: 15.5px; color: var(--ink); letter-spacing: -0.02em; }
.bld span { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; }
.sec-blds .cap { margin-top: 18px; }

/* 지표 */
.stats { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-top: 2px solid var(--ink); }
.stats-3 { --n: 3; } .stats-5 { --n: 5; } .stats-2 { --n: 2; }
.stat { padding: 22px 24px 4px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat .n { font-size: 48px; font-weight: 700; color: var(--ink); letter-spacing: -0.04em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat .n small { font-size: 22px; font-weight: 600; margin-left: 2px; }
.stat .l { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 10px; }
.stat .s { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.stat .t { display: inline-block; font-size: 12px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 6px; margin-right: 6px; }
.stat .chk { margin: 8px 0 0; }
.trust-row { display: grid; grid-template-columns: 190px repeat(3, 1fr); gap: 24px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.trust-row .tr-k { font-size: 14px; font-weight: 700; color: var(--muted); }
.trust-row b { display: block; font-size: 16px; color: var(--ink); }
.trust-row small { display: block; font-size: 13px; color: var(--muted); }

/* 브랜드 카드 */
.brands { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.bcard.wide { grid-column: 1 / -1; flex-direction: row; }
.bc-body { flex: 1; display: flex; flex-direction: column; padding: 24px 26px 26px; }
.bcard.wide .bc-body { justify-content: center; padding: 30px 36px; flex: 1.15; }
.cat { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.bc-logo { height: 46px; width: auto; align-self: flex-start; }
.bc-logo.lg { height: 52px; }
.bc-name { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1.2; }
.bc-name.lg { font-size: 38px; }
.bc-icon { width: 30px; height: 30px; border-radius: 8px; }
.bc-name.lg .bc-icon { width: 40px; height: 40px; border-radius: 10px; }
.bc-desc { font-size: 16px; margin-top: 6px; }
.bc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.bc-tags li { font-size: 14px; font-weight: 600; color: var(--ink); background: var(--tag); border-radius: 4px; padding: 5px 10px; }
.bc-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: auto; padding-top: 18px; }
.bcard.wide .bc-links { margin-top: 0; }
.brand-dgdr .tlink { color: var(--dgdr); }
.brand-unj .tlink { color: var(--unj); }
.bc-media { position: relative; }
.dgdr-media { flex: 1; display: flex; justify-content: center; align-items: flex-end; gap: 24px; padding: 28px 28px 0; background: #eef3f1; min-height: 300px; }
.dgdr-media .photo { width: 270px; align-self: center; margin-bottom: 28px; border-radius: var(--r-img); overflow: hidden; position: relative; }
.phone { width: 150px; flex-shrink: 0; border-radius: 24px 24px 0 0; background: #111; padding: 7px 7px 0; }
.phone img { border-radius: 18px 18px 0 0; width: 100%; }
.screen-stage { display: flex; justify-content: center; align-items: flex-end; background: #eef0f2; padding-top: 26px; height: 210px; overflow: hidden; }
.screen-stage .phone { align-self: flex-start; }
.real { position: absolute; left: 10px; bottom: 10px; font-size: 11.5px; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.9); padding: 3px 7px; border-radius: 4px; }
.facts-panel { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--soft); height: 210px; align-content: center; padding: 0 26px; border-bottom: 1px solid var(--line); }
.facts-panel div { padding-right: 12px; }
.facts-panel dt { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.facts-panel dd { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 4px; line-height: 1.4; }

/* 연혁·소식 2열 */
.two-lists { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.sl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.sl-head h2 { font-size: 30px; letter-spacing: -0.03em; }
.tl { border-top: 2px solid var(--ink); }
.tl li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.tl .y { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl .t { font-size: 14.5px; color: var(--muted); }
.tl .t b { display: block; font-size: 16px; color: var(--ink); }
.nlist { border-top: 2px solid var(--ink); }
.nrow { display: grid; grid-template-columns: 116px 1fr 150px; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
.nrow .d { font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.nrow .d small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.nrow h3 { font-size: 19px; line-height: 1.45; }
.n-title { border: 0; white-space: normal; font-size: inherit; }
a.n-title:hover { color: var(--ci); }
.n-main p { font-size: 15px; margin-top: 6px; }
.n-main .also { font-size: 13px; color: var(--muted); }
.also a:hover { text-decoration: underline; }
.nrow .r { text-align: right; font-size: 14px; font-weight: 600; color: var(--ink); }
.nlist.compact .nrow { grid-template-columns: 104px 1fr; gap: 18px; padding: 12px 0; }
.nlist.compact h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.yearhead { font-size: 15px; font-weight: 700; color: var(--muted); padding: 32px 0 10px; letter-spacing: 0; }
.ngroup:first-of-type .yearhead { padding-top: 8px; }

/* 구성원·문의 (메인) */
.people-row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.people-row h2 { font-size: 26px; letter-spacing: -0.03em; }
.people-row p { font-size: 16px; margin-top: 6px; max-width: 680px; }
.pr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 14px; color: var(--muted); }
.contact-mini { display: grid; grid-template-columns: 1fr 1.5fr; gap: 72px; padding-top: 44px; }
.contact-mini h2 { font-size: 28px; }
.contact-mini > div > p { margin-top: 12px; font-size: 16px; color: var(--ink); }
.more-line { margin-top: 14px; }

/* 문의 목록 */
.clist { border-top: 2px solid var(--ink); }
.crow { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.crow .k { font-size: 16px; font-weight: 700; color: var(--ink); }
.crow .v { font-size: 15px; color: var(--ink); }
.crow .v small { display: block; font-size: 13px; color: var(--muted); }
.crow .v .cv { color: var(--ink); font-variant-numeric: tabular-nums; }
.crow .v .cv:hover, a.cv:hover { text-decoration: underline; text-underline-offset: 3px; }
.crow .v .dot { font-style: normal; color: var(--line-2); margin: 0 8px; }
.crow .a .tlink { font-size: 14px; }
.cgroups { border-top: 2px solid var(--ink); }
.cg { display: grid; grid-template-columns: 200px 1fr; gap: 40px; padding: 24px 0; border-top: 1px solid var(--line); }
.cgroups .cg:first-child { border-top: 0; }
.cg h2 { font-size: 18px; padding-top: 12px; }
.cg .clist { border-top: 0; }
.cg .crow:last-child { border-bottom: 0; }
.sec.short .cg { border-top: 0; padding: 0; }
.sec.short .cg h2 { padding-top: 0; }
.addr { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.addr b { display: block; color: var(--ink); font-size: 15px; }
.addr span { font-size: 15px; }
.links-line { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; }

/* 서브페이지 공통 */
.page-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--line); }
.crumb { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.crumb a:hover { color: var(--ink); }
.page-hero h1 { font-size: 46px; letter-spacing: -0.035em; }
.page-hero .lead { margin-top: 12px; max-width: 760px; }
.two { display: grid; grid-template-columns: 260px 1fr; gap: 64px; }
.two-h h2 { font-size: 26px; }
.two-h p { font-size: 14px; color: var(--muted); margin-top: 10px; line-height: 1.6; }
.about-logo { width: 130px; margin-top: 28px; }
.sub-h { font-size: 18px; margin: 48px 0 14px; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
table.info { font-size: 16px; border-top: 2px solid var(--ink); }
table.info th, table.info td { text-align: left; padding: 15px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.info th { width: 170px; font-weight: 600; color: var(--ink); padding-left: 0; }
table.grid { font-size: 15px; border-top: 2px solid var(--ink); min-width: 640px; }
table.grid th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 12px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.grid td { padding: 13px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid td:first-child, table.grid th:first-child { padding-left: 0; }
table.grid b { color: var(--ink); font-weight: 600; }
table.grid small { display: block; font-size: 13px; color: var(--muted); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.tag.solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.facts { display: grid; grid-template-columns: 120px 1fr; row-gap: 10px; column-gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--ink); font-size: 15.5px; }
.facts dt { font-weight: 700; color: var(--ink); }

/* 걸어온 길 */
.chapters { border-top: 2px solid var(--ink); }
.chapter { display: grid; grid-template-columns: 340px 1fr; gap: 48px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.ch-yr { font-size: 15px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-head h3 { font-size: 24px; letter-spacing: -0.03em; margin-top: 4px; }
.ch-scale { margin-top: 12px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.75; }
.ch-scale small { font-size: 12.5px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.ch-list li { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 7px 0; font-size: 15.5px; line-height: 1.6; }
.ch-list .m { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ch-list b { color: var(--ink); font-weight: 600; }
.ch-list em { font-style: normal; font-size: 12.5px; color: var(--muted); margin-left: 8px; white-space: nowrap; }

/* 서비스 */
.brand-head { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.brand-head h2 { font-size: 30px; letter-spacing: -0.03em; margin-top: 14px; line-height: 1.35; }
.brand-head > div > p:not(.cat):not(.bc-name):not(.links-line) { font-size: 16.5px; margin-top: 12px; }
.brand-head .dgdr-media, .brand-head .screen-stage, .brand-head .facts-panel { border-radius: var(--r-card); min-height: 320px; height: auto; }
.brand-head .facts-panel { grid-template-columns: 1fr; gap: 18px; padding: 36px; }
.brand-head .phone { width: 180px; }
#dgdr .facts { margin-top: 36px; }
.stages { margin-top: 32px; border-top: 2px solid var(--ink); }
.stage { display: grid; grid-template-columns: 190px 1fr; gap: 32px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.stage h3 { font-size: 19px; display: flex; gap: 10px; align-items: baseline; }
.stage .no { font-size: 13px; font-weight: 700; color: var(--muted); }
.stage ul { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 36px; }
.svc { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; }
.svc b { font-size: 17px; color: var(--ink); }
.svc p { font-size: 14.5px; margin-top: 2px; line-height: 1.55; }
.svc small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.svc .go { font-size: 13.5px; font-weight: 600; color: var(--dgdr); white-space: nowrap; }

/* 구성원 */
.person { display: grid; grid-template-columns: 300px 1fr; gap: 56px; align-items: start; }
.person.no-photo { grid-template-columns: 1fr; max-width: 760px; }
.person .portrait { aspect-ratio: 4 / 5; border-radius: var(--r-img); overflow: hidden; }
.person .role { font-size: 14px; font-weight: 600; color: var(--muted); }
.person h2 { font-size: 34px; margin-top: 2px; }
.person .intro { font-size: 17px; margin-top: 10px; }
.rows { border-top: 2px solid var(--ink); }
.rows li { display: grid; grid-template-columns: 170px 1fr 180px; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rows b { font-size: 17px; color: var(--ink); }
.rows span { font-size: 15px; }
.rows i { font-style: normal; font-size: 13.5px; color: var(--muted); text-align: right; }
.rows + .rows { border-top: 0; }
.empty-line { padding: 16px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); }
.empty-line b { display: block; color: var(--ink); }
.empty-line span { font-size: 14.5px; color: var(--muted); }
.empty-line + .rows { border-top: 0; }
.nf { text-align: left; padding: 40px 0 80px; }
.nf h1 { font-size: 40px; }

/* 바닥글 — 유일한 어두운 면 */
.site-footer { background: var(--foot); color: #a3aaa6; font-size: 13.5px; padding: 56px 0 48px; }
.site-footer .top { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.09); }
.site-footer .logo img { height: 42px; }
.f-desc { margin-top: 10px; }
.fcols { display: flex; gap: 56px; }
.fcols .fh { color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0; }
.fcols a { display: block; line-height: 2; }
.fcols a:hover { color: #fff; }
.biz { margin-top: 20px; line-height: 1.75; }
.biz span { white-space: nowrap; }
.biz span + span::before { content: "·"; margin: 0 8px; color: #555c58; }
.biz.l2 { margin-top: 0; }
.top .biz { margin-top: 16px; }
.top .biz.l2 { margin-top: 0; }
.biz-subs { margin-top: 8px; }
.biz-subs .biz.sub { margin-top: 0; font-size: 12.5px; line-height: 1.7; color: #848b87; }
.copy { margin-top: 20px; color: #6d756f; }
@media (min-width: 1081px) { .f-desc { white-space: nowrap; } }
.fcols { flex-shrink: 0; }
/* 중간 폭: 회사 정보가 두 줄을 유지하도록 메뉴를 아래로 */
@media (min-width: 761px) and (max-width: 1279px) { .site-footer .top { flex-direction: column; gap: 28px; } }

/* ── 모바일 ── */
@media (max-width: 1080px) {
  .blds { grid-template-columns: repeat(3, 1fr); row-gap: 28px; }
  .hero-grid { gap: 48px; }
}
@media (max-width: 760px) {
  :root { --sec: 42px; --sec-short: 28px; }
  html { scroll-padding-top: 70px; }
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .site-header .wrap { height: 60px; gap: 0; justify-content: space-between; }
  .logo img { height: 36px; }
  .gnb, .dd { display: none; }
  .mnav { display: block; }
  .mnav summary { list-style: none; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--ink); cursor: pointer; }
  .mnav-panel { position: absolute; left: 0; right: 0; top: 60px; background: #fff; border-bottom: 1px solid var(--line); padding: 8px 20px 20px; box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  .mnav-panel nav a { display: block; padding: 12px 0; font-size: 17px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
  .mnav-h { font-size: 13px; font-weight: 700; color: var(--muted); margin: 16px 0 4px; }
  .mnav-panel .dd-link { padding: 8px 0; }

  .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .sec-head h2 { font-size: 25px; }
  .sec-head p { font-size: 14.5px; }
  .hero { padding-top: 28px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { font-size: 31px; line-height: 1.33; }
  .lead { font-size: 15.5px; margin-top: 14px; }
  .actions { margin-top: 20px; }
  .hero .actions .btn { flex: 1; height: 48px; }
  .path { padding: 12px 0; }
  .path .who { display: none; }
  .path .q { font-size: 16px; }
  .path .go { font-size: 13.5px; }

  .blds { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 18px 0 16px; border-left: 0; border-bottom: 1px solid var(--line); }
  .stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .stats-3 .stat:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .stat .n { font-size: 34px; }
  .stat .n small { font-size: 17px; }
  .trust-row { grid-template-columns: 1fr; gap: 8px; }
  .trust-row p:not(.tr-k) { display: flex; justify-content: space-between; gap: 10px; }
  .trust-row small { text-align: right; }

  .brands { grid-template-columns: 1fr; gap: 14px; }
  .bcard.wide { flex-direction: column; }
  .bcard.wide .bc-body, .bc-body { padding: 18px 18px 20px; }
  .dgdr-media { order: -1; gap: 14px; padding: 20px 20px 0; min-height: 0; }
  .dgdr-media .photo { width: 58%; margin-bottom: 20px; }
  .phone { width: 110px; }
  .screen-stage { height: 170px; }
  .facts-panel { height: auto; padding: 14px 18px; grid-template-columns: 1fr; gap: 0; }
  .facts-panel div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
  .facts-panel dd { margin: 0; font-size: 15px; text-align: right; }
  .bc-logo { height: 36px; }
  .bc-name { font-size: 24px; }
  .bc-name.lg { font-size: 30px; }
  .bc-desc { font-size: 15px; }

  .two-lists { grid-template-columns: 1fr; gap: 36px; }
  .sl-head h2 { font-size: 23px; }
  .tl li { grid-template-columns: 76px 1fr; gap: 10px; padding: 11px 0; }
  .tl .y { white-space: nowrap; }
  .tl .y { font-size: 15px; }
  .tl .t { font-size: 0; }                 /* 모바일은 시기 제목만 */
  .tl .t b { font-size: 15.5px; }
  .nrow { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .nrow .d { display: flex; gap: 8px; font-size: 13.5px; }
  .nrow .d small { display: inline; }
  .nrow h3 { font-size: 16.5px; }
  .nrow .r { text-align: left; font-size: 13px; }
  .nlist.compact .nrow { grid-template-columns: 1fr; gap: 2px; }

  .people-row { grid-template-columns: 1fr; gap: 12px; padding-bottom: 32px; }
  .people-row h2 { font-size: 21px; }
  .people-row p { font-size: 15px; }
  .pr-side { flex-direction: row; justify-content: space-between; align-items: baseline; }
  .contact-mini { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; }
  .contact-mini h2 { font-size: 22px; }
  .crow { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 13px 0; }
  .crow .k { font-size: 15px; }
  .crow .v { grid-column: 1; font-size: 14px; }
  .crow .a { grid-column: 2; grid-row: 1 / 3; }
  .cg { grid-template-columns: 1fr; gap: 4px; padding: 18px 0; }
  .cg h2 { padding-top: 0; font-size: 16px; }
  .addr { grid-template-columns: 1fr; gap: 12px; }

  .page-hero { padding: 32px 0 26px; }
  .page-hero h1 { font-size: 28px; line-height: 1.35; }
  .two { grid-template-columns: 1fr; gap: 18px; }
  .two-h h2 { font-size: 22px; }
  .about-logo { display: none; }
  table.info th { width: 110px; }
  table.info th, table.info td { padding: 12px 8px; font-size: 15px; }
  .chapter { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .ch-head h3 { font-size: 20px; }
  .ch-list li { grid-template-columns: 62px 1fr; font-size: 14.5px; }
  .ch-list em { display: block; margin: 0; }
  .brand-head { grid-template-columns: 1fr; gap: 22px; }
  .brand-head h2 { font-size: 22px; }
  .brand-head .dgdr-media, .brand-head .screen-stage { min-height: 0; }
  .brand-head .facts-panel { min-height: 0; padding: 20px; }
  .brand-head .phone { width: 130px; }
  .facts { grid-template-columns: 1fr; row-gap: 2px; }
  .facts dd { margin-bottom: 10px; }
  .stage { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
  .stage ul { grid-template-columns: 1fr; gap: 14px; }
  .person { grid-template-columns: 1fr; gap: 18px; }
  .person h2 { font-size: 26px; }
  .rows li { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
  .rows i { text-align: left; }

  .site-footer { padding: 36px 0 32px; }
  .site-footer .top { flex-direction: column; gap: 22px; padding-bottom: 20px; }
  /* 모바일: 로고·소개 → 메뉴 → 회사 정보 순서 (회사 정보가 자회사 줄과 이어지게) */
  .site-footer .top > div:first-child { display: contents; }
  .site-footer .top .logo { order: 1; } .f-desc { order: 2; margin-top: -12px; } .fcols { order: 3; }
  .top .biz { order: 4; margin-top: 0; } .top .biz.l2 { order: 5; margin-top: -22px; }
  .biz-subs { order: 6; margin-top: -14px; }
  .biz-subs .biz.sub { font-size: 11.5px; }
  .biz-subs .biz.sub + .biz.sub { margin-top: 6px; }
  .fcols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .fchan { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .fchan .fh { grid-column: 1 / -1; }
  .fcols a { line-height: 1.85; }
  .biz { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 16px; font-size: 12.5px; line-height: 1.75; }
  .biz span + span::before { content: none; }
  .biz.sub { margin-top: 8px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── 메인 브랜드 카드 (왼쪽 글 · 오른쪽 이미지) ── */
.brands { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bx { display: grid; grid-template-columns: 1fr 1.1fr; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bx.wide { grid-column: 1 / -1; grid-template-columns: 0.82fr 1.18fr; }
.bx-body { display: flex; flex-direction: column; align-items: flex-start; padding: 36px 34px 32px; }
.bx.wide .bx-body { padding: 44px 40px 40px; justify-content: center; }
.bx .cat { font-size: 15px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.bx-logo { height: 64px; width: auto; }
.bx-wordmark { height: 40px; width: auto; }
.bx-name { display: flex; align-items: center; gap: 12px; font-size: 38px; font-weight: 800; color: var(--ink); letter-spacing: -0.035em; line-height: 1.15; }
.bx-icon { width: 56px; height: 56px; border-radius: 14px; }
.bx-title { font-size: 26px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.3; margin-top: 22px; }
.bx.wide .bx-title { font-size: 30px; }
.bx-unj .bx-title { font-size: 30px; }
.bx-desc { font-size: 17px; color: var(--muted); margin-top: 10px; line-height: 1.65; }
.bx.wide .bx-desc { font-size: 18px; }
.bx-lines { font-size: 16.5px; color: var(--muted); margin-top: 18px; line-height: 1.75; }
.bx-facts { font-size: 16px; color: var(--muted); line-height: 1.75; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); align-self: stretch; max-width: 200px; }
.bx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.bx-actions .btn { height: 54px; padding: 0 26px; font-size: 16.5px; border-radius: 6px; }
.bx-actions .btn.primary { min-width: 200px; background: #1f2326; }
.bx-actions .btn.line { min-width: 180px; border-color: #b9bec1; }
.bx-actions .btn.unj { color: var(--unj); border-color: var(--unj); }
.bx-actions .btn.unj:hover { background: #f2f6fe; }
.bx-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin-top: 18px; font-size: 14.5px; }
.bx-link { color: var(--muted); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.bx-link:hover { color: var(--ink); }
.bx-links .sep { display: inline-block; width: 1px; height: 13px; background: var(--line-2); margin: 0 14px; }
.bx-dgdr .bx-links .sep { width: auto; height: auto; background: none; margin: 0 8px; }
.bx-dgdr .bx-links .sep::before { content: "·"; color: var(--muted); }
.bx-media { position: relative; min-height: 100%; }
.bx-photo img { width: 100%; height: 100%; object-fit: cover; }
.bx-label { position: absolute; right: 14px; bottom: 14px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(30,32,34,.68); padding: 6px 12px; border-radius: 6px; }
.bx-collage { display: grid; grid-template-rows: 1.15fr 1fr; gap: 4px; background: #fff; }
.bx-collage .row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; min-height: 0; }
.bx-collage .row.top { grid-template-columns: 1.55fr 1fr; }
.bx-collage figure { position: relative; overflow: hidden; min-height: 0; }
.bx-collage img { width: 100%; height: 100%; object-fit: cover; }
.bx-collage figcaption { position: absolute; left: 10px; top: 10px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(30,32,34,.68); padding: 4px 10px; border-radius: 5px; }
.bx-collage .bx-label { font-size: 12.5px; background: rgba(255,255,255,.92); color: var(--ink); border: 1px solid var(--line); }
.bx-phone { display: flex; align-items: center; justify-content: center; background: #f2f4f6; padding: 22px 0; }
.bx-phone .device { width: 230px; border-radius: 38px; background: #111; padding: 9px; box-shadow: 0 18px 40px -22px rgba(0,0,0,.45); }
.bx-phone .device img { border-radius: 30px; width: 100%; }

@media (max-width: 1080px) {
  .brands { grid-template-columns: 1fr; }
  .bx, .bx.wide { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .brands { gap: 14px; }
  .bx, .bx.wide { grid-template-columns: 1fr; }
  .bx-media { order: -1; min-height: 0; }
  .bx-photo { aspect-ratio: 16 / 10; }
  .bx-collage { height: 300px; }
  .bx-phone { height: 300px; align-items: flex-start; overflow: hidden; padding: 24px 0 0; }
  .bx-phone .device { width: 180px; border-radius: 30px 30px 0 0; padding-bottom: 0; }
  .bx-phone .device img { border-radius: 23px 23px 0 0; }
  .bx-body, .bx.wide .bx-body { padding: 22px 20px 24px; }
  .bx .cat { margin-bottom: 10px; }
  .bx-logo { height: 50px; }
  .bx-wordmark { height: 34px; }
  .bx-name { font-size: 30px; }
  .bx-icon { width: 46px; height: 46px; border-radius: 12px; }
  .bx-title, .bx.wide .bx-title, .bx-unj .bx-title { font-size: 22px; margin-top: 16px; }
  .bx-desc, .bx.wide .bx-desc { font-size: 15.5px; }
  .bx-lines { font-size: 15px; margin-top: 12px; }
  .bx-actions { width: 100%; margin-top: 20px; gap: 8px; }
  .bx-actions .btn { flex: 1; min-width: 0; height: 50px; padding: 0 14px; font-size: 15.5px; }
}

/* 브랜드 카드 비율 보정 */
.bx { grid-template-columns: 0.92fr 1.08fr; }
.bx.wide { grid-template-columns: 0.86fr 1.14fr; }
.bx-unj { grid-template-columns: 1fr 1fr; }
.bx-body { padding: 34px 30px 30px; }
.bx-wfd .bx-title { font-size: 24px; }
.bx-unj .bx-title { font-size: 28px; }
.bx-actions .btn.primary { min-width: 170px; }
.bx-actions .btn.line { min-width: 0; }
.bx-links { font-size: 14px; }
.bx-links .sep { margin: 0 10px; }
.bx-collage .row.top { grid-template-columns: 1.3fr 1fr; }
@media (max-width: 760px) {
  .bx, .bx.wide, .bx-unj { grid-template-columns: 1fr; }
  .bx-body, .bx.wide .bx-body { padding: 22px 20px 24px; }
  .bx-wfd .bx-title, .bx-unj .bx-title { font-size: 22px; }
}

/* 브랜드 카드 — 받은 이미지 소재 반영 (넓은 화면에서 영역만 1440px 까지) */
.sec-brands .wrap { max-width: 1440px; }
.brands { grid-template-columns: 1.3fr 1fr; }
.bx-wfd { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.bx-unj { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.bx-photo img { position: absolute; inset: 0; }
.bx-collage { position: relative; aspect-ratio: 1210 / 1300; align-self: stretch; background: #fff; display: block; }
.bx-collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bx-cap { position: absolute; transform: translate(10px, 10px); font-size: 13px; font-weight: 600; color: #fff; background: rgba(30,32,34,.66); padding: 4px 10px; border-radius: 5px; white-space: nowrap; }
.bx-cap.up { transform: translate(10px, calc(-100% - 10px)); }
.bx-collage .bx-label { font-size: 12.5px; background: rgba(255,255,255,.92); color: var(--ink); border: 1px solid var(--line); }
.bx-phone .device { width: 214px; }
.bx-phone .device img { aspect-ratio: 780 / 1688; object-fit: contain; background: #fff; }
.bx-lockup { display: flex; align-items: center; gap: 12px; }
.bx-lockup img { height: 34px; width: auto; filter: brightness(0); }
.bx-lockup span { display: flex; flex-direction: column; line-height: 1.15; }
.bx-lockup b { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; }
.bx-lockup small { font-size: 12px; color: var(--ink-2); letter-spacing: 0.04em; margin-top: 2px; }
.bx-lockup.lg img { height: 46px; }
.bx-lockup.lg b { font-size: 30px; }
.bx-lockup.lg small { font-size: 14px; }
@media (max-width: 1080px) {
  .brands { grid-template-columns: 1fr; }
  .bx-wfd, .bx-unj { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .bx-wfd, .bx-unj { grid-template-columns: 1fr; }
  .bx-photo { position: relative; }
  .bx-collage { height: auto; }
  .bx-cap { font-size: 12px; padding: 3px 8px; transform: translate(8px, 8px); }
  .bx-cap.up { transform: translate(8px, calc(-100% - 8px)); }
  .bx-phone .device { width: 180px; }
  .bx-phone .device img { aspect-ratio: auto; }
  .bx-lockup.lg b { font-size: 24px; }
}
.bx-collage { width: 100%; min-width: 0; aspect-ratio: auto; min-height: 0; }
.bx-collage img { object-position: 100% 50%; }
.bx-wfd .bx-facts { margin-top: 16px; padding-top: 14px; }
.bx-wfd .bx-actions { margin-top: 22px; }
@media (min-width: 761px) { .bx-wfd .bx-collage { min-height: 100%; } }
@media (max-width: 760px) { .bx-collage { aspect-ratio: 1210 / 1300; } }

/* ════ 서비스 페이지 (/services/) ════ */
.sv-hero h1 { font-size: 42px; }
.sv { padding: 56px 0 64px; }
.sv.soft { background: #f3f6f8; }
.sv h2 { font-size: 34px; letter-spacing: -0.035em; line-height: 1.32; }
.sv-desc { font-size: 17px; color: var(--muted); margin-top: 10px; line-height: 1.65; }
.sv-eyebrow { display: flex; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.sv-eyebrow b { color: var(--ink); font-weight: 700; }
.sv-eyebrow b::after { content: ""; display: inline-block; width: 1px; height: 12px; background: var(--line-2); margin: 0 10px; vertical-align: -1px; }
.sv-split { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.sv-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.sv-brand img { height: 46px; width: auto; }
.sv-brand span { font-size: 14px; color: var(--muted); }
.sv-types { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 700; color: var(--dgdr); background: #e8f5ef; border-radius: 6px; padding: 8px 14px; }
.sv-checks { margin-top: 18px; }
.sv-checks li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--ink-2); padding: 5px 0; }
.sv-checks .ck { width: 22px; height: 22px; flex-shrink: 0; }
.sv-actions { margin-top: 26px; }
.btn.wide { width: 100%; max-width: 360px; height: 56px; font-size: 17px; }
.btn.sv-green { background: #0f7a55; color: #fff; }
.btn.sv-green:hover { background: #0c6646; }
.btn.sv-green-line { border: 1.5px solid #0f7a55; color: #0f7a55; background: #fff; }
.btn.sv-green-line:hover { background: #f0f8f4; }
.btn.sv-blue { background: var(--unj); color: #fff; }
.btn.sv-blue:hover { background: #1d4fd0; }
.sv-site { margin-top: 12px; font-size: 14px; }
.sv-site.right { text-align: right; }
.sv-sitelink { color: var(--muted); }
.sv-sitelink:hover { color: var(--ink); text-decoration: underline; }
.sv-browser figcaption { font-size: 13px; color: var(--muted); margin-top: 12px; }
.bw-frame { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 16px 40px -28px rgba(0,0,0,.35); }
.bw-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f1f2f3; border-bottom: 1px solid var(--line); }
.bw-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.bw-bar i:nth-child(2) { background: #febc2e; } .bw-bar i:nth-child(3) { background: #28c840; }
.bw-bar span { margin-left: 12px; flex: 1; max-width: 360px; height: 18px; border-radius: 4px; background: #fff; font-size: 11px; color: var(--muted); line-height: 18px; padding: 0 10px; }
.bw-frame img { width: 100%; }

/* 임대인 */
.ld-models { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.ld-svcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 18px; }
.ld-model, .ld-svc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; background: #fff; border: 1px solid #e3e8ec; border-radius: 10px; transition: border-color .15s; }
.ld-model { padding: 22px 24px; }
.ld-svc { padding: 16px 18px; gap: 14px; }
.ld-model:hover, .ld-svc:hover { border-color: #a9b6bf; }
.ld-ic { display: flex; color: var(--ink-2); }
.ld-ic .ic { width: 40px; height: 40px; }
.ld-svc .ld-ic .ic { width: 34px; height: 34px; }
.ld-ic.tone-blue { color: #2f6fd6; } .ld-ic.tone-green { color: var(--dgdr); }
.ld-body { display: flex; flex-direction: column; min-width: 0; }
.ld-body b { font-size: 18px; color: var(--ink); letter-spacing: -0.02em; }
.ld-svc .ld-body b { font-size: 16.5px; }
.ld-body span { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.ld-body small { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.ld-svc .ld-body small { margin-top: 2px; }
.chev { font-size: 24px; line-height: 1; color: var(--ink-2); }
.ld-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.ld-actions .btn { height: 54px; font-size: 16.5px; }

/* 원패밀리디자인 */
.wf-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.wf-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.sv-tag { font-size: 14px; color: var(--muted); }
.wf-license { display: flex; align-items: center; gap: 16px; background: #f1f4f8; border-radius: 10px; padding: 20px 24px; max-width: 420px; }
.wf-ic { width: 40px; height: 40px; color: var(--ink-2); flex-shrink: 0; }
.wf-license b { display: block; font-size: 17px; color: var(--ink); }
.wf-license span { font-size: 14px; color: var(--muted); }
.wf-spaces { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.wf-space { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.wf-space:hover { border-color: #a9b6bf; }
.wf-space .ph { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
.wf-space .ph img { width: 100%; height: 100%; object-fit: cover; }
.wf-space .nm { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 17px; font-weight: 700; color: var(--ink); }
.wf-label { position: absolute; right: 12px; top: 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.92); border: 1px solid var(--line); padding: 4px 10px; border-radius: 6px; }
.wf-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 22px; }
.wf-facts { font-size: 14.5px; color: var(--muted); }
.wf-actions { display: flex; gap: 12px; }
.wf-actions .btn { height: 50px; min-width: 200px; }

/* 언제나가 */
.unj-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; }
.sv-brand.unj { gap: 12px; margin-bottom: 8px; }
.sv-brand.unj b { font-size: 34px; font-weight: 800; color: var(--unj); letter-spacing: -0.03em; }
.unj-ic { width: 44px; height: 44px; border-radius: 11px; }
.sv-tag2 { font-size: 14px; color: var(--muted); margin: 0 0 18px 56px; }
.st-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 360px; margin-top: 12px; }
.btn.st { height: 50px; font-size: 15px; color: var(--unj); border-color: #b9c8ee; }
.st-ic { width: 20px; height: 20px; color: #111; }
.unj-shots .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.unj-shots .shot { display: block; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 28px -20px rgba(0,0,0,.4); }
.unj-shots img { width: 100%; }
.unj-shots figcaption { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* 맺음 */
.sv-cta { background: var(--soft); padding: 28px 0; }
.sv-cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.sv-cta p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.sv-cta b { font-size: 19px; color: var(--ink); }
.sv-cta span { font-size: 14.5px; color: var(--muted); }
.sv-cta .btn { min-width: 160px; }

@media (max-width: 1080px) {
  .sv-split, .unj-split { grid-template-columns: 1fr; gap: 32px; }
  .ld-svcs { grid-template-columns: 1fr 1fr; }
  .wf-head { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sv-hero h1 { font-size: 30px; }
  .sv { padding: 40px 0 44px; }
  .sv h2 { font-size: 24px; }
  .sv-desc { font-size: 15.5px; }
  .sv-brand { margin-bottom: 18px; }
  .sv-brand img { height: 38px; }
  .sv-types { font-size: 13.5px; padding: 7px 12px; }
  .sv-checks li { font-size: 15px; }
  .btn.wide { max-width: none; height: 52px; }
  .bw-bar { height: 24px; } .bw-bar span { height: 15px; line-height: 15px; font-size: 10px; }
  .ld-models { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .ld-model { padding: 18px; gap: 14px; }
  .ld-ic .ic { width: 34px; height: 34px; }
  .ld-body b { font-size: 16.5px; }
  .ld-body span { font-size: 14px; }
  .ld-svcs { gap: 10px; margin-top: 10px; }
  .ld-svc { padding: 14px; gap: 10px; grid-template-columns: auto 1fr; }
  .ld-svc .chev { display: none; }
  .ld-svc .ld-body b { font-size: 15px; }
  .ld-svc .ld-body small { font-size: 12.5px; }
  .ld-svc .ld-ic .ic { width: 28px; height: 28px; }
  .ld-actions { grid-template-columns: 1fr; gap: 10px; }
  .wf-brand { flex-wrap: wrap; gap: 8px 14px; }
  .wf-license { padding: 16px 18px; max-width: none; }
  .wf-spaces { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .wf-space .ph { aspect-ratio: 1 / 1; }
  .wf-space .nm { padding: 10px 10px; font-size: 14.5px; }
  .wf-label { font-size: 11px; right: 6px; top: 6px; padding: 3px 7px; }
  .wf-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .wf-actions { flex-direction: column; }
  .wf-actions .btn { min-width: 0; width: 100%; }
  .sv-site.right { text-align: left; }
  .sv-brand.unj b { font-size: 28px; }
  .sv-tag2 { margin-left: 0; }
  .st-row { max-width: none; }
  .unj-shots .row { gap: 8px; }
  .sv-cta .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sv-cta b { font-size: 17px; }
  .sv-cta .btn { width: 100%; }
}

/* ════ 구성원·채용 (/team/) ════ */
:root { --tm-blue: #1170fd; }
.tm-hero { padding: 48px 0 56px; }
.tm-hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.tm-hero h1 { font-size: 44px; letter-spacing: -0.035em; line-height: 1.28; }
.tm-hero .lead { margin-top: 18px; font-size: 18px; color: var(--muted); }
.em-panel { text-align: center; }
.em-grid { background: #f4f6f8; border-radius: 14px; padding: 26px 18px; display: flex; flex-direction: column; gap: 16px; }
.em-row { display: flex; justify-content: center; gap: 12px; }
.em-tile { width: 68px; height: 68px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #e3e7ea; border-radius: 10px; font-size: 40px; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; box-shadow: 0 2px 6px -4px rgba(0,0,0,.2); }
.em-panel figcaption { font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.em-tile.is-img { width: 76px; height: 76px; padding: 4px; }
.em-tile.is-img img { width: 100%; height: 100%; object-fit: contain; }

.tm-roles { background: #f5f7f9; padding: 56px 0 44px; }
.tm-roles h2, .tm-recruit h2 { font-size: 32px; letter-spacing: -0.035em; }
.tm-desc { font-size: 17px; color: var(--muted); margin-top: 8px; }
.tm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.tm-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e7ea; border-radius: 10px; padding: 22px 22px 18px; }
.tm-card .em { font-size: 44px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.tm-card h3 { font-size: 21px; margin-top: 16px; letter-spacing: -0.03em; }
.tm-card p { font-size: 15px; color: var(--muted); margin-top: 10px; line-height: 1.65; flex: 1; }
.tm-brand { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14.5px; font-weight: 700; color: var(--tm-blue); }
.tm-brand:hover { text-decoration: underline; }
.tm-people { margin-top: 32px; border-top: 1.5px solid var(--ink); }
.tm-person { display: grid; grid-template-columns: 160px 1fr; align-items: center; padding: 20px 0 4px; }
.tm-person .photo { display: none; }
.tm-person .who { padding-right: 24px; border-right: 1px solid var(--line-2); }
.tm-person .who small { display: block; font-size: 13.5px; color: var(--muted); }
.tm-person .who b { display: block; font-size: 28px; color: var(--ink); letter-spacing: -0.03em; line-height: 1.25; }
.tm-person .say { padding-left: 32px; }
.tm-person .say span { display: block; font-size: 16.5px; color: var(--ink); }
.tm-person .say small { display: block; font-size: 13.5px; color: var(--muted); margin-top: 4px; }

.tm-principles { padding: 48px 0 0; }
.tm-principles h2 { font-size: 26px; margin-bottom: 16px; display: inline-block; }

.tm-recruit { padding: 52px 0 64px; }
.tm-bar { display: block; width: 48px; height: 3px; background: var(--tm-blue); margin-bottom: 26px; }
.tm-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.tm-box { display: grid; grid-template-columns: 44px 1fr; gap: 18px; border: 1px solid #e3e7ea; border-radius: 10px; padding: 28px 28px 26px; }
.tm-box.blue { background: #eff6ff; border-color: #eff6ff; }
.tm-ic { color: var(--tm-blue); }
.tm-ic svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-box h3 { font-size: 19px; letter-spacing: -0.02em; }
.tm-sub { font-size: 15px; color: var(--muted); margin-top: 8px; line-height: 1.7; }
.tm-past { margin-top: 18px; font-size: 14px; }
.tm-link { color: var(--muted); border-bottom: 1px solid currentColor; }
.tm-link:hover { color: var(--ink); }
.tm-email { margin-top: 10px; }
.tm-email a { font-size: 26px; font-weight: 800; color: var(--tm-blue); letter-spacing: -0.01em; }
.btn.tm-btn { margin-top: 14px; width: 100%; max-width: 300px; height: 48px; background: var(--tm-blue); color: #fff; font-size: 15.5px; }
.btn.tm-btn:hover { background: #0a5fdc; }
.tm-note { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.tm-jobs { margin-top: 10px; }
.tm-jobs li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.tm-jobs b { color: var(--ink); }
.tm-jobs span { font-size: 14px; color: var(--muted); }
.tm-banner { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 16px; background: #f0f7ff; border-radius: 10px; padding: 22px 24px; }
.tm-banner .tm-ic svg { width: 36px; height: 36px; }
.tm-banner p { display: flex; flex-direction: column; }
.tm-banner b { font-size: 19px; color: var(--ink); letter-spacing: -0.02em; }
.tm-banner span { font-size: 14px; color: var(--muted); margin-top: 2px; }

@media (max-width: 1080px) {
  .tm-hero .wrap { grid-template-columns: 1fr; gap: 32px; }
  .tm-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .tm-hero { padding: 32px 0 40px; }
  .tm-hero h1 { font-size: 28px; }
  .tm-hero .lead { font-size: 15.5px; margin-top: 12px; }
  .em-grid { padding: 18px 10px; gap: 10px; }
  .em-row { gap: 6px; flex-wrap: wrap; }
  .em-tile { width: 48px; height: 48px; font-size: 28px; border-radius: 8px; }
  .em-tile.is-img { width: 48px; height: 48px; padding: 2px; }
  .tm-roles { padding: 40px 0 32px; }
  .tm-roles h2, .tm-recruit h2 { font-size: 23px; }
  .tm-desc { font-size: 15px; }
  .tm-cards { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .tm-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px 18px; }
  .tm-card .em { font-size: 32px; grid-row: 1 / 4; }
  .tm-card h3 { font-size: 17.5px; margin-top: 0; }
  .tm-card p { font-size: 14px; margin-top: 4px; }
  .tm-brand { margin-top: 10px; padding-top: 10px; font-size: 13.5px; }
  .tm-person { grid-template-columns: 1fr; gap: 8px; }
  .tm-person .who { border-right: 0; padding-right: 0; }
  .tm-person .say { padding-left: 0; }
  .tm-recruit { padding: 40px 0 44px; }
  .tm-boxes { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  .tm-box { grid-template-columns: 36px 1fr; gap: 12px; padding: 20px 18px; }
  .tm-ic svg { width: 32px; height: 32px; }
  .tm-email a { font-size: 21px; }
  .btn.tm-btn { max-width: none; }
  .tm-banner { justify-content: flex-start; padding: 18px; gap: 12px; }
  .tm-banner b { font-size: 16px; }
}

/* 대표 소개 블록 */
.tm-people { margin-top: 32px; border-top: 0; display: grid; gap: 16px; }
.tm-person { display: grid; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 0.9fr); align-items: stretch; border-top: 1.5px solid var(--ink); padding: 24px 0 4px; }
.tm-person .who { padding: 0 28px 0 0; border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.tm-person .role { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tm-person h3 { font-size: 30px; letter-spacing: -0.03em; margin-top: 2px; line-height: 1.25; }
.tm-person .aff { font-size: 14.5px; color: var(--muted); margin-top: 2px; }
.tm-person .say { padding: 4px 32px; display: flex; flex-direction: column; justify-content: center; }
.tm-person .intro { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.55; letter-spacing: -0.02em; }
.tm-person .duty { font-size: 14.5px; color: var(--muted); margin-top: 8px; }
.tm-person .career { padding: 4px 0 4px 32px; border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.tm-person .ct { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.tm-person .career li { position: relative; padding: 5px 0 5px 14px; font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.tm-person .career li::before { content: ""; position: absolute; left: 0; top: 14px; width: 4px; height: 4px; border-radius: 50%; background: #9aa19d; }
.tm-person.has-photo { grid-template-columns: 140px 230px minmax(0, 1fr) minmax(0, 0.9fr); gap: 0; }
.tm-person.has-photo .photo { display: block; width: 116px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; }
@media (max-width: 1080px) {
  .tm-person { grid-template-columns: 200px minmax(0, 1fr); row-gap: 20px; }
  .tm-person .career { grid-column: 2; border-left: 0; padding: 18px 0 0 32px; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .tm-people { margin-top: 20px; }
  .tm-person, .tm-person.has-photo { grid-template-columns: 1fr; padding: 20px 0 0; row-gap: 0; }
  .tm-person .who { border-right: 0; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
  .tm-person h3 { font-size: 26px; }
  .tm-person .say { padding: 16px 0; }
  .tm-person .intro { font-size: 17px; }
  .tm-person .career { grid-column: auto; padding: 16px 0 0; border-top: 1px solid var(--line); }
  .tm-person .career li { font-size: 15px; }
}

/* ════ 회사소개 (/about/) — 차분하게 다듬기 ════ */
#overview, #experience, #history, #trust { scroll-margin-top: 72px; }
table.grid td.strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
table.grid td.muted { color: var(--muted); white-space: nowrap; }
table.grid td { padding-top: 12px; padding-bottom: 12px; }
.ch-list li { grid-template-columns: 76px minmax(0, 1fr) 180px; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ch-list li:last-child { border-bottom: 0; }
.ab-row { margin-top: 56px; }
.ab-row .two-h h3 { font-size: 19px; letter-spacing: -0.02em; }
.ch-list .src { font-size: 13px; color: var(--muted); text-align: right; padding-top: 2px; }
@media (max-width: 760px) {
  .ab-row { margin-top: 36px; }
  .ch-list li { grid-template-columns: 62px minmax(0, 1fr); row-gap: 2px; }
  .ch-list .src { grid-column: 2; text-align: left; padding-top: 0; }
  .ch-list .src:empty { display: none; }
}

/* ════ 소식 (/news/) — 연도별 2단 ════ */
.ngroups { border-top: 2px solid var(--ink); }
.ngroup { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; border-top: 1px solid var(--line); }
.ngroups .ngroup:first-child { border-top: 0; }
.ngroup .yearhead { font-size: 22px; color: var(--ink); letter-spacing: -0.02em; padding: 24px 0 0; position: sticky; top: 84px; align-self: start; }
.ngroups .ngroup:first-child .yearhead { padding-top: 24px; }
.ngroup .nlist { border-top: 0; }
.ngroup .nrow { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; }
.ngroup .nrow:last-child { border-bottom: 0; }
.ngroup .nrow .d small { margin-top: 3px; line-height: 1.5; }
.ngroup .nrow .d small b { font-weight: 600; color: var(--ink-2); }
@media (max-width: 760px) {
  .ngroup { grid-template-columns: 1fr; gap: 0; }
  .ngroup .yearhead { position: static; font-size: 18px; padding: 22px 0 2px; }
  .ngroup .nrow { grid-template-columns: 1fr; gap: 4px; }
  .ngroup .nrow .d small { display: inline; margin: 0; }
}

/* 동거동락 주거검색 화면 — 받은 캡처 전체를 보여주고, 오른쪽 끝은 본문 줄에 맞춤.
   글 칸을 줄여 화면을 최대한 크게 */
@media (min-width: 1081px) {
  .sv-tenant .sv-split { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 40px; align-items: center; }
}

/* 브랜드 카드 순서 — 넓은 화면: 글(로고·소개 → 상세) | 이미지.
   모바일: 로고·간단 소개 → 이미지 → 상세(서비스 목록·버튼·링크) */
.bx-top, .bx-more { align-self: stretch; }
@media (max-width: 760px) {
  .bx-body, .bx.wide .bx-body { display: contents; }
  .bx-top { order: 1; padding: 22px 20px 20px; }
  .bx-media { order: 2; }
  .bx-more { order: 3; padding: 4px 20px 24px; }
  .bx-more > :first-child { margin-top: 14px; }
}