/* dogye.kr public design. Section 1 is GENERATED from the accepted pitch mockup (001 Pages/Pitch/data/4umtvrj2/preview.html <style>):
   every mockup px value above 2px became calc(var(--u) * N) so it stays comparable 1:1 with the mockup. Do not hand-edit section 1. */

/* ===== 1. GENERATED FROM MOCKUP ===== */
.dg-root { --coal: #17191c; --coal2: #23262b; --slate: #3b4047; --paper: #f6f3ec; --paper2: #efeadf; --card: #ffffff; --line: #e4ddd0; --mute: #8a847a; --lamp: #f2c200; --lamp-d: #a88400; --bar: rgba(23,25,28,0.09); --bar-d: rgba(255,255,255,0.18); }
.px-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 30; height: calc(var(--u) * 44); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 20); background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--line); }
.px-brand { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; }
.px-brand img { height: calc(var(--u) * 17); width: auto; display: block; }
.px-links { display: flex; gap: calc(var(--u) * 14); }
.px-link { background: none; border: none; cursor: pointer; padding: calc(var(--u) * 3) 0; position: relative; font-size: calc(var(--u) * 9); font-weight: 600; color: var(--slate); letter-spacing: -0.01em; transition: color .2s; }
.px-link:hover { color: var(--coal); }
.px-link::after { content: ''; position: absolute; left: 50%; bottom: calc(var(--u) * -4); width: 0; height: 2px; background: var(--lamp); transition: width .25s ease, left .25s ease; }
.px-link.on { color: var(--coal); font-weight: 800; }
.px-link.on::after { left: 0; width: 100%; }
.px-panel { position: absolute; inset: 0; overflow: hidden; }
.px-eyebrow { font-size: calc(var(--u) * 8); font-weight: 800; letter-spacing: 0.18em; color: var(--lamp-d); margin: 0; }
.px-eyebrow.l { color: var(--lamp); }
.px-crumb { font-size: calc(var(--u) * 7.5); color: var(--mute); letter-spacing: 0.02em; margin: 0 0 calc(var(--u) * 6); }
.px-h2 { font-size: calc(var(--u) * 19); font-weight: 800; letter-spacing: -0.03em; color: var(--coal); margin: calc(var(--u) * 4) 0 0; line-height: 1.2; }
.px-bar { height: calc(var(--u) * 6); border-radius: calc(var(--u) * 99); background: var(--bar); }
.px-bar.d { background: var(--bar-d); }
.px-sub { background: var(--paper); display: flex; flex-direction: column; padding-top: calc(var(--u) * 44); }
.px-sub-band { height: calc(var(--u) * 74); flex-shrink: 0; position: relative; overflow: hidden; background: var(--coal); display: flex; align-items: flex-end; padding: 0 calc(var(--u) * 28) calc(var(--u) * 12); }
.px-sub-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.px-sub-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,25,28,0.85), rgba(23,25,28,0.2)); }
.px-sub-band div { position: relative; z-index: 1; }
.px-sub-band p { margin: 0; font-size: calc(var(--u) * 7.5); color: rgba(255,255,255,0.6); letter-spacing: 0.04em; }
.px-sub-band h2 { margin: calc(var(--u) * 3) 0 0; font-size: calc(var(--u) * 17); font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.px-sub-body { flex: 1; min-height: 0; padding: calc(var(--u) * 18) calc(var(--u) * 28) calc(var(--u) * 16); display: flex; flex-direction: column; }
.px-hero { background: var(--coal); display: flex; flex-direction: column; }
.px-hero-ph { position: absolute; left: 0; right: 0; top: 0; height: 66%; overflow: hidden; }
.px-hero-ph img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; animation: pxKen 18s ease-in-out infinite alternate; }
.px-hero-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,25,28,0.12) 18%, rgba(23,25,28,0.55) 55%, rgba(23,25,28,0.88) 100%); }
.px-hero-body, .pxm-hero div { text-shadow: 0 1px calc(var(--u) * 10) rgba(0,0,0,0.35); }
.px-hero-body { position: absolute; left: 0; right: 0; top: calc(var(--u) * 44); height: calc(66% - (var(--u) * 44)); z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 calc(var(--u) * 32) calc(var(--u) * 22); }
.px-hero-h { font-size: calc(var(--u) * 30); font-weight: 800; letter-spacing: -0.04em; line-height: 1.12; color: #fff; margin: calc(var(--u) * 8) 0 calc(var(--u) * 6); }
.px-hero-h em { font-style: normal; color: var(--lamp); }
.px-hero-s { font-size: calc(var(--u) * 12); font-weight: 600; color: rgba(255,255,255,0.86); margin: 0 0 calc(var(--u) * 14); letter-spacing: -0.01em; }
.px-quick { display: flex; gap: calc(var(--u) * 8); }
.px-qbtn { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 9); font-weight: 700; cursor: pointer; padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: calc(var(--u) * 6); border: 1px solid rgba(255,255,255,0.28); background: rgba(23,25,28,0.35); color: #fff; backdrop-filter: blur(calc(var(--u) * 6)); transition: background .2s, border-color .2s, transform .15s; }
.px-qbtn:hover { background: var(--lamp); border-color: var(--lamp); color: var(--coal); transform: translateY(-1px); }
.px-qbtn.fill { background: var(--lamp); border-color: var(--lamp); color: var(--coal); }
.px-home-low { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: var(--paper); display: grid; grid-template-columns: 1fr 1.15fr; gap: calc(var(--u) * 18); padding: calc(var(--u) * 16) calc(var(--u) * 32) calc(var(--u) * 14); }
.px-low-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: calc(var(--u) * 8); }
.px-low-head b { font-size: calc(var(--u) * 11); font-weight: 800; color: var(--coal); letter-spacing: -0.02em; }
.px-low-head button { font-size: calc(var(--u) * 7.5); color: var(--mute); background: none; border: none; cursor: pointer; padding: 0; }
.px-low-head button:hover { color: var(--coal); }
.px-nrow { display: flex; justify-content: space-between; gap: calc(var(--u) * 10); padding: calc(var(--u) * 6) 0; border-bottom: 1px solid var(--line); }
.px-nrow span { font-size: calc(var(--u) * 8.5); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-nrow time { font-size: calc(var(--u) * 7.5); color: var(--mute); flex-shrink: 0; font-family: var(--font-mono); }
.px-mini { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--u) * 7); }
.px-mini figure { margin: 0; }
.px-mini img { width: 100%; height: calc(var(--u) * 66); object-fit: cover; border-radius: calc(var(--u) * 5); display: block; }
.px-mini figcaption { font-size: calc(var(--u) * 7); color: var(--slate); margin-top: calc(var(--u) * 4); line-height: 1.35; height: calc(var(--u) * 19); overflow: hidden; }
.px-greet { display: grid; grid-template-columns: 0.9fr 1.35fr; gap: calc(var(--u) * 22); flex: 1; min-height: 0; }
.px-greet-ph { border-radius: calc(var(--u) * 8); overflow: hidden; position: relative; }
.px-greet-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-greet-ph span { position: absolute; left: calc(var(--u) * 10); bottom: calc(var(--u) * 10); font-size: calc(var(--u) * 7.5); font-weight: 700; color: #fff; background: rgba(23,25,28,0.62); padding: calc(var(--u) * 4) calc(var(--u) * 8); border-radius: calc(var(--u) * 4); }
.px-greet-t { display: flex; flex-direction: column; min-height: 0; }
.px-greet-lead { font-size: calc(var(--u) * 13); font-weight: 800; line-height: 1.45; letter-spacing: -0.03em; color: var(--coal); margin: calc(var(--u) * 6) 0 calc(var(--u) * 10); }
.px-greet-lead em { font-style: normal; box-shadow: inset 0 calc(var(--u) * -6) 0 rgba(242,194,0,0.45); }
.px-greet-p { font-size: calc(var(--u) * 8.5); line-height: 1.75; color: var(--slate); margin: 0 0 calc(var(--u) * 12); }
.px-bars { display: flex; flex-direction: column; gap: calc(var(--u) * 7); }
.px-sign { margin-top: auto; padding-top: calc(var(--u) * 10); border-top: 1px solid var(--line); display: flex; justify-content: flex-end; align-items: baseline; gap: calc(var(--u) * 10); }
.px-sign time { font-size: calc(var(--u) * 7.5); color: var(--mute); font-family: var(--font-mono); }
.px-sign b { font-size: calc(var(--u) * 10.5); font-weight: 800; color: var(--coal); letter-spacing: -0.02em; }
.px-about { display: grid; grid-template-columns: 1fr 1.05fr; gap: calc(var(--u) * 18); flex: 1; min-height: 0; }
.px-box { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--u) * 8); padding: calc(var(--u) * 13) calc(var(--u) * 14); }
.px-box-t { font-size: calc(var(--u) * 9); font-weight: 800; color: var(--coal); margin: 0 0 calc(var(--u) * 9); display: flex; align-items: center; gap: calc(var(--u) * 6); }
.px-box-t::before { content: ''; width: calc(var(--u) * 3); height: calc(var(--u) * 10); background: var(--lamp); border-radius: 2px; }
.px-motto { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--u) * 6); }
.px-motto div { background: var(--coal); color: #fff; border-radius: calc(var(--u) * 6); padding: calc(var(--u) * 12) calc(var(--u) * 4); text-align: center; font-size: calc(var(--u) * 11); font-weight: 800; letter-spacing: 0.02em; opacity: 0; transform: translateY(calc(var(--u) * 6)); transition: opacity .5s, transform .5s; }
.px-motto div.in { opacity: 1; transform: none; }
.px-motto div:nth-child(2) { background: var(--lamp); color: var(--coal); }
.px-since { display: flex; align-items: baseline; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 12); }
.px-since b { font-size: calc(var(--u) * 26); font-weight: 800; letter-spacing: -0.04em; color: var(--coal); font-family: var(--font-outfit); }
.px-since span { font-size: calc(var(--u) * 8); color: var(--mute); }
.px-tl { position: relative; padding-left: calc(var(--u) * 14); flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.px-box.col { display: flex; flex-direction: column; }
.px-since-card { flex: 1; border-radius: calc(var(--u) * 8); position: relative; overflow: hidden; background: var(--coal); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--u) * 14); }
.px-since-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.px-since-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(23,25,28,0.85)); }
.px-since-card > div { position: relative; z-index: 1; }
.px-since-card b { font-size: calc(var(--u) * 30); font-weight: 800; letter-spacing: -0.04em; color: var(--lamp); font-family: var(--font-outfit); line-height: 1; }
.px-since-card p { margin: calc(var(--u) * 4) 0 0; font-size: calc(var(--u) * 8.5); color: rgba(255,255,255,0.85); font-weight: 600; }
.px-tl::before { content: ''; position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 4); bottom: calc(var(--u) * 4); width: 1px; background: var(--line); }
.px-tl-row { position: relative; display: grid; grid-template-columns: calc(var(--u) * 52) 1fr; gap: calc(var(--u) * 8); padding: calc(var(--u) * 5) 0; opacity: 0; transform: translateX(calc(var(--u) * -6)); transition: opacity .45s, transform .45s; }
.px-tl-row.in { opacity: 1; transform: none; }
.px-tl-row::before { content: ''; position: absolute; left: calc(var(--u) * -14); top: calc(var(--u) * 9); width: calc(var(--u) * 7); height: calc(var(--u) * 7); border-radius: 50%; background: var(--paper); border: 2px solid var(--coal); box-sizing: border-box; }
.px-tl-row:first-child::before { background: var(--lamp); border-color: var(--lamp); }
.px-tl-row time { font-size: calc(var(--u) * 8.5); font-weight: 800; color: var(--coal); font-family: var(--font-mono); }
.px-tl-row span { font-size: calc(var(--u) * 8.5); color: var(--slate); line-height: 1.45; }
.px-way { display: grid; grid-template-columns: 1.45fr 1fr; gap: calc(var(--u) * 16); flex: 1; min-height: 0; }
.px-map { position: relative; border-radius: calc(var(--u) * 8); overflow: hidden; background: #e9e6dd; border: 1px solid var(--line); }
.px-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.px-pin { position: absolute; left: 52%; top: 44%; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; }
.px-pin b { font-size: calc(var(--u) * 8); font-weight: 800; color: #fff; background: var(--coal); padding: calc(var(--u) * 5) calc(var(--u) * 9); border-radius: calc(var(--u) * 5); white-space: nowrap; box-shadow: 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(23,25,28,0.25); }
.px-pin i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--coal); }
.px-pin em { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--lamp); border: 2px solid #fff; margin-top: calc(var(--u) * 3); box-shadow: 0 0 0 0 rgba(242,194,0,0.6); animation: pxPing 2s infinite; }
.px-addr { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.px-addr-h { font-size: calc(var(--u) * 14); font-weight: 800; color: var(--coal); letter-spacing: -0.03em; margin: calc(var(--u) * 4) 0 0; }
.px-kv { display: grid; grid-template-columns: calc(var(--u) * 40) 1fr; gap: calc(var(--u) * 7) calc(var(--u) * 8); font-size: calc(var(--u) * 8.5); }
.px-kv dt { color: var(--mute); font-weight: 600; }
.px-kv dd { margin: 0; color: var(--coal); font-weight: 600; line-height: 1.45; }
.px-way-btn { margin-top: auto; display: flex; gap: calc(var(--u) * 6); }
.px-btn { flex: 1; height: calc(var(--u) * 30); border-radius: calc(var(--u) * 6); border: none; cursor: pointer; font-size: calc(var(--u) * 9); font-weight: 800; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 5); transition: transform .15s; }
.px-btn:hover { transform: translateY(-1px); }
.px-btn.fill { background: var(--lamp); color: var(--coal); }
.px-btn.line { background: var(--card); color: var(--coal); border: 1px solid var(--line); }
.px-board-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(var(--u) * 8); }
.px-board-top span { font-size: calc(var(--u) * 8); color: var(--mute); }
.px-board-top span b { color: var(--coal); }
.px-search { width: calc(var(--u) * 130); height: calc(var(--u) * 22); border-radius: calc(var(--u) * 5); border: 1px solid var(--line); background: var(--card); display: flex; align-items: center; padding: 0 calc(var(--u) * 8); font-size: calc(var(--u) * 7.5); color: #b0a99d; }
.px-table { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--u) * 8); overflow: hidden; }
.px-tr { display: grid; grid-template-columns: calc(var(--u) * 34) 1fr calc(var(--u) * 64) calc(var(--u) * 40); align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 8) calc(var(--u) * 14); border-bottom: 1px solid #f0ebe1; font-size: calc(var(--u) * 8.5); color: var(--slate); transition: background .15s; }
.px-tr:last-child { border-bottom: none; }
.px-tr:not(.th):hover { background: #fbf9f4; }
.px-tr.th { background: var(--paper2); font-size: calc(var(--u) * 7.5); font-weight: 800; color: var(--mute); padding: calc(var(--u) * 6) calc(var(--u) * 14); }
.px-tr .n { text-align: center; color: var(--mute); font-family: var(--font-mono); font-size: calc(var(--u) * 7.5); }
.px-tr .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--coal); font-weight: 600; }
.px-tr .d { font-family: var(--font-mono); font-size: calc(var(--u) * 7.5); color: var(--mute); text-align: right; }
.px-tr .v { font-family: var(--font-mono); font-size: calc(var(--u) * 7.5); color: var(--mute); text-align: right; }
.px-tag { display: inline-block; font-size: calc(var(--u) * 6.5); font-weight: 800; color: var(--coal); background: var(--lamp); border-radius: calc(var(--u) * 3); padding: 1px calc(var(--u) * 4); margin-right: calc(var(--u) * 5); vertical-align: 1px; }
.px-file { display: inline-block; width: calc(var(--u) * 7); height: calc(var(--u) * 8); border: 1px solid var(--mute); border-radius: 1px; margin-left: calc(var(--u) * 5); vertical-align: -1px; }
.px-pager { display: flex; justify-content: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 10); }
.px-pager i { width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 4); font-style: normal; font-size: calc(var(--u) * 7.5); font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--mute); background: var(--card); border: 1px solid var(--line); }
.px-pager i.on { background: var(--coal); color: #fff; border-color: var(--coal); }
.px-write { font-size: calc(var(--u) * 8); font-weight: 800; color: var(--coal); background: var(--lamp); border: none; border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 6) calc(var(--u) * 11); cursor: pointer; }
.px-gal { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--u) * 10); }
.px-gal figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--u) * 8); overflow: hidden; opacity: 0; transform: translateY(calc(var(--u) * 8)); transition: opacity .45s, transform .45s, box-shadow .2s; }
.px-gal figure.in { opacity: 1; transform: none; }
.px-gal figure:hover { box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 26) rgba(23,25,28,0.12); }
.px-gal-ph { height: calc(var(--u) * 102); overflow: hidden; }
.px-gal-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.px-gal figure:hover img { transform: scale(1.05); }
.px-gal figcaption { padding: calc(var(--u) * 7) calc(var(--u) * 9) calc(var(--u) * 8); }
.px-gal figcaption b { display: block; font-size: calc(var(--u) * 8); font-weight: 700; color: var(--coal); line-height: 1.4; height: calc(var(--u) * 22); overflow: hidden; letter-spacing: -0.01em; }
.px-gal figcaption time { font-size: calc(var(--u) * 7); color: var(--mute); font-family: var(--font-mono); }
.px-foot { flex-shrink: 0; height: calc(var(--u) * 24); background: var(--coal); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 6.5); color: rgba(255,255,255,0.5); letter-spacing: 0.02em; }
.pxm-nav { height: calc(var(--u) * 32); flex-shrink: 0; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; padding: 0 calc(var(--u) * 12); position: relative; z-index: 60; }
.pxm-nav button { background: none; border: none; padding: 0; cursor: pointer; display: flex; }
.pxm-nav img { height: calc(var(--u) * 13); width: auto; display: block; }
.pxm-burger { position: absolute; top: calc(var(--u) * 32); right: calc(var(--u) * 12); z-index: 80; width: calc(var(--u) * 20); height: calc(var(--u) * 20); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--u) * 6); background: none; border: none; cursor: pointer; padding: 0; }
.pxm-burger i { width: calc(var(--u) * 18); height: 2px; background: var(--coal); border-radius: 2px; display: block; transition: transform .3s ease, background .2s ease; transform-origin: center; }
.pxm-burger.open i { background: #fff; }
.pxm-burger.open i:nth-child(1) { transform: translateY(calc(var(--u) * 4)) rotate(45deg); }
.pxm-burger.open i:nth-child(2) { transform: translateY(calc(var(--u) * -4)) rotate(-45deg); }
.pxm-menu { position: absolute; top: calc(var(--u) * 26); left: 0; right: 0; bottom: 0; z-index: 70; background: rgba(23,25,28,0.97); backdrop-filter: blur(calc(var(--u) * 12)); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: calc(var(--u) * 26) calc(var(--u) * 22); }
.pxm-menu button { font-size: calc(var(--u) * 17); font-weight: 800; color: #fff; background: none; border: none; width: 100%; text-align: center; padding: calc(var(--u) * 9) 0; cursor: pointer; letter-spacing: -0.02em; }
.pxm-menu button.on { color: var(--lamp); }
.pxm-menu small { font-size: calc(var(--u) * 7); color: rgba(255,255,255,0.35); margin-top: calc(var(--u) * 14); letter-spacing: 0.04em; }
.pxm-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--paper); }
.pxm-head { flex-shrink: 0; background: var(--coal); padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 11); position: relative; overflow: hidden; }
.pxm-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.pxm-head p, .pxm-head h3 { position: relative; margin: 0; }
.pxm-head p { font-size: calc(var(--u) * 6.5); color: rgba(255,255,255,0.6); }
.pxm-head h3 { font-size: calc(var(--u) * 15); font-weight: 800; color: #fff; letter-spacing: -0.03em; margin-top: 2px; }
.pxm-body { flex: 1; min-height: 0; padding: calc(var(--u) * 12) calc(var(--u) * 14); display: flex; flex-direction: column; gap: calc(var(--u) * 9); overflow: hidden; }
.pxm-hero { position: relative; height: 58%; flex-shrink: 0; overflow: hidden; background: var(--coal); }
.pxm-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; animation: pxKen 18s ease-in-out infinite alternate; }
.pxm-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,25,28,0.05) 22%, rgba(23,25,28,0.6) 60%, rgba(23,25,28,0.9) 100%); }
.pxm-hero div { position: absolute; left: calc(var(--u) * 14); right: calc(var(--u) * 14); bottom: calc(var(--u) * 14); z-index: 1; }
.pxm-hero h2 { font-size: calc(var(--u) * 19); font-weight: 800; color: #fff; letter-spacing: -0.04em; line-height: 1.15; margin: calc(var(--u) * 5) 0 calc(var(--u) * 4); }
.pxm-hero h2 em { font-style: normal; color: var(--lamp); }
.pxm-hero p.s { font-size: calc(var(--u) * 9); color: rgba(255,255,255,0.85); margin: 0; font-weight: 600; }
.pxm-quick { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--u) * 6); padding: calc(var(--u) * 10) calc(var(--u) * 12) 0; }
.pxm-quick button { height: calc(var(--u) * 40); border-radius: calc(var(--u) * 6); border: 1px solid var(--line); background: var(--card); cursor: pointer; font-size: calc(var(--u) * 8); font-weight: 800; color: var(--coal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); }
.pxm-quick button i { width: calc(var(--u) * 12); height: calc(var(--u) * 3); border-radius: 2px; background: var(--lamp); }
.pxm-news { padding: calc(var(--u) * 8) calc(var(--u) * 12) 0; }
.pxm-news b { font-size: calc(var(--u) * 9); font-weight: 800; color: var(--coal); }
.pxm-news p { margin: calc(var(--u) * 4) 0 0; font-size: calc(var(--u) * 7.5); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: calc(var(--u) * 5) 0; border-bottom: 1px solid var(--line); }
.pxm-row { display: flex; justify-content: space-between; gap: calc(var(--u) * 8); padding: calc(var(--u) * 7) 0; border-bottom: 1px solid var(--line); }
.pxm-row span { font-size: calc(var(--u) * 8); color: var(--coal); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxm-row time { font-size: calc(var(--u) * 6.5); color: var(--mute); flex-shrink: 0; font-family: var(--font-mono); }
.pxm-gal { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 7); }
.pxm-gal figure { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--u) * 6); overflow: hidden; }
.pxm-gal img { width: 100%; height: calc(var(--u) * 62); object-fit: cover; display: block; }
.pxm-gal figcaption { font-size: calc(var(--u) * 6.5); font-weight: 700; color: var(--coal); padding: calc(var(--u) * 4) calc(var(--u) * 5) calc(var(--u) * 5); line-height: 1.35; height: calc(var(--u) * 18); overflow: hidden; }
@keyframes pxKen { 0%{ transform: scale(1.02) } 100%{ transform: scale(1.10) translate(-1.5%, -1%) } }
@keyframes pxPing { 0%{ box-shadow: 0 0 0 0 rgba(242,194,0,0.6) } 70%{ box-shadow: 0 0 0 calc(var(--u) * 10) rgba(242,194,0,0) } 100%{ box-shadow: 0 0 0 0 rgba(242,194,0,0) } }

