@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* Shared site chrome: mega menu, mobile nav, filters, overlays */

/* 전 페이지 공통 타이포·헤더 규격. 페이지별 인라인 style 뒤에 로드되어 항상 이 값이 적용된다.
   헤더 배경만 --header-bg 로 페이지에서 조정한다(메인은 웜톤, 서브는 쿨그레이). */
body{
  font-family:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;
  letter-spacing:-.02em
}
.header{
  background:var(--header-bg,rgba(234,238,240,.94));
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(12,23,32,.08)
}
.header .inner{height:78px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:26px;font-weight:900;letter-spacing:-.055em}
.logo b{display:inline-block;width:9px;height:9px;border-radius:50%;background:#cfff4a;margin-left:4px}
.nav{display:flex;gap:34px;align-items:center;font-size:14px;font-weight:700}
.nav .active{position:relative}
.nav .active:after{content:"";position:absolute;left:0;right:0;bottom:-27px;height:2px;background:#0c1720}
.nav .contact{
  border:1px solid #0c1720;border-radius:999px;padding:11px 18px;
  background:transparent;color:inherit
}
.footer a{text-decoration:underline;text-underline-offset:3px}

/* 서브페이지 공통 상단: 메인의 대형 히어로와 명확히 구분되는 컴팩트 규격 */
body.mong-subpage .hero,
body.mong-subpage .page-head{
  min-height:0;
  padding:122px 0 48px;
  background:#e2e8ec;
  border-bottom:1px solid #c9d0d5
}
body.mong-subpage .hero-grid{
  display:block
}
body.mong-subpage .hero-visual{
  display:none
}
body.mong-subpage .hero .eyebrow,
body.mong-subpage .hero .kicker{
  margin-bottom:22px;
  font-size:10px;
  letter-spacing:.13em
}
body.mong-subpage .hero h1,
body.mong-subpage .page-head h1,
body.mong-subpage h1.declare{
  max-width:1050px;
  margin:0 0 20px;
  font-size:clamp(38px,4.1vw,56px);
  line-height:1.08;
  letter-spacing:-.055em
}
/* 서브 계층: h1(페이지 제목) > h2(섹션 제목). 페이지별 인라인 70~76px 선언을 덮어쓴다. */
body.mong-subpage h2{
  font-size:clamp(28px,3.2vw,42px);
  line-height:1.18;
  letter-spacing:-.045em
}
body.mong-subpage .contact-box h2,
body.mong-subpage .editorial-copy h2,
body.mong-subpage .mile-head h2,
body.mong-subpage .profile-content h2,
body.mong-subpage .side h2{
  font-size:clamp(28px,3.2vw,42px)
}
body.mong-subpage .hero p,
body.mong-subpage .hero .lead,
body.mong-subpage .hero-copy p{
  max-width:760px;
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:#606a6f
}
body.mong-subpage .hero .question{
  max-width:760px;
  margin-top:18px;
  padding-top:16px;
  font-size:16px;
  line-height:1.7
}
body.mong-subpage .hero .actions,
body.mong-subpage .hero .award-badge{
  display:none
}
body.mong-subpage .hero-copy{
  margin-top:20px;
  padding-top:0
}
body.mong-subpage .hero-copy .note{
  margin-top:12px
}

.brand-sign{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:0 0 22px;padding:14px 16px;border:1px solid #d5dbd6;border-radius:14px;
  background:rgba(255,255,255,.78);font-family:Pretendard,"Noto Sans KR",sans-serif
}
.brand-sign .han{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 10px;border-radius:10px;
  background:#0c1720;color:#cfff4a;font-size:22px;font-weight:800;letter-spacing:0
}
.brand-sign .word{
  font-size:15px;font-weight:900;letter-spacing:.06em;color:#0c1720
}
.brand-sign .meaning{
  width:100%;font-size:14px;line-height:1.55;color:#4f5c64;margin:2px 0 0;font-weight:600
}
.footer .brand-sign{
  margin:12px 0 0;padding:0;border:0;background:none;border-radius:0;gap:8px
}
.footer .brand-sign .han{min-width:28px;height:28px;font-size:14px;border-radius:6px}
.footer .brand-sign .meaning{font-size:12px;color:#6e787d;font-weight:500}

@media (max-width:720px){
  .brand-sign{margin-bottom:16px;padding:12px 14px}
  .brand-sign .han{min-width:36px;height:36px;font-size:18px}
  .brand-sign .meaning{font-size:13px}
}
body.mong-has-draft{padding-top:0}
body.mong-has-draft .header{top:0}

.mong-mega-wrap{position:relative}
.mong-mega{
  display:none;position:absolute;left:50%;transform:translateX(-50%);
  top:calc(100% + 12px);width:min(960px,92vw);
  background:#fff;border:1px solid #d9ded9;padding:22px;
  box-shadow:0 24px 60px rgba(12,23,32,.12);z-index:90;
  font-family:Pretendard,"Noto Sans KR",sans-serif;
}
.mong-mega.is-open,
.mong-mega-wrap:hover .mong-mega,
.mong-mega-wrap:focus-within .mong-mega{display:block}
.mong-mega-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.mong-mega a{
  display:block;padding:16px 12px;min-height:132px;background:#f3f5f1;
  border:1px solid transparent;color:#0c1720;text-decoration:none;
}
.mong-mega a:hover,.mong-mega a:focus-visible{border-color:#0c1720;background:#fff}
.mong-mega .n{font-size:11px;font-weight:800;letter-spacing:.1em;color:#66727a;margin-bottom:14px}
.mong-mega strong{display:block;font-size:14px;line-height:1.35;margin-bottom:8px;letter-spacing:-.03em}
.mong-mega span{font-size:12px;color:#66727a;line-height:1.5}
.mong-mega a.feat{background:#0c1720;color:#fff}
.mong-mega a.feat .n,.mong-mega a.feat span{color:#9eabb2}
.mong-mega a.feat:hover{border-color:#cfff4a}

.mong-menu-btn{
  display:none;width:42px;height:42px;border:1px solid #d9ded9;background:#fff;
  align-items:center;justify-content:center;cursor:pointer;
}
.mong-menu-btn i{display:block;width:18px;height:2px;background:#0c1720;position:relative}
.mong-menu-btn i:before,.mong-menu-btn i:after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:#0c1720
}
.mong-menu-btn i:before{top:-6px}.mong-menu-btn i:after{top:6px}

.mong-mobile{
  display:none;background:#fff;border-top:1px solid #d9ded9;
  font-family:Pretendard,"Noto Sans KR",sans-serif;
  max-height:min(72vh,560px);overflow-y:auto;-webkit-overflow-scrolling:touch
}
.mong-mobile.is-open{display:block}
body.mong-nav-open{overflow:hidden}
.mong-mobile a,.mong-mobile button{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:14px 0;border:0;border-bottom:1px solid #e6ebe6;
  background:none;font:inherit;font-weight:700;font-size:15px;color:#0c1720;
  text-decoration:none;text-align:left;cursor:pointer;
}
.mong-mobile .panel{display:none;padding:4px 0 12px}
.mong-mobile .panel.is-open{display:block}
.mong-mobile .panel a{
  padding:10px 0 10px 12px;font-size:14px;font-weight:600;color:#66727a;border:0
}

.filter span,.filter-btn,[data-filter]{
  cursor:pointer;user-select:none
}
.filter span.is-active,.filter .on,[data-filter].is-active{
  background:#0c1720 !important;color:#fff !important;border-color:#0c1720 !important
}
[data-work-item].is-hidden{display:none !important}

.tabs .tab,.tabs button,[role="tab"]{cursor:pointer}
[data-panel]{display:none}
[data-panel].is-active{display:block}

@media (max-width:1100px){
  .mong-menu-btn{display:inline-flex}
  .nav > a:not(.contact),
  .nav .mong-mega-wrap,
  .nav > a.contact{display:none !important}
  .mong-mega{display:none !important}
  .mong-mega-grid{grid-template-columns:1fr 1fr}
  .header .inner{gap:12px}
  .logo{font-size:22px}
}
@media (max-width:720px){
  .mong-mega-grid{grid-template-columns:1fr}
  .header .inner{height:68px}
  .logo{font-size:20px}
  body.mong-subpage .hero,
  body.mong-subpage .page-head{padding:102px 0 38px}
  body.mong-subpage .hero h1,
  body.mong-subpage .page-head h1,
  body.mong-subpage h1.declare{font-size:clamp(32px,9vw,42px)}
  body.mong-subpage h2,
  body.mong-subpage .contact-box h2{font-size:clamp(24px,6.5vw,32px)}
}

.project-list{border-top:2px solid #0c1720;margin-top:12px}
.project-row{display:grid;grid-template-columns:90px 150px 1.6fr 1fr 1.4fr 40px;gap:20px;align-items:center;padding:24px 6px;border-bottom:1px solid #d3d9d4;color:inherit;text-decoration:none}
.project-row.list-head{font-size:11px;font-weight:900;color:#7c868b;padding-top:16px;padding-bottom:14px}
.project-row .year{font-weight:850;font-size:16px}
.project-row .type{font-size:12px;color:#647078}
.project-row .title{font-size:18px;font-weight:750;line-height:1.4}
.project-row .client,.project-row .role{font-size:13px;color:#647078}
.project-row .go{font-size:20px}
@media(max-width:720px){
  .project-row{grid-template-columns:68px 1fr 32px;gap:10px}
  .project-row .type,.project-row .client,.project-row .role{grid-column:2}
  .project-row .title{grid-column:2}
  .project-row .go{grid-column:3;grid-row:1/5}
  .project-row.list-head{display:none}
}