/* ==========================================================================
   MEGAMOST — base.css
   Shared CSS common to (nearly) all pages: root variables, reset, typography,
   cursor, loader, nav, mobile menu, footer, reveal, and shared components.
   Page-specific CSS lives in each template's inline <style> block.
   ========================================================================== */

:root{
  --black:#000;--white:#fff;--grey:#F5F5F5;--slate:#707070;
  --brand:#0071bc;--brand-d:#3a9be8;
  --line:rgba(0,0,0,.11);--line-2:rgba(0,0,0,.06);
  --line-d:rgba(255,255,255,.16);--slate-d:rgba(255,255,255,.55);
  --kr:"Pretendard",system-ui,sans-serif;--en:"Inter",sans-serif;
  --max:1920px;--gut:clamp(22px,5.2vw,90px);--rhythm:clamp(96px,15vh,210px);
}
*{margin:0;padding:0;box-sizing:border-box}
/* 루트 배경을 검정으로: 콘텐츠(body 흰색)는 그대로, 콘텐츠보다 뷰포트가 길 때
   푸터(.dark, 검정) 아래로 보이는 여백·상단 오버스크롤 영역만 검정으로 채워 이음새 없앰 */
html{scroll-behavior:smooth;background:var(--black)}
body{font-family:var(--kr);background:var(--white);color:var(--black);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:clamp(15px,.92vw,17px);word-break:keep-all}
body.fine{cursor:none}
a{color:inherit;text-decoration:none}
::selection{background:var(--black);color:var(--white)}
.dark ::selection{background:var(--white);color:var(--black)}

.wrap{width:100%;max-width:var(--max);margin-inline:auto}
.sec{padding-inline:var(--gut);position:relative}
.pad{padding-block:var(--rhythm)}
.rule{height:1px;background:var(--line)}
.dark{background:var(--black);color:var(--white)}
.dark .rule{background:var(--line-d)}