/* ===== 2. HAND-WRITTEN SITE LAYER ===== */

/* ==========================================================================
   Hand-written site layer (NOT generated). Adapts the fixed-size pitch mockup panels to real scrolling pages.
   Unit: every mockup pixel is `var(--u)` real pixels, so any number in the generated block above can be
   compared 1:1 with preview.html (expected computed px = mockup px * --u).
   ========================================================================== */
:root { --u: 1.75px; }
@media (max-width: 1279px) { :root { --u: 1.6px; } }
@media (max-width: 1023px) { :root { --u: 1.35px; } }
@media (max-width: 767px) { :root { --u: 1.75px; } }

.dg-root {
	--font-mono: "JetBrains-Local", "Pretendard-Local", monospace;
	--font-outfit: "Outfit-Local", "Pretendard-Local", sans-serif;
	background: var(--paper);
	color: var(--slate);
	/* The mockup was rendered under the pitch page's body rules (line-height 1.75, letter-spacing -0.01em); inherit the same. */
	line-height: 1.75;
	letter-spacing: -0.01em;
	font-size: calc(var(--u) * 17);
	-webkit-font-smoothing: antialiased;
	word-break: keep-all;
}
/* Core-template heading defaults (site.css @layer base) must not leak into the mockup's headings. */
:where(.dg-root h1, .dg-root h2, .dg-root h3, .dg-root h4, .dg-root h5, .dg-root h6) { line-height: inherit; font-size: inherit; font-weight: inherit; }

