/* Uncommon Group — web. Type and colour derived from 언커먼그룹_PPT템플릿.pptx */
@font-face{font-family:'Pretendard';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/Pretendard-Regular.subset.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/Pretendard-Medium.subset.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/Pretendard-Bold.subset.woff2') format('woff2');}

:root{ --blk:#000000; --wht:#FFFFFF; --panel:#F4F4F4; --rule:#BFBFBF; --sub:#808080; --body:#333333; --dim:#9B9B9B; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wht);color:var(--blk);
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}

/* links inherit; hover is the only state, per the deck's greyscale logic */
a{color:inherit;text-decoration:none}
a:hover{color:var(--sub)}
a.on-black:hover{color:var(--dim)}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* interactive affordances the deck could not specify */
a[data-btn]{transition:background-color .12s ease,color .12s ease,border-color .12s ease}
a[data-btn="solid-light"]:hover{background:var(--dim)!important}
a[data-btn="solid-dark"]:hover{background:var(--body)!important}
a[data-btn="ghost"]:hover{border-color:currentColor!important}
[data-row]{transition:background-color .12s ease}
[data-row]:hover{background:#ECECEC!important}
[data-card]{transition:background-color .12s ease}
[data-card]:hover{background:#ECECEC!important}

/* ── the page shell is fluid; artboards were fixed at 1440 ── */
[data-page]{width:100%!important;max-width:none!important}
[data-page] > *{padding-left:max(48px,calc((100% - 1440px)/2 + 48px))!important;
                padding-right:max(48px,calc((100% - 1440px)/2 + 48px))!important}

@media (max-width:1100px){
  [style*="repeat(6, minmax"],[style*="repeat(6,minmax"]{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  [style*="repeat(5, minmax"],[style*="repeat(5,minmax"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="repeat(4, minmax"],[style*="repeat(4,minmax"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  h1{font-size:clamp(38px,6vw,72px)!important}
  h2{font-size:clamp(30px,4.4vw,48px)!important}
}
@media (max-width:820px){
  [data-page] > *{padding-left:20px!important;padding-right:20px!important}
  [data-nav]{display:none!important}
  [data-burger]{display:flex!important}
  [style*="grid-template-columns:250px"],[style*="grid-template-columns: 250px"]{grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  [style*="repeat(3, minmax"],[style*="repeat(3,minmax"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns:1fr 2fr"],[style*="grid-template-columns: 1fr 2fr"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns:1.7fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="grid-template-columns:1.6fr 1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important;gap:30px!important}
  [style*="grid-template-columns:1.15fr 1fr"],[style*="grid-template-columns:1fr 1.6fr"]{grid-template-columns:minmax(0,1fr)!important}
  /* section heads put their aside under the title rather than beside it */
  [style*="align-items:flex-end;justify-content:space-between"]{
    flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
  [style*="align-items:flex-end;justify-content:space-between"] > span{margin-bottom:0!important}
}
@media (max-width:560px){
  [style*="repeat(6, minmax"],[style*="repeat(6,minmax"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [style*="repeat(4, minmax"],[style*="repeat(4,minmax"]{grid-template-columns:minmax(0,1fr)!important}
  [style*="repeat(2, minmax"],[style*="repeat(2,minmax"]{grid-template-columns:minmax(0,1fr)!important}
  [data-cta]{flex-direction:column!important;align-items:stretch!important}
  [data-cta] > *{justify-content:center!important}
}
[data-burger]{display:none}

/* ── mobile navigation ── */
[data-burger]{display:none;position:relative}
[data-burger] summary{list-style:none;cursor:pointer;width:44px;height:44px;
  display:flex;align-items:center;justify-content:flex-end;margin-right:-6px}
[data-burger] summary::-webkit-details-marker{display:none}
[data-burger] nav{position:absolute;right:0;top:46px;z-index:20;min-width:220px;
  display:flex;flex-direction:column;background:var(--blk);border:1px solid #333333}
[data-burger] nav a{padding:14px 22px;font-size:16px;color:var(--wht)}
[data-burger] nav a:hover{background:#1a1a1a;color:var(--wht)}
[data-burger] nav a[data-quote]{margin:8px;padding:14px 22px;background:var(--wht);
  color:var(--blk);font-weight:700;text-align:center}
[data-burger] nav a[data-quote]:hover{background:var(--dim);color:var(--blk)}
@media (max-width:820px){ [data-burger]{display:block} }

/* label columns sit at the top of their row, not centred in it */
[style*="grid-template-columns:250px"]{align-items:start}

/* ── contact form ── */
[data-input]{transition:border-color .12s ease}
[data-input]::placeholder{color:var(--rule)}
[data-input]:focus{outline:none;border-bottom-color:var(--blk);border-bottom-width:2px}
[data-input]:focus-visible{outline:none}
[data-drop]{position:relative;transition:border-color .12s ease,background-color .12s ease}
[data-drop]:hover{border-color:var(--sub);background:#ECECEC}
[data-drop]:focus-within{border-color:var(--blk);border-style:solid}
[data-chip]{position:relative;transition:background-color .12s ease,color .12s ease,border-color .12s ease}
[data-chip]:hover{border-color:var(--blk)}
[data-chip]:has(input:checked){background:var(--blk);color:var(--wht);border-color:var(--blk);font-weight:500}
[data-chip]:focus-within{outline:2px solid var(--blk);outline-offset:2px}

/* ── logo walls ── */
[data-logo]{transition:opacity .12s ease}
[data-card]:hover [data-logo]{opacity:1!important}

/* ── client logo band ── */
@keyframes uc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.uc-band{ overflow:hidden; }
.uc-track{ display:flex; width:max-content; animation:uc-marquee 64s linear infinite; will-change:transform; }
.uc-band:hover .uc-track{ animation-play-state:paused; }
.uc-cell img{ transition:opacity .15s ease; }
.uc-cell:hover img{ opacity:1!important; }
@media (max-width:820px){
  .uc-track{ animation-duration:44s; }
  .uc-cell{ width:150px!important; height:92px!important; padding:14px 16px!important; }
  .uc-cell img{ max-height:28px!important; max-width:110px!important; }
}
@media (prefers-reduced-motion: reduce){ .uc-track{ animation:none; } .uc-band{ overflow-x:auto; } }

/* ── tables scroll rather than clip on a narrow screen ── */
[data-table]{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
@media (max-width:900px){
  /* wide tables scroll instead of wrapping one word per line */
  [data-page] [data-cols="3"] [data-table-inner]{min-width:440px}
  [data-page] [data-cols="4"] [data-table-inner]{min-width:640px}
  [data-page] [data-cols="5"] [data-table-inner]{min-width:760px}
  [data-page] [data-cols="2"] [data-table-inner]{min-width:0}
}
/* grid and flex children default to min-width:auto, which blocks shrinking */
[data-page] div{min-width:0}

/* ── team: a portrait beside the name on a narrow screen, not above it ── */
@media (max-width:560px){
  [data-person]{flex-direction:row!important;align-items:flex-start;gap:18px!important}
  [data-person] > div:first-child{width:76px!important;height:76px!important}
  [data-person] > div:not(:first-child){flex:1;min-width:0}
}

/* ── scroll reveal ──
   .reveal is applied by script, never by the markup, so the page is fully
   visible without JS. */
.reveal{ opacity:0; transform:translateY(12px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.22,.61,.24,1); will-change:opacity,transform; }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1!important; transform:none!important; } }