/* type */
.ey{font-family:var(--en);font-size:clamp(11px,.76vw,13px);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);display:inline-flex;align-items:center;gap:12px}
.ey::before{content:"";width:26px;height:1px;background:var(--brand);opacity:.9}
.dark .ey{color:var(--slate-d)}
.disp{font-family:var(--en);font-weight:600;letter-spacing:-.04em;line-height:.92}
h2.t{font-family:var(--en);font-weight:600;letter-spacing:-.03em;line-height:1;font-size:clamp(32px,5.2vw,80px)}
.kr-lead{font-size:clamp(16px,1.45vw,23px);line-height:1.5;letter-spacing:-.01em;color:#1a1a1a;max-width:100%;word-break:keep-all}
.dark .kr-lead{color:rgba(255,255,255,.86)}
.mut{color:var(--slate)}.dark .mut{color:var(--slate-d)}
.hl{color:var(--brand)}.dark .hl{color:var(--brand-d)}

/* notice bar (상단 공지) — 다중이면 세로 롤링, 닫기 가능. 있을 때만 body를 48px 내림 */
.notice-bar{position:fixed;top:0;left:0;right:0;z-index:210;height:48px;display:flex;align-items:center;justify-content:center;
  background:var(--brand);color:#fff;font-family:var(--kr);font-size:14px;padding:0 clamp(48px,var(--gut),90px)}
.notice-bar .notice-vp{height:48px;overflow:hidden;max-width:var(--max);width:100%}
.notice-bar .notice-track{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;will-change:transform}
.notice-bar .notice-item{height:48px;display:flex;align-items:center;justify-content:center;white-space:nowrap;padding:0 6px}
.notice-bar .notice-item>*{overflow:hidden;text-overflow:ellipsis;max-width:100%}
.notice-bar a{color:inherit;text-decoration:underline;text-underline-offset:2px;transition:opacity .2s}
.notice-bar a:hover{opacity:.85}
.notice-close{position:absolute;right:10px;top:0;height:48px;width:44px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;color:inherit;font-size:24px;line-height:1;cursor:pointer;opacity:.8;transition:opacity .2s}
.notice-close:hover{opacity:1}
body:has(.notice-bar){padding-top:48px}
body:has(.notice-bar) .nav{top:48px}

/* layer popup (암전 배경 + 고정 크기 슬라이드, 좌우 화살표) */
.popup-layer{position:fixed;inset:0;z-index:260;display:none;align-items:center;justify-content:center;padding:20px}
.popup-layer.open{display:flex}
.popup-dim{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);cursor:default}
.popup-box{position:relative;z-index:1;width:min(92vw,400px)}
.popup-slides{position:relative;aspect-ratio:4/5;background:#0a0a0a;border-radius:4px;overflow:hidden}
.popup-slide{position:absolute;inset:0;opacity:0;transform:translateX(14px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1);display:block;pointer-events:none}
.popup-slide.on{opacity:1;transform:none;pointer-events:auto}
.popup-slide img{width:100%;height:100%;object-fit:cover;display:block}
.popup-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(0,0,0,.35);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s;opacity:.9}
.popup-arrow:hover{background:rgba(0,0,0,.62);opacity:1}
.popup-arrow.prev{left:10px}
.popup-arrow.next{right:10px}
.popup-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;gap:7px;justify-content:center;z-index:2}
.popup-dot{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:background .3s,transform .3s}
.popup-dot.on{background:#fff;transform:scale(1.15)}
.popup-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:13px;padding:0 2px}
.popup-today{display:flex;align-items:center;gap:8px;font-family:var(--kr);font-size:13.5px;color:#fff;cursor:pointer;padding:6px 2px}
.popup-today input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
.popup-close{background:none;border:0;color:#fff;font-family:var(--kr);font-size:14px;font-weight:600;cursor:pointer;opacity:.9;transition:opacity .2s;padding:10px 14px;margin:-6px -8px -6px 0}
.popup-close:hover{opacity:1}

/* cursor */
.cur,.cur-d{position:fixed;top:0;left:0;z-index:460;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;will-change:transform}
.cur{width:38px;height:38px;border:1px solid #fff;margin:-19px 0 0 -19px;transition:width .3s,height .3s,margin .3s}
.cur-d{width:5px;height:5px;background:#fff;margin:-2.5px 0 0 -2.5px}
body.cur-lg .cur{width:74px;height:74px;margin:-37px 0 0 -37px}
body:not(.fine) .cur,body:not(.fine) .cur-d{display:none}
/* 모달(약관 팝업 등) 열림: difference 블렌드는 암전 중간톤에서 대비가 낮음 →
   흰색 + 어두운 외곽선(box-shadow) 고대비로 전환해 암전/흰 팝업 양쪽에서 보이게. */
body.modal-cursor .cur,body.modal-cursor .cur-d{mix-blend-mode:normal}
body.modal-cursor .cur{border-color:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.55)}
body.modal-cursor .cur-d{background:#fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.55)}

/* 콘텐츠 이미지(t_attachment) 채움: aspect 박스(썸네일/비주얼)에서 플레이스홀더 대신 렌더 */
.att-fill{display:block;width:100%;height:100%;object-fit:cover}

/* loader */
.ldr{position:fixed;inset:0;z-index:500;background:var(--black);color:var(--white);display:flex;
  flex-direction:column;justify-content:center;align-items:center;gap:clamp(24px,3.4vh,38px);
  transition:transform 1s cubic-bezier(.76,0,.24,1)}
.ldr.done{transform:translateY(-101%);pointer-events:none}
.ldr .lm{display:flex;align-items:center;gap:13px;font-family:var(--en);font-weight:700;
  font-size:clamp(18px,2vw,26px);letter-spacing:.05em}
.ldr .lm{position:relative;display:inline-block;line-height:0}
.ldr .logo-base,.ldr .logo-fill{display:block;height:clamp(40px,5vw,52px);width:auto}
.ldr .logo-fill{position:absolute;left:0;top:0;clip-path:inset(0 100% 0 0)}
.ldr .ldiv{width:min(34vw,260px);height:1px;background:rgba(255,255,255,.16);margin-top:clamp(20px,3vh,32px)}
.ldr .lp{font-family:var(--en);font-weight:500;font-size:12px;letter-spacing:.3em;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;margin-top:clamp(13px,1.8vh,18px)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:transform .5s cubic-bezier(.4,0,.2,1),background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.hide{transform:translateY(-100%)}
.nav.solid{background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--line)}
.nav-in{padding:clamp(18px,2vw,26px) var(--gut);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center}
.logo{height:clamp(26px,2.3vw,36px);width:auto;display:block}
.menu{display:flex;gap:clamp(20px,2.6vw,46px);font-family:var(--en);font-size:clamp(14px,1.05vw,16px);font-weight:500}
.menu a{color:var(--slate);position:relative}
.menu a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--brand);transition:width .3s}
.menu a:hover{color:var(--black)}.menu a:hover::after{width:100%}
.menu a.active,.menu a.is-active{color:var(--black)}
.menu a.active::after,.menu a.is-active::after{width:100%}
.ncta{font-family:var(--en);font-size:13px;font-weight:600;border:1px solid var(--black);border-radius:100px;padding:9px 19px;transition:.3s}
.ncta:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.burger{display:none;font-family:var(--en);font-size:12px;font-weight:600;background:none;border:0;cursor:pointer}

/* section head */
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:clamp(40px,6vw,72px)}
.sh h2{margin-top:18px}

/* tlink */
.tlink{font-family:var(--en);font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:9px;border-bottom:1px solid var(--black);padding-bottom:3px}
.tlink i{transition:transform .3s}.tlink:hover i{transform:translateX(6px)}

/* cta + footer (dark) */
.cta{text-align:center;padding-block:clamp(120px,20vh,250px) clamp(80px,12vh,140px)}
.cta h2{font-family:var(--en);font-weight:600;letter-spacing:-.04em;line-height:.95;font-size:clamp(48px,10vw,180px)}
.btn{display:inline-flex;align-items:center;gap:13px;font-family:var(--en);font-weight:600;font-size:15px;
  color:var(--black);background:var(--white);border-radius:100px;padding:19px 38px;margin-top:clamp(34px,5vh,56px);transition:.4s}
.btn i{transition:transform .3s}.btn:hover{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.btn:hover i{transform:translateX(6px)}
.cmeta{display:flex;gap:clamp(30px,5vw,80px);justify-content:center;flex-wrap:wrap;margin-top:clamp(44px,7vh,80px);font-family:var(--en);font-size:13px;color:rgba(255,255,255,.55)}
.cmeta b{display:block;color:#fff;font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.foot{border-top:1px solid var(--line-d);padding-block:clamp(50px,7vh,80px) 40px}
.foot-top{display:flex;justify-content:space-between;gap:50px;flex-wrap:wrap}
.foot .slogan{font-family:var(--en);font-weight:600;font-size:clamp(24px,3.4vw,52px);letter-spacing:-.03em;max-width:13ch}
.fcols{display:flex;gap:clamp(40px,6vw,100px);flex-wrap:wrap}
.fcol .fh{font-family:var(--en);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:16px}
.fcol a{display:block;font-size:14px;color:rgba(255,255,255,.78);margin-bottom:11px}
.fcol a:hover{color:var(--brand-d)}
.fcol a.fmore{color:rgba(255,255,255,.5);font-size:13px}
.fbot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(50px,8vh,90px);
  padding-top:24px;border-top:1px solid var(--line-d);font-family:var(--en);font-size:11px;color:rgba(255,255,255,.62);letter-spacing:.03em}
.fbot-l{display:flex;align-items:center;gap:8px 22px;flex-wrap:wrap}
/* 개인정보처리방침: 국내 관행대로 굵게·밝게 구분 */
.fbot .fpriv{font-family:var(--kr);font-size:12px;font-weight:700;letter-spacing:0;color:rgba(255,255,255,.86);transition:color .3s}
.fbot .fpriv:hover{color:var(--brand-d)}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,.84,.3,1),transform 1s cubic-bezier(.16,.84,.3,1)}
.rv.in{opacity:1;transform:none}
/* 첫 화면(페이지 머리·상세 머리) 요소는 등장 효과 없이 바로 그린다 — 로딩 화면 뒤라 보기엔 같고, 가장 큰 요소(LCP)가 효과를 기다리지 않는다 */
.subhero .rv,.detail-hero .rv,.article > .rv:nth-child(-n+4){opacity:1;transform:none;transition:none}
[data-d="1"]{transition-delay:.1s}[data-d="2"]{transition-delay:.2s}[data-d="3"]{transition-delay:.3s}