/* Desktop / phone variants are two markups, exactly like the mockup's two devices. */
@media (min-width: 768px) { .dg-m { display: none !important; } }
@media (max-width: 767px) { .dg-d { display: none !important; } }

.dg-wrap { width: 100%; max-width: calc(var(--u) * 760); margin: 0 auto; }

/* ---- shell ---- */
.dg-root main#main { background: var(--paper); }
.dg-page { min-height: 100dvh; display: flex; flex-direction: column; }
.dg-page > .px-sub-body, .dg-page > .pxm-body { flex: 1 0 auto; }
.px-nav { position: fixed; }
.px-nav .px-links a { text-decoration: none; }
.px-link { display: inline-block; }
.px-nav-in { width: 100%; max-width: calc(var(--u) * 760); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.px-nav { padding: 0 calc(var(--u) * 20); }
.px-brand { text-decoration: none; }

/* Desktop panels are natural-height pages instead of absolute screens. */
.px-panel { position: relative; overflow: visible; }
.px-sub { min-height: 100dvh; padding-top: calc(var(--u) * 44); }
.px-sub-band { padding: 0; height: calc(var(--u) * 74); }
.px-sub-band > .dg-wrap { position: relative; z-index: 1; height: 100%; display: flex; align-items: flex-end; padding: 0 calc(var(--u) * 28) calc(var(--u) * 12); }
.px-sub-band div { position: relative; z-index: 1; }
.px-sub-body { flex: 1 0 auto; padding: calc(var(--u) * 18) calc(var(--u) * 28) calc(var(--u) * 16); }
.px-sub-body > * { width: 100%; max-width: calc(var(--u) * 704); margin-left: auto; margin-right: auto; }

/* Home: hero photo on top, notices + photos below. */
/* Full-height hero, but never shorter than 500u: the bottom strip is 34% of the hero and needs ~170u for its rows, so on short windows the page
   scrolls instead of the strip overlapping the photo (the buttons would otherwise land on the strip). */
.px-hero { min-height: max(100dvh, calc(var(--u) * 500)); }
.px-hero-ph { height: 66%; }
/* The hero text column is the mockup's own .px-hero-body box (its padding 0 32u 22u comes from section 1, untouched); on wide screens the box
   is simply capped to the 760u mockup width and centered, so the text lines up with the sections below. */
.px-hero-body { width: min(100%, calc(var(--u) * 760)); margin-left: auto; margin-right: auto; }
.px-home-low > * { min-width: 0; }
.px-low-head button, .px-low-head a { font-size: calc(var(--u) * 7.5); color: var(--mute); text-decoration: none; }
.px-low-head a:hover { color: var(--coal); }
.px-nrow { text-decoration: none; }
.px-nrow:hover span { color: var(--coal); }
.px-qbtn { text-decoration: none; letter-spacing: normal; }
.px-mini a { text-decoration: none; color: inherit; }
.px-mini .px-ph, .px-gal-ph .px-ph { width: 100%; height: 100%; background: var(--paper2); }
.px-mini .px-ph { height: calc(var(--u) * 66); border-radius: calc(var(--u) * 5); }
.px-empty { font-size: calc(var(--u) * 8.5); color: var(--mute); padding: calc(var(--u) * 8) 0; }

/* Sub pages: text blocks that replaced the mockup's grey placeholder bars. */
.px-greet-p:last-of-type { margin-bottom: 0; }
.px-greet-ph { min-height: calc(var(--u) * 220); }
.px-about .px-box-txt { font-size: calc(var(--u) * 8.5); line-height: 1.75; color: var(--slate); margin: 0; }
.px-tl { flex: 1; }
.px-tl-row time { white-space: nowrap; }
.px-tl-row span { min-width: 0; }
.px-tl-row.in, .px-motto div.in, .px-gal figure.in { transition-delay: var(--dg-delay, 0ms); }
.px-map .px-map-embed { position: absolute; inset: 0; }
.px-map { min-height: calc(var(--u) * 210); }
.px-btn { text-decoration: none; letter-spacing: normal; }
.px-gal a { text-decoration: none; color: inherit; display: block; }
.px-gal-ph { height: calc(var(--u) * 102); background: var(--paper2); }
.px-gal { grid-template-columns: repeat(3, 1fr); }
.px-board-top .px-search { display: flex; }
.px-search input { all: unset; width: 100%; font-size: calc(var(--u) * 7.5); color: var(--coal); }
.px-search input::placeholder { font-size: calc(var(--u) * 7.5); color: #b0a99d; }
.px-tr { text-decoration: none; }
a.px-tr:not(.th):hover { background: #fbf9f4; }
.px-pager a { text-decoration: none; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 7.5); font-weight: 700; display: flex; align-items: center; justify-content: center; color: var(--mute); background: var(--card); border: 1px solid var(--line); }
.px-pager a.on { background: var(--coal); color: #fff; border-color: var(--coal); }
.px-pager { flex-wrap: wrap; }
.px-post { background: var(--card); border: 1px solid var(--line); border-radius: calc(var(--u) * 8); overflow: hidden; }
.px-post-h { padding: calc(var(--u) * 14) calc(var(--u) * 16); border-bottom: 1px solid #f0ebe1; }
.px-post-h h3 { margin: 0; font-size: calc(var(--u) * 13); font-weight: 800; letter-spacing: -0.03em; color: var(--coal); line-height: 1.4; }
.px-post-h p { margin: calc(var(--u) * 6) 0 0; font-size: calc(var(--u) * 7.5); color: var(--mute); font-family: var(--font-mono); }
.px-post-b { padding: calc(var(--u) * 14) calc(var(--u) * 16); font-size: calc(var(--u) * 8.5); line-height: 1.75; color: var(--slate); white-space: pre-wrap; }
.px-post-f { padding: 0 calc(var(--u) * 16) calc(var(--u) * 14); }
.px-post-f h4 { margin: 0 0 calc(var(--u) * 6); font-size: calc(var(--u) * 8); font-weight: 800; color: var(--coal); }
.px-files { display: flex; flex-direction: column; gap: calc(var(--u) * 5); }
.px-files a { display: flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 7) calc(var(--u) * 9); border: 1px solid var(--line); border-radius: calc(var(--u) * 5); font-size: calc(var(--u) * 8); color: var(--coal); text-decoration: none; }
.px-files a:hover { background: #fbf9f4; }
.px-files b { font-size: calc(var(--u) * 6.5); font-weight: 800; background: var(--lamp); border-radius: calc(var(--u) * 3); padding: 1px calc(var(--u) * 4); text-transform: uppercase; }
.px-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 8); }
.px-photos button { border: 1px solid var(--line); border-radius: calc(var(--u) * 6); overflow: hidden; padding: 0; background: var(--card); cursor: zoom-in; }
.px-photos img { width: 100%; height: calc(var(--u) * 90); object-fit: cover; display: block; }
.px-back { display: flex; justify-content: center; margin-top: calc(var(--u) * 12); }
.px-back a { font-size: calc(var(--u) * 8); font-weight: 800; color: var(--coal); border: 1px solid var(--line); background: var(--card); border-radius: calc(var(--u) * 5); padding: calc(var(--u) * 7) calc(var(--u) * 14); text-decoration: none; }
.px-back a:hover { background: var(--lamp); border-color: var(--lamp); }
.px-toast { position: fixed; left: 50%; bottom: calc(var(--u) * 28); transform: translateX(-50%); background: var(--coal); color: #fff; font-size: calc(var(--u) * 8.5); font-weight: 700; padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: calc(var(--u) * 6); z-index: 90; }

/* Home + subpage adjustments for the wrapped markup */
.px-home-low { display: block; padding: 0; }
.px-low-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: calc(var(--u) * 18); padding: calc(var(--u) * 16) calc(var(--u) * 32) calc(var(--u) * 14); }
.px-low-grid > div { min-width: 0; }
.px-mini figcaption { display: block; }
.dg-page { padding-top: calc(var(--u) * 44); }
.px-way-img { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: calc(var(--u) * 6); }
.px-way .px-map .px-map-embed > div { height: 100% !important; width: 100% !important; }
.pxm-addr-h { font-size: calc(var(--u) * 11); font-weight: 800; color: var(--coal); margin: 0 0 calc(var(--u) * 3); }
.pxm-addr { font-size: calc(var(--u) * 8); color: var(--slate); margin: 0; line-height: 1.55; }
.pxm-addr span { color: var(--mute); }

/* Phone variant */
@media (max-width: 767px) {
	.pxm-nav { position: fixed; top: 0; left: 0; right: 0; }
	.pxm-nav a { display: flex; }
	.pxm-burger { position: fixed; top: calc(var(--u) * 6); right: calc(var(--u) * 12); z-index: 80; }
	.pxm-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 70; }
	.pxm-menu a { font-size: calc(var(--u) * 17); font-weight: 800; color: #fff; width: 100%; text-align: center; padding: calc(var(--u) * 9) 0; letter-spacing: -0.02em; text-decoration: none; }
	.pxm-menu a.on { color: var(--lamp); }
	.pxm-panel { min-height: 100dvh; padding-top: calc(var(--u) * 32); overflow: visible; }
	.pxm-hero { height: calc((100dvh - var(--u) * 32) * 0.58); }
	.pxm-head { padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 11); }
	.pxm-body { flex: 1 0 auto; overflow: visible; }
	.pxm-quick a { height: calc(var(--u) * 40); border-radius: calc(var(--u) * 6); border: 1px solid var(--line); background: var(--card); font-size: calc(var(--u) * 8); font-weight: 800; color: var(--coal); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 3); text-decoration: none; }
	.pxm-quick a i { width: calc(var(--u) * 12); height: calc(var(--u) * 3); border-radius: 2px; background: var(--lamp); }
	.pxm-news a, .pxm-row { text-decoration: none; color: inherit; }
	.pxm-news a { display: block; margin: calc(var(--u) * 4) 0 0; font-size: calc(var(--u) * 7.5); color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: calc(var(--u) * 5) 0; border-bottom: 1px solid var(--line); }
	.pxm-gal a { display: block; text-decoration: none; }
	.pxm-gal img, .pxm-gal .px-ph { height: calc(var(--u) * 62); }
	.pxm-gal .px-ph { background: var(--paper2); }
	.px-sub-body .px-tl-row { grid-template-columns: calc(var(--u) * 40) 1fr; padding: calc(var(--u) * 3) 0; }
	.px-sub-body .px-tl-row time, .px-sub-body .px-tl-row span { font-size: calc(var(--u) * 7); }
	.px-sub-body .px-motto div { font-size: calc(var(--u) * 9); padding: calc(var(--u) * 9) 2px; }
	.px-sub-body .px-box { padding: calc(var(--u) * 10); }
	.px-sub-body .px-box-t { margin-bottom: calc(var(--u) * 7); }
	.px-photos { grid-template-columns: repeat(2, 1fr); }
	.px-photos img { height: calc(var(--u) * 70); }
	.px-post-b, .px-post-h h3 { font-size: calc(var(--u) * 8.5); }
	.px-post-h h3 { font-size: calc(var(--u) * 11); }
	.px-toast { bottom: calc(var(--u) * 20); }
	.dg-page { padding-top: calc(var(--u) * 32); }
	.px-sub-body { padding: calc(var(--u) * 12) calc(var(--u) * 14); }
	.px-sub-body > * { max-width: none; }
	.px-greet, .px-about { grid-template-columns: 1fr; gap: calc(var(--u) * 10); }
	.px-way { display: flex; flex-direction: column; gap: calc(var(--u) * 9); }
	.px-way .px-map { flex: none; }
	.px-way .px-addr { flex: 1; }
	.px-greet-ph { min-height: 0; height: calc(var(--u) * 92); }
	.px-greet-lead { font-size: calc(var(--u) * 11); }
	.px-greet-p { font-size: calc(var(--u) * 7.5); line-height: 1.7; }
	.px-map { min-height: 0; height: calc(var(--u) * 150); }
	.px-way-btn { flex-direction: column; margin-top: auto; }
	.pxm-way-btn .px-btn { flex: none; height: calc(var(--u) * 32); }
	.px-gal { grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 7); }
	.px-gal-ph { height: calc(var(--u) * 62); }
	.px-gal figcaption b { font-size: calc(var(--u) * 6.5); height: calc(var(--u) * 18); }
	.px-gal figcaption time { display: none; }
	.px-board-top { margin-bottom: calc(var(--u) * 6); }
	.px-pager { margin-top: calc(var(--u) * 12); }
}


/* ===== 3. FOOTER (VEX_TASK_363) =====
   New component, not a mockup rule: the mockup's .px-foot (section 1) is unused now and left as generated. Tokens (--coal, --lamp, --u) only.
   Display sizes are the legacy banner pixels (NTS 140x50, MOEF 160x50, maker 110x31) times 0.56u, so the three keep the legacy proportions. */
.dg-foot { flex-shrink: 0; background: var(--coal); color: rgba(255,255,255,0.75); }
.dg-foot-in { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 24); padding: calc(var(--u) * 22) calc(var(--u) * 28) calc(var(--u) * 20); }
.dg-foot-info { min-width: 0; flex: 1 1 auto; }
.dg-foot-logo { display: block; height: calc(var(--u) * 17); width: auto; margin-bottom: calc(var(--u) * 10); /* mono on the dark band (legacy: greyed logo): grayscale + invert turns the black wordmark white and keeps the symbol readable */ filter: grayscale(1) invert(1); opacity: 0.55; }
.dg-foot-address { font-style: normal; font-size: calc(var(--u) * 7.5); line-height: 1.85; letter-spacing: -0.01em; }
/* Row wrapper clips the first "|" of every wrapped line: items carry a left border, the row is shifted left by (pad + 1px) and the wrapper hides the overflow. */
.dg-foot-clip { overflow: hidden; }
.dg-foot-row { display: flex; flex-wrap: wrap; margin: 0 0 0 calc(var(--u) * -6 - 1px); width: calc(100% + var(--u) * 6 + 1px); }
.dg-foot-item { padding: 0 calc(var(--u) * 6); border-left: 1px solid rgba(255,255,255,0.28); white-space: normal; }
.dg-foot-item .n { color: rgba(255,255,255,0.45); }
.dg-foot-item .v { color: rgba(255,255,255,0.78); font-weight: 600; }
.dg-foot-copy { margin: calc(var(--u) * 6) 0 0; color: rgba(255,255,255,0.45); }
.dg-foot-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 9); }
.dg-foot-gov { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.dg-foot-gov img { display: block; height: calc(var(--u) * 28); width: auto; }
.dg-foot-by img { display: block; height: calc(var(--u) * 17.4); width: auto; }
.dg-foot a { display: block; line-height: 0; transition: opacity .2s; }
.dg-foot a:hover { opacity: 0.85; }
@media (max-width: 1023px) {
	.dg-foot-in { flex-direction: column; align-items: center; text-align: center; }
	.dg-foot-info { display: flex; flex-direction: column; align-items: center; flex: none; width: 100%; }
	.dg-foot-clip { width: 100%; }
	/* Centered rows cannot hide a wrapped line's leading "|" (it is only clipped at the left edge), so tablet/phone drop the separators and rely on label/value contrast + gaps. */
	.dg-foot-row { justify-content: center; margin: 0; width: 100%; column-gap: calc(var(--u) * 14); }
	.dg-foot-item { border-left: 0; padding: 0; }
	.dg-foot-side { align-items: center; }
}
@media (max-width: 767px) {
	.dg-foot-in { padding: calc(var(--u) * 18) calc(var(--u) * 14) calc(var(--u) * 16); gap: calc(var(--u) * 14); }
	.dg-foot-address { font-size: calc(var(--u) * 7); }
	.dg-foot-gov { flex-wrap: wrap; justify-content: center; }
}


/* ===== 4. VISUAL ROUND 2 (VEX_TASK_367) =====
   Intentional deviations from the accepted mockup, ordered by Boss on 2026-10-02 after viewing localhost. The mockup is a fixed-size screen with photos
   dimmed under dark overlays and stretched to the screen height; on real browsers that looked dark and the photos changed ratio with window height.
   Tokens (--coal, --lamp, --u) and structure are kept. These rules sit AFTER sections 1-3 with equal or higher specificity so they actually apply
   (the 333 lesson: never write a correction that a later or stronger rule hides). Mockup value -> site value:
   | Where                      | Mockup                                   | Site                                                          | Why                                  |
   | .px-hero-ph::after         | 0.12 -> 0.55 -> 0.88 over whole photo    | 0 until 50%, then up to 0.35 at the bottom                    | photo looked dark; shade only under the text |
   | .pxm-hero::after           | 0.05 -> 0.6 -> 0.9                       | 0 until 45%, then up to 0.35                                  | same                                 |
   | hero text                  | one soft 0.35 shadow                     | tighter + wider shadow, local radial pool behind the text     | legibility replaces the blanket overlay |
   | .px-sub-band / .pxm-head   | photo opacity .42 + 0.85 left shade      | photo opacity 1 (legacy sv01.jpg), left-only shade 0.45 -> 0  | Boss prefers the legacy photo at its own brightness |
   | .pxm-hero (phone)          | 58% of the screen                        | 44% of the screen, min 190u                                   | photo area too tall on phones        |
   | .pxm-hero h2 / p.s / eyebrow | 19u / 9u / 6.5u                        | 24u / 12u / 8.5u                                              | text too small on phones             |
   | .px-greet / .px-biz / .px-about / .px-way | flex:1 (grow to screen height) | natural height; photos use fixed aspect-ratio              | photos stretched with window height  |
   | .dg-foot maker banner      | 17.4u high, 9u gap                       | 28u high (same as NTS/MOEF), >=14u gap to them               | footer felt cramped                  |
   Home keeps its screen-height hero (min-height:max(100dvh,500u)) and .pxm-panel min-height:100dvh on purpose. */

/* ---- A. main hero: light photo, shade only where the text sits ---- */
.px-hero-ph::after { background: linear-gradient(180deg, rgba(23,25,28,0) 0%, rgba(23,25,28,0) 50%, rgba(23,25,28,0.35) 100%); }
.px-hero-body, .pxm-hero div { text-shadow: 0 1px 2px rgba(0,0,0,0.6), 0 1px calc(var(--u) * 4) rgba(0,0,0,0.55), 0 0 calc(var(--u) * 14) rgba(0,0,0,0.65); }
.px-hero-body .px-qbtn { text-shadow: none; }
.px-hero-body::before { content: ''; position: absolute; z-index: -1; left: calc(var(--u) * -24); right: 25%; bottom: 0; height: 62%; pointer-events: none; background: radial-gradient(ellipse at 24% 100%, rgba(23,25,28,0.62), rgba(23,25,28,0) 78%); }
.px-hero-body .px-qbtn:not(.fill):not(:hover) { background: rgba(23,25,28,0.5); }

/* ---- B. sub-page banner: legacy photo at its own brightness ---- */
.px-sub-band img, .pxm-head img { opacity: 1; }
.px-sub-band::after { background: linear-gradient(90deg, rgba(23,25,28,0.45), rgba(23,25,28,0) 70%); }
.px-sub-band p, .pxm-head p { color: rgba(255,255,255,0.85); text-shadow: 0 1px calc(var(--u) * 4) rgba(0,0,0,0.6); }
.px-sub-band h2, .pxm-head h3 { text-shadow: 0 1px calc(var(--u) * 6) rgba(0,0,0,0.6); }
.pxm-head::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(23,25,28,0.45), rgba(23,25,28,0) 80%); }
.pxm-head p, .pxm-head h3 { z-index: 2; }

/* ---- C. natural page height: content never grows with the window; only the empty paper area below it does ---- */
.px-sub-body > .px-greet, .px-sub-body > .px-about, .px-sub-body > .px-way { flex: 0 0 auto; }
.px-since-card { min-height: calc(var(--u) * 110); }
@media (min-width: 768px) {
	.px-greet { align-items: start; }
	.px-greet-ph { min-height: 0; height: auto; aspect-ratio: 7 / 8; }
	.px-greet-ph img { position: absolute; inset: 0; }
	.px-way-img { flex: none; height: auto; aspect-ratio: 800 / 485; min-height: 0; }
}

/* ---- D. phone main hero ---- */
@media (max-width: 767px) {
	.pxm-hero { height: max(calc((100dvh - var(--u) * 32) * 0.44), calc(var(--u) * 190)); }
	.pxm-hero::after { background: linear-gradient(180deg, rgba(23,25,28,0) 0%, rgba(23,25,28,0) 45%, rgba(23,25,28,0.35) 100%); }
	.pxm-hero div::before { content: ''; position: absolute; z-index: -1; left: calc(var(--u) * -14); right: calc(var(--u) * -14); bottom: calc(var(--u) * -14); top: calc(var(--u) * -4); pointer-events: none; background: radial-gradient(ellipse at 30% 100%, rgba(23,25,28,0.6), rgba(23,25,28,0) 78%); }
	.pxm-hero h2 { font-size: calc(var(--u) * 24); }
	.pxm-hero p.s { font-size: calc(var(--u) * 12); }
	.pxm-hero p.px-eyebrow { font-size: calc(var(--u) * 8.5); letter-spacing: 0.12em; }
}

/* ---- E. footer maker banner ---- */
.dg-foot-in { padding-bottom: calc(var(--u) * 28); }
.dg-foot-side { gap: calc(var(--u) * 14); }
.dg-foot-gov { gap: calc(var(--u) * 10); }
.dg-foot-by img { height: calc(var(--u) * 28); }

/* ===== 5. VISUAL ROUND 3 (VEX_TASK_368) =====
   Ordered by Boss on 2026-10-02 after round 2: many visitors are elderly villagers, so the site must be easy to read and easy to find the way in.
   Sections 1-4 are untouched; everything here comes later with equal or higher specificity, so it applies. Mockup/earlier value -> site value:
   | Where                 | Before                                   | Now                                                              | Why                                   |
   | every font-size       | calc(var(--u) * N)                       | max(calc(var(--u) * N * var(--fs)), floor), --fs = 1.1           | ~10% larger type; spacing (--u) is NOT scaled |
   | type floors           | none                                     | body text >= 17px (phone 16px), every other text >= 13px        | readability on phones/tablets where --u is small |
   | desktop nav           | 7 flat links                             | 3 groups: 2 dropdowns (.px-grp) + 1 plain link                   | wayfinding; labels as on the legacy site |
   | phone menu            | 7 links, 17u each                        | 3 titled groups shown at once, items 13u, >= 48px tall           | same, without an accordion             |
   | phone header logo     | 13u high                                 | 17u high (header stays 32u)                                      | logo was small                         |
   | burger X              | translateY(+-4u) with a 6u gap           | translateY(+-(gap + line)/2) from one variable (--bgap)          | the two strokes crossed 1.5px off-centre |
   | footer                | info + banners + boxed maker banner      | info/banners -> copyright -> divider -> unboxed signature (left) | taller, calmer footer; a box read as an ad badge |
   | fixed-height captions | height: N u, overflow hidden             | 2-line clamp with min-height in em                               | fixed heights would cut the larger type |
   5.0 below is GENERATED: one rule per font-size declaration of sections 1-4, same order and same media query, value multiplied by --fs
   and floored. If a font-size is added to sections 1-4, add its twin here. */
:root { --fs: 1.1; --fs-body-min: 17px; --fs-small-min: 13px; --bgap: calc(var(--u) * 6); }
@media (max-width: 767px) { :root { --fs-body-min: 16px; } }