/* sub hero (inner pages) */
.subhero{padding-top:clamp(132px,16vh,205px);padding-bottom:clamp(56px,8vh,104px)}
.crumb{font-family:var(--en);font-size:12px;letter-spacing:.04em;color:var(--slate);display:flex;gap:10px;align-items:center}
.crumb a{color:var(--slate);transition:color .3s}.crumb a:hover{color:var(--black)}.crumb .sep{opacity:.45}
.subhero .ey{margin-top:clamp(26px,4vh,46px)}
.subh{font-family:var(--en);font-weight:600;letter-spacing:-.03em;line-height:1.04;font-size:clamp(40px,6vw,96px);margin-top:clamp(14px,2vh,22px)}

/* capability hover float (out-of-flow decorative canvas) */
.cap-float{position:fixed;width:260px;height:170px;z-index:50;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.92);transition:opacity .35s,transform .35s;
  border-radius:3px;overflow:hidden;background:var(--grey);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.cap-float.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cap-float canvas{width:100%;height:100%}

@media(max-width:980px){
  .menu,.ncta{display:none}.burger{display:block}
  .cap-float{display:none}
}
@media(prefers-reduced-motion:reduce){}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.dark :focus-visible{outline-color:#fff}

/* mobile nav */
.mnav{position:fixed;inset:0;z-index:300;background:#fff;display:flex;flex-direction:column;padding:0 var(--gut) calc(34px + env(safe-area-inset-bottom));transform:translateY(-100%);transition:transform .46s cubic-bezier(.7,0,.2,1);overflow-y:auto;visibility:hidden}
.mnav.open{transform:translateY(0);visibility:visible}
.mnav-head{display:flex;align-items:center;justify-content:space-between;padding:clamp(18px,2vw,26px) 0;flex:none}
.mnav-logo{width:138px;height:auto;display:block;flex:none}
.mnav-close{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.04em;background:none;border:0;cursor:pointer;color:var(--black);padding:6px}
.mnav-links{display:flex;flex-direction:column;margin-top:clamp(14px,3vh,40px)}
.mnav-links a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:clamp(15px,2.3vh,20px) 0;border-bottom:1px solid var(--line);color:var(--black)}
.mnav-links a span{font-family:var(--kr);font-size:clamp(26px,7.5vw,38px);font-weight:600;letter-spacing:-.02em}
.mnav-links a i{font-family:var(--en);font-style:normal;font-size:12px;font-weight:500;color:var(--slate)}
.mnav-links a:active span{color:var(--brand)}
.mnav-cta{margin-top:clamp(26px,4vh,42px);background:var(--black);color:#fff;text-align:center;padding:17px;border-radius:100px;font-family:var(--kr);font-size:16px;font-weight:600}
.mnav-cta:active{background:var(--brand)}
@media(min-width:981px){.mnav{display:none}}

/* 포트폴리오 표지(fragments/work.html) — 이미지 없을 때 글자 표지. 칸 폭 기준(cqw)으로 글자 크기가 따라간다 */
.wcov{position:relative;width:100%;height:100%;container-type:inline-size}
.wcov-t{position:absolute;inset:0;display:block;background:#F5F5F5 radial-gradient(rgba(0,0,0,.09) 1.2px,transparent 1.4px) 0 0/22px 22px}
.wcov-cat{position:absolute;left:7cqw;top:7cqw;font-size:clamp(12px,3.4cqw,16px);font-weight:600;color:#141414;letter-spacing:-.01em}
.wcov-ic{position:absolute;right:7cqw;top:6cqw;width:clamp(36px,13cqw,84px)}
.wcov-ic svg{display:block;width:100%;height:auto;fill:none;stroke:#141414;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wcov-ic svg .b{fill:var(--brand);stroke:none}
.wcov-ym{position:absolute;left:6cqw;bottom:5cqw;display:flex;align-items:baseline;gap:.15em;font-family:var(--en);font-weight:600;color:#141414}
.wcov-ym b{font-size:clamp(40px,21cqw,132px);letter-spacing:-.045em;line-height:.88}
.wcov-ym i{font-style:normal;font-size:clamp(16px,7.5cqw,46px);color:var(--brand);letter-spacing:-.02em}
.pl{white-space:pre-line}   /* #sent.br — 문장마다 줄바꿈(MEGAMOST 강제 규칙) */
/* 인사이트 표지(fragments/insight.html) — 업계 소식 회차 표지 */
.icov-daily{background-color:#0d1b2a;background-image:radial-gradient(rgba(255,255,255,.10) 1.2px,transparent 1.4px)}
.icov-daily .wcov-cat,.icov-daily .wcov-ym{color:#fff}
.icov-daily .wcov-ic svg{stroke:#fff}
.icov-daily .wcov-ym i{color:#5aa9ff;margin-right:.08em}
.icov-date{position:absolute;right:7cqw;bottom:6cqw;font-family:var(--en);font-size:clamp(11px,3.2cqw,15px);font-weight:600;color:rgba(255,255,255,.8);letter-spacing:.02em}
/* AI 작성 배지 */
.ai-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;background:#eef5fc;color:var(--brand);font-size:11.5px;font-weight:600;letter-spacing:0;white-space:nowrap}

/* 대표 사례 묶음(홈·포트폴리오 공용) — fragments/work :: cases */
.cases{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(40px,4vw,64px) clamp(20px,2.2vw,36px)}
.case{display:block;cursor:pointer;color:inherit;grid-column:span 2}
.cases.c2 .case{grid-column:span 3}
.cases.r1 .case:last-child{grid-column:1/-1}
.cases.r2 .case:nth-last-child(-n+2){grid-column:span 3}
.case.lg{grid-column:1/-1}
.case-img{aspect-ratio:16/10;background:var(--grey);border:1px solid var(--line);overflow:hidden;margin-bottom:clamp(16px,1.6vw,22px);transition:border-color .35s}
.case.lg .case-img{aspect-ratio:21/9}
.case:hover .case-img{border-color:#c9c9c9}
.case-tag{font-size:13px;font-weight:500;color:var(--brand);margin-bottom:9px}
.case h3{font-size:clamp(19px,1.7vw,25px);font-weight:600;letter-spacing:-.02em;transition:color .3s}
.case.lg h3{font-size:clamp(24px,2.6vw,38px)}
.case:hover h3{color:var(--brand)}
.case-cl{margin-top:8px;font-size:15px;color:var(--slate)}
.case-ds{margin-top:12px;font-size:15px;line-height:1.7;color:var(--slate);max-width:62ch}
@media(max-width:760px){
  .cases{grid-template-columns:1fr;gap:40px}
  .cases .case,.cases.c2 .case,.cases.r2 .case:nth-last-child(-n+2){grid-column:1/-1}
  .case.lg .case-img{aspect-ratio:16/10}
}