/* ---- 5.0 generated type scale ---- */
.px-link { font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-small-min)); }
.px-eyebrow { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-crumb { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-h2 { font-size: max(calc(var(--u) * 19 * var(--fs)), var(--fs-small-min)); }
.px-sub-band p { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-sub-band h2 { font-size: max(calc(var(--u) * 17 * var(--fs)), var(--fs-small-min)); }
.px-hero-h { font-size: max(calc(var(--u) * 30 * var(--fs)), var(--fs-small-min)); }
.px-hero-s { font-size: max(calc(var(--u) * 12 * var(--fs)), var(--fs-small-min)); }
.px-qbtn { font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-small-min)); }
.px-low-head b { font-size: max(calc(var(--u) * 11 * var(--fs)), var(--fs-small-min)); }
.px-low-head button { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-nrow span { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-nrow time { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-mini figcaption { font-size: max(calc(var(--u) * 7 * var(--fs)), var(--fs-small-min)); }
.px-greet-ph span { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-greet-lead { font-size: max(calc(var(--u) * 13 * var(--fs)), var(--fs-small-min)); }
.px-greet-p { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-sign time { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-sign b { font-size: max(calc(var(--u) * 10.5 * var(--fs)), var(--fs-small-min)); }
.px-box-t { font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-small-min)); }
.px-motto div { font-size: max(calc(var(--u) * 11 * var(--fs)), var(--fs-small-min)); }
.px-since b { font-size: max(calc(var(--u) * 26 * var(--fs)), var(--fs-small-min)); }
.px-since span { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-since-card b { font-size: max(calc(var(--u) * 30 * var(--fs)), var(--fs-small-min)); }
.px-since-card p { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-small-min)); }
.px-tl-row time { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-small-min)); }
.px-tl-row span { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-pin b { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-addr-h { font-size: max(calc(var(--u) * 14 * var(--fs)), var(--fs-small-min)); }
.px-kv { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-btn { font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-small-min)); }
.px-board-top span { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-search { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-tr { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-tr.th { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-tr .n { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-tr .d { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-tr .v { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-tag { font-size: max(calc(var(--u) * 6.5 * var(--fs)), var(--fs-small-min)); }
.px-pager i { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-write { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-gal figcaption b { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-gal figcaption time { font-size: max(calc(var(--u) * 7 * var(--fs)), var(--fs-small-min)); }
.px-foot { font-size: max(calc(var(--u) * 6.5 * var(--fs)), var(--fs-small-min)); }
.pxm-menu button { font-size: max(calc(var(--u) * 17 * var(--fs)), var(--fs-small-min)); }
.pxm-menu small { font-size: max(calc(var(--u) * 7 * var(--fs)), var(--fs-small-min)); }
.pxm-head p { font-size: max(calc(var(--u) * 6.5 * var(--fs)), var(--fs-small-min)); }
.pxm-head h3 { font-size: max(calc(var(--u) * 15 * var(--fs)), var(--fs-small-min)); }
.pxm-hero h2 { font-size: max(calc(var(--u) * 19 * var(--fs)), var(--fs-small-min)); }
.pxm-hero p.s { font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-small-min)); }
.pxm-quick button { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.pxm-news b { font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-small-min)); }
.pxm-news p { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-body-min)); }
.pxm-row span { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-body-min)); }
.pxm-row time { font-size: max(calc(var(--u) * 6.5 * var(--fs)), var(--fs-small-min)); }
.pxm-gal figcaption { font-size: max(calc(var(--u) * 6.5 * var(--fs)), var(--fs-small-min)); }
.dg-root { font-size: max(calc(var(--u) * 17 * var(--fs)), var(--fs-small-min)); }
.px-low-head button { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-low-head a { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-empty { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-about .px-box-txt { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-search input { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-search input::placeholder { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-pager a { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-post-h h3 { font-size: max(calc(var(--u) * 13 * var(--fs)), var(--fs-small-min)); }
.px-post-h p { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
.px-post-b { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
.px-post-f h4 { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-files a { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-body-min)); }
.px-files b { font-size: max(calc(var(--u) * 6.5 * var(--fs)), var(--fs-small-min)); }
.px-back a { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
.px-toast { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-small-min)); }
.pxm-addr-h { font-size: max(calc(var(--u) * 11 * var(--fs)), var(--fs-small-min)); }
.pxm-addr { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-body-min)); }
@media (max-width: 767px) {
	.pxm-menu a { font-size: max(calc(var(--u) * 17 * var(--fs)), var(--fs-small-min)); }
	.pxm-quick a { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); }
	.pxm-news a { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-body-min)); }
	.px-sub-body .px-tl-row time { font-size: max(calc(var(--u) * 7 * var(--fs)), var(--fs-small-min)); }
	.px-sub-body .px-tl-row span { font-size: max(calc(var(--u) * 7 * var(--fs)), var(--fs-body-min)); }
	.px-sub-body .px-motto div { font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-small-min)); }
	.px-post-b { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); }
	.px-post-h h3 { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-small-min)); }
	.px-post-h h3 { font-size: max(calc(var(--u) * 11 * var(--fs)), var(--fs-small-min)); }
	.px-greet-lead { font-size: max(calc(var(--u) * 11 * var(--fs)), var(--fs-small-min)); }
	.px-greet-p { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-body-min)); }
	.px-gal figcaption b { font-size: max(calc(var(--u) * 6.5 * var(--fs)), var(--fs-small-min)); }
}
.dg-foot-address { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); }
@media (max-width: 767px) {
	.dg-foot-address { font-size: max(calc(var(--u) * 7 * var(--fs)), var(--fs-small-min)); }
	.pxm-hero h2 { font-size: max(calc(var(--u) * 24 * var(--fs)), var(--fs-small-min)); }
	.pxm-hero p.s { font-size: max(calc(var(--u) * 12 * var(--fs)), var(--fs-small-min)); }
	.pxm-hero p.px-eyebrow { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-small-min)); }
}

/* ---- 5.1 fixed-height captions follow the type ---- */
.px-mini figcaption, .pxm-gal figcaption { height: auto; min-height: 2.7em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.px-gal figcaption b { height: auto; min-height: 2.8em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* ---- 5.2 desktop category nav ---- */
.px-links { gap: calc(var(--u) * 22); align-items: center; }
.px-grp { position: relative; height: calc(var(--u) * 44); display: flex; align-items: center; }
.px-grp-t { font-family: inherit; line-height: inherit; display: inline-flex; align-items: center; gap: calc(var(--u) * 4); }
.px-caret { width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform .2s ease; opacity: 0.6; }
.px-grp.open .px-caret { transform: translateY(15%) rotate(225deg); }
.px-grp-panel { position: absolute; top: calc(100% - var(--u) * 3); left: 50%; min-width: calc(var(--u) * 96); padding: calc(var(--u) * 6); display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: calc(var(--u) * 8); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(23,25,28,0.14); opacity: 0; visibility: hidden; transform: translate(-50%, calc(var(--u) * -4)); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.px-grp.open .px-grp-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.px-nav .px-grp-panel a { display: block; padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: calc(var(--u) * 5); font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-body-min)); font-weight: 600; line-height: 1.4; color: var(--slate); white-space: nowrap; }
.px-nav .px-grp-panel a:hover, .px-nav .px-grp-panel a:focus-visible { background: var(--paper); color: var(--coal); outline: none; }
.px-nav .px-grp-panel a.on { color: var(--coal); font-weight: 800; box-shadow: inset 3px 0 0 var(--lamp); }
.px-grp-t:focus-visible, a.px-link:focus-visible { outline: 2px solid var(--lamp); outline-offset: calc(var(--u) * 3); }

/* ---- 5.3 phone header + menu ---- */
.pxm-burger { gap: var(--bgap); }
.pxm-burger.open i:nth-child(1) { transform: translateY(calc((var(--bgap) + 2px) / 2)) rotate(45deg); }
.pxm-burger.open i:nth-child(2) { transform: translateY(calc((var(--bgap) + 2px) / -2)) rotate(-45deg); }
@media (max-width: 767px) {
	.pxm-nav img { height: calc(var(--u) * 17); }
	.pxm-menu { justify-content: flex-start; align-items: stretch; gap: 0; overflow-y: auto; padding: calc(var(--u) * 40) calc(var(--u) * 22) calc(var(--u) * 18); }
	.pxm-grp { display: flex; flex-direction: column; align-items: center; padding: calc(var(--u) * 9) 0; border-top: 1px solid rgba(255,255,255,0.1); }
	.pxm-grp:first-child { border-top: 0; }
	.pxm-grp-t { margin: 0 0 calc(var(--u) * 2); font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); font-weight: 800; letter-spacing: 0.18em; color: var(--lamp); line-height: 1.6; }
	.pxm-menu .pxm-grp a { display: flex; align-items: center; justify-content: center; min-height: max(48px, calc(var(--u) * 28)); padding: 0; font-size: calc(var(--u) * 13 * var(--fs)); line-height: 1.3; }
	.pxm-menu small { align-self: center; margin-top: calc(var(--u) * 10); }
}

/* ---- 5.4 footer: taller, divider, unboxed maker signature ---- */
.dg-foot-in { padding: calc(var(--u) * 30) calc(var(--u) * 28) 0; }
.dg-foot-copyrow { padding: calc(var(--u) * 12) calc(var(--u) * 28) 0; }
.dg-foot-copy { margin: 0; font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); line-height: 1.85; }
/* Boss 10-03: the signature sat too close to the footer text above it — more air before the divider and around the signature. */
.dg-foot-base { padding: calc(var(--u) * 34) calc(var(--u) * 28) 0; }
.dg-foot-base-in { display: flex; border-top: 1px solid rgba(255,255,255,0.14); padding: calc(var(--u) * 28) 0 calc(var(--u) * 30); }
.dg-foot .dg-foot-by { --sign: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); display: inline-flex; align-items: center; gap: calc(var(--sign) * 0.6); line-height: 1; opacity: 0.7; transition: opacity .2s; text-decoration: none; }
.dg-foot .dg-foot-by:hover, .dg-foot .dg-foot-by:focus-visible { opacity: 1; }
.dg-foot .dg-foot-by span { font-size: var(--sign); font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.6); white-space: nowrap; }
/* The wordmark letters are 2/3 of the image height; 1.8x the label size makes the label's cap height ~60% of the wordmark letters. */
.dg-foot .dg-foot-by img { height: calc(var(--sign) * 1.8); width: auto; }
@media (max-width: 1023px) {
	.dg-foot-copyrow { text-align: center; }
	.dg-foot-base-in { justify-content: center; }
}
@media (max-width: 767px) {
	.dg-foot-in { padding: calc(var(--u) * 24) calc(var(--u) * 14) 0; }
	.dg-foot-copyrow, .dg-foot-base { padding-left: calc(var(--u) * 14); padding-right: calc(var(--u) * 14); }
}

/* ===== 6. VISUAL ROUND 4 (VEX_TASK_370) =====
   Agreed by Boss and Cole on 2026-10-02 after round 3. Sections 1-5 are untouched; rules here come later with equal or higher specificity.
   New font sizes follow the section-5 rule: max(calc(var(--u) * N * var(--fs)), floor). Earlier value -> site value:
   | Where                 | Before                                    | Now                                                             | Why                                    |
   | maker signature       | one row, 329px wide (label 14px)          | symbol + two-line block, ~173px at 1.75u (wordmark 68.5u)       | it was bigger than the client's own logo |
   | "Designed by" label   | 13px floor                                | 11px — the ONLY exception to the 13px type floor                | must stay subordinate to the wordmark   |
   | nav inner box         | 20u side padding on the bar               | body column: 760u max, 28u side padding                         | logo/menu edges line up with the content |
   | fixed bars            | opaque white                              | opaque at top; scrolled: 75% white + blur(12px) saturate(1.4)   | lighter chrome; blur sits on ::before so the dropdown can blur too |
   | phone menu            | 97% coal, centred big list                | 85% coal + blur(20px), left-aligned list, call button at bottom | readable, one-tap call                   |
   | group title (desktop) | button that only opens                    | link to the first page + separate caret button                  | a title that did nothing on click confused |
   | phone home            | 2 notices, bars as icons, screen-height   | 4 notices + dates, 4 photos, icons, call strip, content height  | fuller first page, no empty band         |
   Without backdrop-filter support the bars and menu keep their opaque colours (@supports below). */

/* ---- 6.1 maker signature: scales with --u like the association logo above it (17u high), so it stays smaller than that logo on every viewport ---- */
.dg-foot .dg-foot-by { gap: calc(var(--u) * 5); }
.dg-foot .dg-foot-by img.sym { height: calc(var(--u) * 15); width: auto; }
.dg-foot .dg-foot-by .txt { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 2.3); font-size: 0; }
.dg-foot .dg-foot-by .txt span { font-size: max(calc(var(--u) * 6.3), 11px); line-height: 1; letter-spacing: 0.04em; }
.dg-foot .dg-foot-by img.wm { width: calc(var(--u) * 68.5); height: auto; }

/* ---- 6.2 nav: body-column alignment + glass when scrolled ---- */
.px-nav { padding: 0; background: transparent; }
.px-nav-in { height: 100%; max-width: calc(var(--u) * 760); padding: 0 calc(var(--u) * 28); box-sizing: border-box; }
.pxm-nav { background: transparent; }
.px-nav::before, .pxm-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; transition: background .25s ease, box-shadow .25s ease; }
.px-nav::before { background: rgba(255,255,255,0.96); }
.pxm-nav::before { background: #fff; }
.pxm-menu { background: rgba(23,25,28,0.97); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dg-scrolled .px-nav::before, .dg-scrolled .pxm-nav::before { background: rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 1px calc(var(--u) * 8) rgba(23,25,28,0.07); }
	.px-grp-panel { background: rgba(255,255,255,0.8); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
	.pxm-menu { background: rgba(23,25,28,0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}

/* ---- 6.3 desktop group: title link + caret button ---- */
.px-links { gap: calc(var(--u) * 16); }
.px-nav .px-links a.px-grp-t { text-decoration: none; }
.px-grp-x { width: max(32px, calc(var(--u) * 18)); height: max(32px, calc(var(--u) * 18)); margin-left: calc(var(--u) * 1); padding: 0; border: 0; border-radius: 50%; background: none; color: var(--slate); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s; }
.px-grp-x:hover, .px-grp.open .px-grp-x { background: var(--bar); }
.px-grp-x:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }
/* the caret button's empty half must not push the last menu past the content edge */
.px-links > .px-grp:last-child { margin-right: calc((max(32px, var(--u) * 18) - var(--u) * 7 + 2.3px) / -2); }

/* ---- 6.4 shared call button ---- */
.dg-root a.dg-call { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 6); width: 100%; min-height: max(52px, calc(var(--u) * 30)); padding: 0 calc(var(--u) * 12); box-sizing: border-box; border-radius: calc(var(--u) * 6); background: var(--lamp); color: var(--coal); text-decoration: none; text-align: center; font-size: max(calc(var(--u) * 10 * var(--fs)), var(--fs-body-min)); font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.dg-call img { width: max(20px, calc(var(--u) * 12)); height: max(20px, calc(var(--u) * 12)); flex: none; }
.dg-call b { font-weight: 800; }

/* ---- 6.5 phone menu: left-aligned list ---- */
@media (max-width: 767px) {
	.pxm-menu { padding: calc(var(--u) * 42) calc(var(--u) * 20) calc(var(--u) * 16); }
	.pxm-grp { align-items: stretch; padding: 0; border-top: 0; margin-bottom: calc(var(--u) * 12); }
	.pxm-grp-t { margin: 0 0 calc(var(--u) * 1); }
	.pxm-menu .pxm-grp a { justify-content: flex-start; text-align: left; font-size: max(calc(var(--u) * 11 * var(--fs)), 19px); font-weight: 700; }
	.pxm-menu-call { margin-top: auto; padding-top: calc(var(--u) * 8); }
}

/* ---- 6.6 phone home: content height, icons, notices, photos, call strip (markup is .dg-m only) ---- */
@media (max-width: 767px) {
	.pxm-panel { min-height: 0; }
	.pxm-quick a { height: auto; min-height: calc(var(--u) * 46); padding: calc(var(--u) * 8) calc(var(--u) * 2); gap: calc(var(--u) * 5); box-sizing: border-box; }
}
.pxm-quick a img { height: max(28px, calc(var(--u) * 16)); width: auto; display: block; }
.pxm-sec { padding: calc(var(--u) * 14) calc(var(--u) * 12) 0; }
.pxm-sec-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--u) * 2); }
.pxm-sec-h b { font-size: max(calc(var(--u) * 11 * var(--fs)), var(--fs-small-min)); font-weight: 800; color: var(--coal); letter-spacing: -0.02em; }
.pxm-sec-h a { font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); color: var(--mute); text-decoration: none; padding: calc(var(--u) * 6) 0 calc(var(--u) * 6) calc(var(--u) * 10); }
.pxm-sec .pxm-row { align-items: baseline; }
.pxm-home-gal { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 9) calc(var(--u) * 7); margin-top: calc(var(--u) * 4); }
.pxm-home-gal a { display: block; min-width: 0; text-decoration: none; color: inherit; }
.pxm-home-gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: calc(var(--u) * 6); background: var(--paper2); }
.pxm-home-gal span { display: block; margin-top: calc(var(--u) * 4); font-size: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); font-weight: 700; line-height: 1.5; color: var(--coal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxm-callbar { margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 14) calc(var(--u) * 12) calc(var(--u) * 16); background: var(--paper2); border-top: 1px solid var(--line); }
.pxm-callbar p { margin: 0 0 calc(var(--u) * 8); display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 8); }
.pxm-callbar p span { font-size: max(calc(var(--u) * 8 * var(--fs)), var(--fs-small-min)); font-weight: 700; color: var(--slate); }
.pxm-callbar p b { font-size: max(calc(var(--u) * 13 * var(--fs)), var(--fs-small-min)); font-weight: 800; color: var(--coal); font-family: var(--font-outfit); letter-spacing: 0; }
/* the strip already prints the number, so its button says only "전화하기" */
.pxm-callbar .dg-call b { display: none; }

/* ===== 7. REFINEMENT PASS (VEX_TASK_372) — DESIGN STANDARD =====
   Boss, 2026-10-02: the site read flat and cramped next to the legacy one. Goal: not a copy of the legacy site but a calmer, more refined 2026 site.
   Principle: restraint, white space, type. Depth comes ONLY from soft layered shadows and hairlines — no heavy borders, no decorative gradients.
   Every rule below uses the tokens of 7.0 for spacing, radius, shadow and type; no literal radius or shadow value may appear after 7.0.
   Yellow (--lamp) marks one thing per view: the current menu, the main button, the "new" pill.

   Rules of sections 1-6 that this section overrides (for a later clean-up of those sections):
   | Earlier rule (section)                                              | Replaced by                                                   |
   | .px-sub-band*, .pxm-head* (1, 2, 4, 5)                               | .dg-hero (one markup; the old classes are no longer rendered)  |
   | .px-sub-body padding / flex / child max-width (1, 2)                 | the white sheet: .dg-page > .px-sub-body                        |
   | .px-box, .px-biz-card(+:hover lamp border), .px-gal figure(+:hover), .px-since-card, .px-greet-ph, .px-map, .px-way-img, .px-mini img, .px-photos button radius/border/shadow (1, 2) | card tokens (7.3) |
   | .px-table, .px-tr(+.th, .n, .d, .v, .t, :hover), .px-file (1, 2)     | board table (7.4); .px-file is no longer rendered               |
   | .pxm-row list on board pages (1, 2)                                  | .dgm-list cards (7.4); .pxm-row stays for the phone home         |
   | .px-search, .px-search input, .px-pager a/i, .px-board-top (1, 2, 5) | pill search + round pager (7.4)                                  |
   | .px-post, .px-post-h(+h3, p), .px-post-b, .px-post-f, .px-files a/b, .px-back a (2, 5) | post detail (7.5)                              |
   | .px-btn, .px-toast, .dg-call, .px-grp-panel, .pxm-quick a, .pxm-home-gal img radius (1, 5, 6) | radius tokens (7.3)                     |
   | --font-mono = JetBrains (2)                                          | Pretendard + tabular-nums (7.0)                                  |
   | .px-motto div / .px-tl-row / .px-gal figure hidden-until-.in + their own offsets (1, 2) | one entrance motion, .dg-rise (7.6)             |
   | .px-biz 4 columns on tablets (1)                                     | 2 columns below 1024 (7.3)                                       | */

/* ---- 7.0 tokens ---- */
.dg-root {
	/* spacing: the 4 / 8px family at the desktop scale (1.75px per --u): 4 8 12 16 24 32 48 64 */
	--sp-1: calc(var(--u) * 2.3); --sp-2: calc(var(--u) * 4.6); --sp-3: calc(var(--u) * 6.9); --sp-4: calc(var(--u) * 9.1);
	--sp-5: calc(var(--u) * 13.7); --sp-6: calc(var(--u) * 18.3); --sp-7: calc(var(--u) * 27.4); --sp-8: calc(var(--u) * 36.6);
	--sp-foot: 72px;                          /* between the sheet and the footer (VEX_TASK_373: 120 read as a hole under the sheet's shadow) */
	--sheet-pad: calc(var(--u) * 38);         /* inside the sheet (~66px at 1.75) */
	--sheet-lap: 48px;                        /* how far the sheet rises over the hero */
	--hero-h: 280px; --row-h: 64px; --ctl-h: 44px;
	/* radius: three steps only */
	--r-sheet: 24px; --r-card: 16px; --r-pill: 999px;
	/* depth */
	--shadow-1: 0 1px 2px rgba(23,25,28,0.04), 0 6px 24px rgba(23,25,28,0.06);
	--shadow-2: 0 2px 4px rgba(23,25,28,0.04), 0 18px 48px rgba(23,25,28,0.08);
	--hairline: rgba(23,25,28,0.07);
	/* type: four title steps, body rhythm */
	--t1: max(calc(var(--u) * 21 * var(--fs)), 30px);   /* page title in the hero (~40px) */
	--t2: max(calc(var(--u) * 14 * var(--fs)), 22px);   /* post title, lead line */
	--t3: max(calc(var(--u) * 10 * var(--fs)), 17px);   /* card / section title */
	--t4: max(calc(var(--u) * 7.5 * var(--fs)), var(--fs-small-min)); /* eyebrow, meta, table head */
	--ls-title: -0.025em; --lh-body: 1.8; --measure: 68ch;
	/* numbers: Pretendard with tabular figures; the coding font is not used on public pages */
	--font-mono: "Pretendard-Local", sans-serif;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) {
	.dg-root { --sp-foot: 48px; --sheet-pad: calc(var(--u) * 14); --hero-h: 200px; --t1: max(calc(var(--u) * 15 * var(--fs)), 26px); --t2: max(calc(var(--u) * 12 * var(--fs)), 22px); }
}

/* ---- 7.1 sub-page hero + group tabs ---- */
.dg-hero { position: relative; flex: none; height: var(--hero-h); box-sizing: border-box; padding: 0 var(--sp-5) calc(var(--sheet-lap) + var(--ctl-h) + var(--sp-2) + var(--sp-5)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--coal); }
.dg-hero.no-tabs { padding-bottom: var(--sheet-lap); }
.dg-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* the photo keeps its own brightness (367); only a soft pool behind the centred title */
.dg-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 90% at 50% 38%, rgba(23,25,28,0.5), rgba(23,25,28,0)); }
.dg-hero-in { position: relative; z-index: 1; }
.dg-eb { margin: 0; font-size: var(--t4); font-weight: 800; letter-spacing: 0.18em; line-height: 1.6; color: var(--lamp); }
.dg-hero h2 { margin: var(--sp-1) 0 0; font-size: var(--t1); font-weight: 800; letter-spacing: var(--ls-title); line-height: 1.2; color: #fff; text-shadow: 0 1px var(--sp-3) rgba(0,0,0,0.5); }
.dg-tabs { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(var(--sheet-lap) + var(--sp-4)); display: flex; padding: 0 var(--sp-4); overflow-x: auto; scrollbar-width: none; }
.dg-tabs::-webkit-scrollbar { display: none; }
.dg-tabs-in { flex: none; margin: 0 auto; display: inline-flex; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-pill); border: 1px solid rgba(255,255,255,0.18); background: rgba(23,25,28,0.62); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dg-tabs-in { background: rgba(255,255,255,0.16); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
}
.dg-tabs a { display: flex; align-items: center; height: calc(var(--ctl-h) - var(--sp-1)); padding: 0 var(--sp-5); border-radius: var(--r-pill); font-size: max(calc(var(--u) * 8.5 * var(--fs)), 15px); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; color: rgba(255,255,255,0.9); transition: background .2s ease, color .2s ease; }
.dg-tabs a:hover { background: rgba(255,255,255,0.14); }
.dg-tabs a.on { background: #fff; color: var(--coal); font-weight: 800; }
.dg-tabs a:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
/* breadcrumb: very small, laid over the band where the sheet overlaps -> it reads as the sheet's top-right corner */
.dg-crumb { position: absolute; z-index: 3; left: 50%; bottom: 0; transform: translateX(-50%); width: min(calc(100% - var(--u) * 56), calc(var(--u) * 704)); height: var(--sheet-lap); margin: 0; padding: 0 var(--sp-6); box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; font-size: var(--t4); letter-spacing: 0.02em; color: var(--mute); pointer-events: none; }

/* ---- 7.2 the body sheet ---- */
.dg-page > .px-sub-body { position: relative; z-index: 2; flex: 0 0 auto; box-sizing: border-box; width: min(calc(100% - var(--u) * 56), calc(var(--u) * 704)); margin: calc(var(--sheet-lap) * -1) auto var(--sp-foot); padding: var(--sheet-pad); background: var(--card); border-radius: var(--r-sheet); box-shadow: var(--shadow-2); }
.dg-page > .px-sub-body > * { max-width: none; }
.dg-page > .dg-foot { margin-top: auto; }
@media (max-width: 767px) {
	.dg-page > .px-sub-body { width: calc(100% - var(--u) * 14); padding: var(--sp-6) var(--sheet-pad) var(--sp-7); }
}
/* reading rhythm */
.px-greet-p, .px-about .px-box-txt, .px-post-b { line-height: var(--lh-body); }
.px-greet-p { max-width: var(--measure); }
.px-greet-lead, .px-addr-h, .px-low-head b, .pxm-sec-h b, .px-box-t { letter-spacing: var(--ls-title); }
.px-sign { border-top-color: var(--hairline); margin-top: var(--sp-6); padding-top: var(--sp-5); }

/* ---- 7.3 cards, controls, radius ---- */
.px-box, .px-gal figure, .pxm-quick a, .dgm-list a, .dg-pn > * { border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
.px-greet-ph, .px-map, .px-since-card, .px-way-img, .px-mini img, .px-mini .px-ph, .px-photos button, .pxm-home-gal img, .px-motto div { border-radius: var(--r-card); }
.px-map, .px-photos button { border-color: var(--hairline); }
.px-btn, .px-back a, .px-search, .px-toast, .dg-root a.dg-call { border-radius: var(--r-pill); }
.px-btn.line { border-color: var(--hairline); box-shadow: var(--shadow-1); }
.px-grp-panel { border-color: var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-2); }
.px-nrow, .pxm-row { border-bottom-color: var(--hairline); }
.px-gal { gap: var(--sp-5) var(--sp-4); }

/* ---- 7.4 board list: table (desktop), cards (phone), search, pager ---- */
.px-board-top { margin-bottom: var(--sp-5); gap: var(--sp-4); flex-wrap: wrap; }
.px-board-top span b { font-weight: 800; }
.px-search { width: min(100%, calc(var(--u) * 150)); height: var(--ctl-h); box-sizing: border-box; padding: 0 var(--sp-4); gap: var(--sp-2); border: 1px solid var(--line); background: var(--card); transition: border-color .2s ease, box-shadow .2s ease; }
.px-search:focus-within { border-color: var(--coal); box-shadow: var(--shadow-1); }
.px-search img { flex: none; width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.px-search input, .px-search input::placeholder { font-size: max(calc(var(--u) * 8.5 * var(--fs)), 16px); }
.px-table { background: none; border: 0; border-radius: 0; overflow: visible; }
/* header and rows share one grid and one alignment per column */
.px-tr, .px-tr.th { grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) calc(var(--u) * 70) calc(var(--u) * 40); gap: var(--sp-4); padding: 0 var(--sp-3); box-sizing: border-box; align-items: center; }
.px-tr { min-height: var(--row-h); border-bottom: 1px solid var(--hairline); transition: background .2s ease; }
.px-tr:last-child { border-bottom: 1px solid var(--hairline); }
.px-tr.th { min-height: calc(var(--row-h) * 0.75); background: none; border-bottom: 1px solid var(--coal); font-weight: 800; letter-spacing: 0.12em; }
.px-tr.th span { color: var(--coal); font-weight: 800; }
.px-tr .n, .px-tr .d, .px-tr .v { text-align: center; }
.px-tr .t { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; text-align: left; overflow: visible; }
.px-tr .t > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-tr .v img { display: block; margin: 0 auto; width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.px-tr:not(.th):hover, a.px-tr:not(.th):hover { background: rgba(23,25,28,0.025); }
.dg-new { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: calc(var(--u) * 11); height: calc(var(--u) * 11); padding: 0 var(--sp-1); box-sizing: border-box; border-radius: var(--r-pill); background: var(--lamp); color: var(--coal); font-style: normal; font-size: var(--fs-small-min); font-weight: 800; line-height: 1; letter-spacing: 0; }
.dgm-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.dgm-list a { display: block; padding: var(--sp-4); background: var(--card); text-decoration: none; color: inherit; }
.dgm-list b { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: max(calc(var(--u) * 9 * var(--fs)), var(--fs-body-min)); font-weight: 700; line-height: 1.45; letter-spacing: var(--ls-title); color: var(--coal); }
.dgm-list b > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.dgm-list .m { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); font-size: var(--t4); color: var(--mute); }
.dgm-list .m img { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.px-empty.dg-none { padding: var(--sp-7) 0; text-align: center; }
.px-pager { gap: var(--sp-2); margin-top: var(--sp-6); align-items: center; }
.px-pager a, .px-pager .ar { width: var(--ctl-h); height: var(--ctl-h); box-sizing: border-box; border-radius: var(--r-pill); border: 1px solid var(--hairline); background: var(--card); display: flex; align-items: center; justify-content: center; font-size: max(calc(var(--u) * 8 * var(--fs)), 15px); font-weight: 700; color: var(--slate); transition: background .2s ease, border-color .2s ease; }
.px-pager a:hover { border-color: var(--coal); }
.px-pager a.on { background: var(--coal); border-color: var(--coal); color: #fff; }
.px-pager .ar img { width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.px-pager .ar.off { opacity: 0.35; }

/* ---- 7.5 post detail: on the sheet itself, no card in a card ---- */
.px-post { background: none; border: 0; border-radius: 0; overflow: visible; }
.px-post-h { padding: 0 0 var(--sp-6); border-bottom: 1px solid var(--hairline); }
.px-post-h .dg-eb { color: var(--lamp-d); font-family: inherit; }
.px-post-h h3 { margin: var(--sp-2) 0 0; font-size: var(--t2); letter-spacing: var(--ls-title); line-height: 1.35; }
.px-post-h .px-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: var(--sp-3) 0 0; font-size: var(--t4); font-family: inherit; color: var(--mute); }
.px-post-meta span::before { content: '·'; margin-right: var(--sp-3); }
.px-post-b { padding: var(--sp-6) 0; max-width: var(--measure); }
.px-post-f { padding: 0 0 var(--sp-6); }
.px-post-f h4 { margin-bottom: var(--sp-3); font-size: var(--t4); letter-spacing: 0.12em; }
.px-photos { gap: var(--sp-3); }
.px-files { flex-direction: row; flex-wrap: wrap; gap: var(--sp-2); }
.px-files a { min-height: var(--ctl-h); box-sizing: border-box; padding: var(--sp-2) var(--sp-5) var(--sp-2) var(--sp-4); gap: var(--sp-2); border: 1px solid var(--hairline); border-radius: var(--r-pill); box-shadow: var(--shadow-1); background: var(--card); transition: box-shadow .2s ease; }
.px-files a:hover { background: var(--card); box-shadow: var(--shadow-2); }
.px-files a img { flex: none; width: calc(var(--u) * 11); height: calc(var(--u) * 11); }
.px-files a span { overflow-wrap: anywhere; font-weight: 600; }
.px-files a small { flex: none; font-size: var(--t4); color: var(--mute); }
.dg-pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-2); padding-top: var(--sp-6); border-top: 1px solid var(--hairline); }
.dg-pn > * { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; padding: var(--sp-4) var(--sp-5); background: var(--card); text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
.dg-pn a:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.dg-pn small { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--t4); font-weight: 700; color: var(--mute); }
.dg-pn small img { width: calc(var(--u) * 9); height: calc(var(--u) * 9); }
.dg-pn b { font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); font-weight: 700; color: var(--coal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-pn .nx { text-align: right; }
.dg-pn .nx small { justify-content: flex-end; }
.dg-pn .off { box-shadow: none; background: none; }
.dg-pn .off b { font-weight: 500; color: var(--mute); }
.px-back { margin-top: var(--sp-6); }
.px-back a { display: inline-flex; align-items: center; min-height: var(--ctl-h); box-sizing: border-box; padding: 0 var(--sp-6); border: 1px solid var(--hairline); box-shadow: var(--shadow-1); font-size: max(calc(var(--u) * 8.5 * var(--fs)), 16px); transition: box-shadow .2s ease, background .2s ease; }
@media (max-width: 767px) { .dg-pn { grid-template-columns: 1fr; gap: var(--sp-3); } .dg-pn .nx { text-align: left; } .dg-pn .nx small { justify-content: flex-start; flex-direction: row-reverse; } }

/* ---- 7.6 one entrance motion: rise 12px while fading in, once (dogye.js adds .dg-rise / .in / .dg-done; nothing is hidden without JS or with reduced motion) ---- */
.px-motto div, .px-tl-row, .px-gal figure { opacity: 1; transform: none; }
.dg-root .dg-rise { opacity: 0; transform: translateY(12px); }
.dg-root .dg-rise.in { opacity: 1; transform: none; transition: opacity .4s ease-out var(--dg-delay, 0ms), transform .4s ease-out var(--dg-delay, 0ms); }
.dg-root .dg-rise.dg-done { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
/* card lift comes after the motion rules so a finished card still rises on hover */
.dg-root .px-gal figure:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--hairline); }
/* the hall photo keeps the reader company while the long greeting scrolls (desktop two-column layout only) */
@media (min-width: 768px) { .px-greet-ph { position: sticky; top: calc(var(--u) * 44 + var(--sp-5)); } }

/* ---- 7.7 notice list without the attachment column (VEX_TASK_373): every notice has a file, so a column of clips said nothing.
   Three columns; a small clip follows the title of a post that has a file. Header and rows still share one grid. ---- */
.px-table.c3 .px-tr, .px-table.c3 .px-tr.th { grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) calc(var(--u) * 70); }
.dg-clip { flex: none; width: clamp(14px, calc(var(--u) * 9), 16px); height: clamp(14px, calc(var(--u) * 9), 16px); }
.dgm-list b .dg-clip { margin-top: 0.3em; }

/* ---- 7.8 admin sign-in dialog (VEX_TASK_373): a staff tool, so it is taken OUT of the visitor type scale (--fs and the floors) — the body's
   large base size made its fields ~30px and cut the e-mail off. Fixed sizes: 16px fields (no phone zoom), 14px labels, 48px controls.
   Shape and depth use the section-7 tokens; the button is the site's dark pill, not the template's blue. Markup, field names and login logic unchanged. ---- */
.dg-root .dg-admin { width: min(calc(100% - 32px), 400px); max-width: none; margin: 0; box-sizing: border-box; border-radius: var(--r-sheet); box-shadow: var(--shadow-2); font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--coal); }
.dg-root .dg-admin h3 { font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: var(--ls-title); color: var(--coal); }
.dg-root .dg-admin label { font-size: 14px; font-weight: 600; color: var(--slate); }
.dg-root .dg-admin input { height: 48px; box-sizing: border-box; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 16px; color: var(--coal); background: var(--card); }
.dg-root .dg-admin input:focus { border-color: var(--coal); outline: 3px solid var(--hairline); box-shadow: none; }
.dg-root .dg-admin form > div[x-show] { font-size: 14px; }
.dg-root .dg-admin button[type=submit] { height: 48px; padding: 0 20px; border-radius: var(--r-pill); background: var(--coal); color: #fff; font-size: 16px; font-weight: 700; transition: background .2s ease; }
.dg-root .dg-admin button[type=submit]:hover { background: var(--slate); }

/* ---- 7.9 government banners (VEX_TASK_373): the emblem may not be recoloured to a white mono on screen (design guide BS 1-05/1-07/1-09), so the colour
   originals on their white ground stay; they are only made quieter: 80% size, no grey frame (removed in the SVGs), softer corners. ---- */
.dg-foot-gov img { height: calc(var(--u) * 22.4); }
.dg-foot .dg-foot-gov a { border-radius: calc(var(--r-card) / 2); overflow: hidden; }


/* ---- 7.10 popup windows (VEX_TASK_379): the core component (wwwroot/css/popup.css) is skinned only through its CSS variables, mapped to
   the section-7 tokens. The windows sit above the nav and the phone menu button. The Studio preview loads this file too
   (.dg-pop-preview), so what the operator sees is what visitors get. ---- */
.dg-root .pop-stage {
	--pop-radius: var(--r-sheet);
	--pop-shadow: var(--shadow-2);
	--pop-surface: var(--card);
	--pop-ink: var(--coal);
	--pop-muted: var(--slate);
	--pop-line: var(--hairline);
	--pop-foot: var(--paper);
	--pop-media: var(--paper2);
	--pop-accent: var(--coal);
	--pop-accent-hover: var(--slate);
	--pop-btn-radius: var(--r-pill);
	--pop-font: "Pretendard-Local", sans-serif;
}
.dg-root .pop-stage.is-public { z-index: 95; }
.dg-root .pop-title { font-weight: 800; letter-spacing: var(--ls-title); }
.dg-root .pop-text { font-size: 16px; }
.dg-pop-preview { background: var(--slate); font-size: 16px; line-height: 1.5; letter-spacing: 0; }

/* ===== 8. BOSS PASS 10-03 =====
   8.1 desktop home: the hero used to be a fixed screen-height box (photo 66% + paper strip 34%, both absolute), so on tall screens the
   strip was taller than its notices/photos and left an empty band above the footer. Now the photo keeps its screen share (66dvh, min 330u)
   and the strip takes its content height; the footer follows right after. Phone home (.pxm-*) is unchanged. */
.px-hero { min-height: 0; }
.px-hero-ph { position: relative; height: max(66dvh, calc(var(--u) * 330)); }
.px-hero-body { height: calc(max(66dvh, calc(var(--u) * 330)) - var(--u) * 44); }
.px-home-low { position: relative; height: auto; }
.px-low-grid { padding-bottom: calc(var(--u) * 30); }

/* 8.2 Business page (VEX_TASK_406, reworked by Cole 10-03 after Boss: the large zigzag rows "looked cheap"). The photos are event snapshots of
   uneven quality, so they stay small (16:9 on top of a card) and muted (about 3/4 desaturated, a little warm — Boss 10-03: not full black-and-white), full colour on hover; the business name is the
   largest text, the number a quiet eyebrow. 2x2 grid, one column on phones. */
.dg-biz-intro { margin: 0 0 var(--sp-6); text-align: center; font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); line-height: var(--lh-body); color: var(--mute); word-break: keep-all; }
.dg-biz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.dg-biz-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-card); overflow: hidden; transition: box-shadow .35s, transform .35s; }
.dg-biz-ph { aspect-ratio: 16 / 9; overflow: hidden; background: var(--coal); }
.dg-biz-ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.75) sepia(0.12) contrast(1.04) brightness(0.96); transform: scale(1.001); transition: filter .5s, transform .6s; }
.dg-biz-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.dg-biz-card:hover .dg-biz-ph img { filter: none; transform: scale(1.03); }
.dg-biz-t { padding: var(--sp-5) var(--sp-5) var(--sp-6); word-break: keep-all; }
.dg-biz-no { display: block; font-size: var(--t4); font-weight: 700; letter-spacing: 0.12em; color: var(--lamp-d); }
.dg-biz-name { margin: var(--sp-2) 0 0; font-size: max(calc(var(--u) * 12 * var(--fs)), 20px); font-weight: 800; line-height: 1.4; letter-spacing: var(--ls-title); color: var(--coal); }
.dg-biz-desc { margin: var(--sp-3) 0 0; font-size: max(calc(var(--u) * 8.5 * var(--fs)), var(--fs-body-min)); line-height: 1.85; color: var(--slate); }
@media (max-width: 767px) {
	.dg-biz-intro { margin-bottom: var(--sp-5); text-align: left; }
	.dg-biz-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
	.dg-biz-t { padding: var(--sp-4) var(--sp-4) var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) { .dg-biz-card, .dg-biz-ph img { transition: none; } .dg-biz-card:hover { transform: none; } }

/* 8.3 Desktop nav, redesigned (Cole 10-03; Boss: the caret buttons made the spacing uneven and the bar looked ordinary). Overrides 5.2 / 6.3.
   [logo] ......... [menu] | [phone pill]. No caret buttons: titles are links, dropdowns open on hover and keyboard focus (:focus-within).
   Active/hover = a 2px yellow bar on the nav's bottom edge (scaleX), not under the text. Dropdown = soft card hanging from the bar. */
.px-nav-in { display: flex; align-items: center; height: 100%; }
.px-nav .px-brand { margin-right: auto; }
.px-nav .px-links { height: 100%; gap: calc(var(--u) * 24); align-items: stretch; }
.px-nav .px-links > a.px-link, .px-nav .px-grp { height: 100%; display: flex; align-items: center; }
.px-nav .px-grp { position: relative; }
.px-nav .px-link { position: relative; height: 100%; display: flex; align-items: center; padding: 0 calc(var(--u) * 2); font-size: max(calc(var(--u) * 9 * var(--fs)), 16px); font-weight: 600; color: var(--slate); letter-spacing: -0.015em; text-decoration: none; }
.px-nav .px-link::after { left: 0; right: 0; bottom: 0; width: auto; height: 2px; border-radius: 2px; transform: scaleX(0); transform-origin: center; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.px-nav .px-link:hover, .px-nav .px-grp:hover .px-link, .px-nav .px-grp:focus-within .px-link, .px-nav .px-link.on { color: var(--coal); }
.px-nav .px-link.on { font-weight: 700; }
.px-nav .px-link:hover::after, .px-nav .px-grp:hover .px-link::after, .px-nav .px-grp:focus-within .px-link::after, .px-nav .px-link.on::after { left: 0; width: auto; transform: scaleX(1); }
.px-nav a.px-link:focus-visible { outline: none; }
.px-nav .px-grp-panel { background: rgba(255,255,255,0.97); top: 100%; left: 50%; min-width: calc(var(--u) * 112); padding: calc(var(--u) * 5); gap: 2px; border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; transform: translate(-50%, calc(var(--u) * 5)); transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1), visibility 0s linear .2s; }
.px-nav .px-grp:hover .px-grp-panel, .px-nav .px-grp:focus-within .px-grp-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.px-nav .px-grp-panel a { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); padding: calc(var(--u) * 7) calc(var(--u) * 9); border-radius: calc(var(--r-card) - 6px); font-size: max(calc(var(--u) * 8.6 * var(--fs)), 15px); font-weight: 600; color: var(--slate); text-decoration: none; box-shadow: none; }
.px-nav .px-grp-panel a i { font-style: normal; font-size: 0.9em; color: var(--lamp-d); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.px-nav .px-grp-panel a:hover, .px-nav .px-grp-panel a:focus-visible { background: var(--paper); color: var(--coal); outline: none; }
.px-nav .px-grp-panel a:hover i, .px-nav .px-grp-panel a:focus-visible i { opacity: 1; transform: none; }
.px-nav .px-grp-panel a.on { color: var(--coal); font-weight: 700; box-shadow: none; }
.px-nav .px-grp-panel a.on span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--lamp); vertical-align: middle; }
.px-links > .px-grp:last-child { margin-right: 0; }
.px-nav-call { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); margin-left: calc(var(--u) * 16); padding: calc(var(--u) * 4.5) calc(var(--u) * 9); border: 1px solid rgba(23,25,28,0.12); border-radius: var(--r-pill); font-size: max(calc(var(--u) * 8.2 * var(--fs)), 15px); font-weight: 700; color: var(--coal); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.px-nav-call img { width: calc(var(--u) * 8); height: auto; }
.px-nav-call:hover, .px-nav-call:focus-visible { background: var(--lamp); border-color: var(--lamp); outline: none; }
@media (max-width: 1100px) { .px-nav-call span { display: none; } .px-nav-call { padding: calc(var(--u) * 5); } }
@media (prefers-reduced-motion: reduce) { .px-nav .px-link::after, .px-nav .px-grp-panel, .px-nav .px-grp-panel a i { transition: none; } }

/* 8.4 Phone menu, redesigned (Cole 10-03; Boss: small yellow group titles over big white links, and 사업소개 with no title, made the
   hierarchy unreadable). One rule for every group: level 1 = group title (big, white, link to its first page), level 2 = its pages
   (smaller, 60% white, one wrapping row). A one-page group is level 1 only. Yellow marks the current page and nothing else. */
@media (max-width: 767px) {
	.pxm-menu { align-items: stretch; justify-content: flex-start; gap: 0; padding: calc(var(--u) * 44) calc(var(--u) * 20) calc(var(--u) * 16); }
	.pxm-menu .pxm-grp { display: block; margin: 0; padding: calc(var(--u) * 10) 0 calc(var(--u) * 11); border-top: 1px solid rgba(255,255,255,0.1); }
	.pxm-menu .pxm-grp:first-child { border-top: 0; padding-top: 0; }
	.pxm-menu a.pxm-l1 { position: relative; display: flex; align-items: center; justify-content: flex-start; width: auto; min-height: 48px; padding: 0; text-align: left; font-size: max(calc(var(--u) * 13 * var(--fs)), 24px); font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; color: #fff; }
	.pxm-menu a.pxm-l1.on { color: #fff; }
	.pxm-menu a.pxm-l1.on::before { content: ''; position: absolute; left: calc(var(--u) * -20); top: 50%; width: 3px; height: 1.1em; transform: translateY(-50%); border-radius: 0 3px 3px 0; background: var(--lamp); }
	.pxm-menu .pxm-l2 { display: flex; flex-wrap: wrap; gap: 0 calc(var(--u) * 12); margin-top: calc(var(--u) * 1); }
	.pxm-menu .pxm-l2 a { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; min-height: 44px; padding: 0; text-align: left; font-size: max(calc(var(--u) * 9 * var(--fs)), 17px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; color: rgba(255,255,255,0.62); }
	.pxm-menu .pxm-l2 a.on { color: #fff; font-weight: 700; }
	.pxm-menu .pxm-l2 a.on::before { content: ''; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--lamp); }
	.pxm-menu-call { margin-top: auto; padding-top: calc(var(--u) * 12); }
}

/* 8.5 Maker signature 20% smaller (Boss 10-03: it was ~175px, almost the association logo's ~190px, so the two logos competed).
   Every 6.1 size x0.8 (~140px wide on desktop); the 11px floor of the "Designed by" label stays (the one documented type-floor exception). */
.dg-foot .dg-foot-by { gap: calc(var(--u) * 4); }
.dg-foot .dg-foot-by img.sym { height: calc(var(--u) * 12); }
.dg-foot .dg-foot-by .txt { gap: calc(var(--u) * 1.85); }
.dg-foot .dg-foot-by .txt span { font-size: max(calc(var(--u) * 5.05), 11px); }
.dg-foot .dg-foot-by img.wm { width: calc(var(--u) * 54.8); }