/* ==========================================================================
   지에이(GA)건설㈜ - style.css
   design.md 기준 / 모바일 우선 (md 768, lg 1024, xl 1280)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --c-charcoal-900:#1F1C1D; --c-charcoal-700:#3D3839; --c-charcoal-600:#5F595B;
  --c-gray-500:#6B6567; --c-gray-300:#CFCACB; --c-gray-200:#E6E2E3; --c-gray-100:#F5F3F2;
  --c-white:#fff;
  --c-orange-brand:#D9531E; --c-orange-600:#C2410C; --c-orange-700:#A9360A;
  --c-orange-400:#F07A4A; --c-orange-50:#FFF1EA;
  --c-error:#B42318; --c-success:#1B7A43; --c-info:#1D5FA8;
  --c-foot-text:#B8B2B4; --c-foot-mute:#8F898B;

  --font:"Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --font-display:"SUIT Variable", var(--font);           /* 제목: 날렵한 고딕 */
  --font-en:"Montserrat", "SUIT Variable", var(--font);  /* 영문·숫자 포인트 */

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  --r-sm:2px; --r-md:4px; --r-lg:8px; --r-full:999px;
  --sh-1:0 1px 2px rgba(31,28,29,.06), 0 2px 8px rgba(31,28,29,.06);
  --sh-2:0 8px 24px rgba(31,28,29,.12);
  --sh-3:0 20px 48px rgba(31,28,29,.24);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --t-fast:150ms; --t-base:250ms; --t-slow:600ms; --t-reveal:800ms;

  --container:1280px;
  --pad-x:20px;
  --sec-y:64px;
  --hh:64px;          /* header height (current) */
  --hh-solid:64px;
  --tabs-h:64px;

  --fs-display:clamp(34px, 9.5vw, 72px);
  --fs-h1:clamp(30px, 4.4vw, 56px);
  --fs-h2:clamp(26px, 3.2vw, 40px);
  --fs-h3:clamp(22px, 2.3vw, 28px);
  --fs-h4:clamp(18px, 1.6vw, 20px);
  --fs-lead:clamp(17px, 1.6vw, 20px);
  --fs-counter:clamp(44px, 6vw, 80px);
}
@media (min-width:768px){
  :root{ --pad-x:32px; --sec-y:96px; --hh:72px; --hh-solid:72px; }
}
@media (min-width:1024px){
  :root{ --pad-x:40px; --sec-y:128px; --hh:88px; --hh-solid:72px; }
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font); font-size:16px; line-height:1.7;
  color:var(--c-charcoal-700); background:var(--c-white);
  word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,dl,dd,figure,blockquote{ margin:0; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
[hidden]{ display:none !important; }
address{ font-style:normal; }

:focus{ outline:none; }
:focus-visible{ outline:3px solid var(--c-info); outline-offset:2px; }
.on-dark :focus-visible, .hero :focus-visible, .subvisual :focus-visible,
.site-footer :focus-visible, .modal__panel .modal__stage :focus-visible, .cta-band :focus-visible,
.site-header:not(.is-solid) :focus-visible{ outline-color:#fff; }

.skip{
  position:absolute; left:16px; top:-100px; z-index:400; padding:12px 20px;
  background:var(--c-charcoal-900); color:#fff; border-radius:var(--r-sm); font-weight:600;
}
.skip:focus{ top:16px; }
.sr-only{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nowrap{ white-space:nowrap; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad-x); }

.section{ padding:var(--sec-y) 0; }
.section--gray{ background:var(--c-gray-100); }
.section--dark{ background:var(--c-charcoal-900); color:#fff; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- 3. Typography helpers ---------- */
.eyebrow{
  font-size:12px; font-weight:600; line-height:1.4; letter-spacing:.14em; text-transform:uppercase;
  color:var(--c-orange-600);
}
@media (min-width:768px){ .eyebrow{ font-size:13px; } }
.on-dark .eyebrow, .eyebrow--light{ color:var(--c-orange-400); }

.h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.h2{ font-size:var(--fs-h2); font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--c-charcoal-700); }
.h3{ font-size:var(--fs-h3); font-weight:700; line-height:1.4; letter-spacing:-.01em; }
.h4{ font-size:var(--fs-h4); font-weight:600; line-height:1.5; }
.lead{ font-size:var(--fs-lead); line-height:1.75; color:var(--c-charcoal-600); max-width:680px; }
.on-dark .h2{ color:#fff; }
.on-dark .lead{ color:var(--c-foot-text); }
.small{ font-size:14px; line-height:1.6; }
.muted{ color:var(--c-charcoal-600); }
.prose p + p{ margin-top:1em; }
.prose{ max-width:680px; color:var(--c-charcoal-600); font-size:17px; line-height:1.85; }

/* Signature bar */
.bar{ display:block; width:48px; height:4px; background:var(--c-orange-brand); margin-bottom:var(--s-4); }
.sec-head{ margin-bottom:var(--s-7); }
.sec-head .eyebrow{ display:block; margin-bottom:var(--s-2); }
.sec-head .h2{ margin-bottom:var(--s-4); }
.sec-head--center{ text-align:center; }
.sec-head--center .bar{ margin-left:auto; margin-right:auto; }
.sec-head--center .lead{ margin-left:auto; margin-right:auto; }
@media (min-width:768px){ .sec-head{ margin-bottom:var(--s-8); } }

/* ---------- 4. Buttons / links ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 32px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:16px; font-weight:600; line-height:1; cursor:pointer;
  transition:background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.btn .arr{ display:inline-block; transition:transform var(--t-fast) ease; }
.btn:hover .arr{ transform:translateX(4px); }
.btn--sm{ min-height:44px; padding:0 20px; font-size:14px; }
.btn--primary{ background:var(--c-orange-600); color:#fff; }
.btn--primary:hover{ background:var(--c-orange-700); }
.btn--primary:active{ background:#8F2D08; }
.btn--dark{ background:var(--c-charcoal-700); color:#fff; }
.btn--dark:hover{ background:var(--c-charcoal-900); }
.btn--dark:active{ background:#141112; }
.btn--outline{ border-color:var(--c-charcoal-700); color:var(--c-charcoal-700); }
.btn--outline:hover{ background:var(--c-charcoal-700); color:#fff; }
.btn--outline:active{ background:var(--c-charcoal-900); color:#fff; }
.btn--outline-light{ border-color:#fff; color:#fff; }
.btn--outline-light:hover{ background:#fff; color:var(--c-charcoal-900); }
.btn--outline-light:active{ background:var(--c-gray-200); color:var(--c-charcoal-900); }
.btn[disabled], .btn[aria-disabled="true"]{
  background:var(--c-gray-200); color:var(--c-gray-500); border-color:transparent; cursor:not-allowed;
}
.btn-row{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:600px){ .btn-row{ flex-direction:row; flex-wrap:wrap; } }

.link-more{
  display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--c-orange-600);
  min-height:44px;
}
.link-more .arr{ transition:transform var(--t-fast) ease; }
.link-more:hover{ text-decoration:underline; text-underline-offset:4px; }
.link-more:hover .arr{ transform:translateX(4px); }
.link-more:active{ color:var(--c-orange-700); }
.on-dark .link-more{ color:var(--c-orange-400); }
.prose a, .link-inline{ color:var(--c-orange-600); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--c-orange-700); }

/* ---------- 5. Header ---------- */
.site-header{
  position:fixed; top:0; left:0; width:100%; z-index:100; height:var(--hh);
  background:transparent; border-bottom:1px solid rgba(255,255,255,.2); color:#fff;
  transition:background-color .3s ease, box-shadow .3s ease, height .3s ease, color .3s ease, border-color .3s ease;
}
.site-header.is-solid{
  height:var(--hh-solid); background:#fff; color:var(--c-charcoal-700);
  box-shadow:var(--sh-1); border-bottom-color:transparent;
}
.site-header__in{
  position:relative; height:100%; display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:0 var(--pad-x);
}
.logo{ position:relative; display:block; height:40px; width:112px; flex:none; }
.logo__wm, .logo__img{ position:absolute; left:0; top:50%; transition:opacity 200ms ease; }
.logo__wm{
  display:inline-flex; align-items:center; transform:translateY(-50%); white-space:nowrap;
  font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1; color:#fff;
}
.logo__wm b{ font-weight:800; }
.logo__wm i{ display:inline-block; width:2px; height:18px; background:var(--c-orange-400); margin:0 7px; }
.logo__img{
  width:58px; height:40px; transform:translateY(-50%); opacity:0;
}
.logo__img img{ width:100%; height:100%; object-fit:contain; }
.site-header.is-solid .logo__wm{ opacity:0; }
.site-header.is-solid .logo__img{ opacity:1; }
@media (min-width:1024px){ .logo__wm{ font-size:28px; } }

.gnb{ display:none; }
.header-cta, .header-login{ display:none; }
.burger{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:44px; height:44px; margin-right:-10px;
}
.burger span{ display:block; width:24px; height:2px; background:currentColor; }

@media (min-width:1024px){
  .burger{ display:none; }
  .gnb{ display:flex; align-items:stretch; height:100%; margin-left:auto; gap:48px; }
  .gnb__link{
    position:relative; display:flex; align-items:center; height:100%; font-size:17px; font-weight:600; line-height:1;
  }
  .gnb__link::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--c-orange-brand);
    transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out);
  }
  .gnb__link:hover::after, .gnb__link:focus-visible::after, .gnb__link.is-hover::after,
  .gnb__link[aria-current="page"]::after{ transform:scaleX(1); }
  .header-cta{ display:inline-flex; margin-left:16px; }
  .header-login{ display:inline-flex; align-items:center; gap:6px; margin-left:32px; min-height:40px; font-size:14px; font-weight:600; color:var(--c-charcoal-700); }
  .header-login:hover{ color:var(--c-orange-600); }
  .site-header:not(.is-solid) .header-login{ color:#fff; }
  .site-header:not(.is-solid) .header-cta{ border-color:#fff; color:#fff; }
  .site-header:not(.is-solid) .header-cta:hover{ background:#fff; color:var(--c-charcoal-900); }
}

/* Mega menu */
.mega{
  position:absolute; top:100%; left:0; width:100%; background:#fff; color:var(--c-charcoal-700);
  border-top:1px solid var(--c-gray-200); box-shadow:var(--sh-2); z-index:90;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-8px);
  transition:opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}
.mega.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity 200ms ease, transform 200ms ease, visibility 0s;
}
.mega__in{
  max-width:var(--container); margin:0 auto; padding:40px var(--pad-x); min-height:0; align-items:center;
  display:grid; grid-template-columns:320px 1fr; gap:48px;
}
.mega__intro .bar{ margin-bottom:20px; }
.mega__intro h3{ font-size:28px; font-weight:700; letter-spacing:-.01em; line-height:1.3; margin-bottom:12px; }
.mega__intro p{ color:var(--c-charcoal-600); font-size:16px; }
/* 마우스를 올린 대메뉴의 하위 항목만 크게 보여 준다 */
.mega__col{ display:none; }
.mega__col.is-active{ display:block; animation:fadeUp .3s var(--ease-out); }
.mega__col h4{ display:none; }
.mega__col ul{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 56px; padding-top:8px; }
.mega__col a{
  position:relative; display:inline-flex; align-items:center; gap:10px; padding:6px 0;
  font-family:var(--font-display); font-size:24px; font-weight:600; letter-spacing:-.02em; color:var(--c-charcoal-900);
  transition:color var(--t-fast) ease;
}
.mega__col a::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--c-orange-600);
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out);
}
.mega__col a::after{ content:"→"; font-size:18px; color:var(--c-orange-600); opacity:0; transform:translateX(-6px); transition:opacity var(--t-fast) ease, transform var(--t-fast) ease; }
.mega__col a:hover, .mega__col a:focus-visible{ color:var(--c-orange-600); }
.mega__col a:hover::before, .mega__col a:focus-visible::before{ transform:scaleX(1); }
.mega__col a:hover::after, .mega__col a:focus-visible::after{ opacity:1; transform:none; }
.mega-dim{
  position:fixed; inset:0; z-index:80; background:rgba(31,28,29,.4); opacity:0; visibility:hidden;
  transition:opacity 200ms ease, visibility 0s linear 200ms;
}
.mega-dim.is-open{ opacity:1; visibility:visible; transition:opacity 200ms ease, visibility 0s; }
@media (max-width:1023px){ .mega, .mega-dim{ display:none; } }

/* Drawer */
.drawer{
  position:fixed; inset:0; z-index:200; background:#fff; display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden; transition:transform 300ms var(--ease-out), visibility 0s linear 300ms;
}
.drawer.is-open{ transform:none; visibility:visible; transition:transform 300ms var(--ease-out), visibility 0s; }
.drawer__top{ display:flex; align-items:center; justify-content:space-between; height:var(--hh-solid); padding:0 var(--pad-x); border-bottom:1px solid var(--c-gray-200); flex:none; }
.drawer__top .logo__wm{ display:none; }
.drawer__top .logo__img{ opacity:1; }
.drawer__close{ width:44px; height:44px; margin-right:-10px; display:inline-flex; align-items:center; justify-content:center; }
.drawer__body{ flex:1; overflow-y:auto; padding:8px var(--pad-x) 24px; }
.acc__btn{
  display:flex; align-items:center; justify-content:space-between; width:100%; min-height:56px;
  font-size:18px; font-weight:600; text-align:left; border-bottom:1px solid var(--c-gray-200);
}
.acc__btn .pm{ position:relative; width:16px; height:16px; flex:none; }
.acc__btn .pm::before, .acc__btn .pm::after{ content:""; position:absolute; left:0; top:7px; width:16px; height:2px; background:currentColor; transition:transform var(--t-base) ease; }
.acc__btn .pm::after{ transform:rotate(90deg); }
.acc__btn[aria-expanded="true"] .pm::after{ transform:rotate(0); }
.acc__panel{ background:var(--c-gray-100); }
.acc__panel a{ display:flex; align-items:center; min-height:48px; padding-left:16px; font-size:16px; }
.acc__panel a:hover{ color:var(--c-orange-600); }
.drawer__foot{ padding:16px var(--pad-x) calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--c-gray-200); flex:none; }
.drawer__foot .btn{ width:100%; }
@media (min-width:1024px){ .drawer{ display:none; } }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; height:100vh; height:100svh; min-height:640px; max-height:1080px;
  background:var(--c-charcoal-900); color:#fff; overflow:hidden;
}
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 900ms ease, visibility 0s linear 900ms; }
.slide.is-active{ opacity:1; visibility:visible; transition:opacity 900ms ease, visibility 0s; z-index:1; }
.slide__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.slide.is-active .slide__img{ animation:kenburns 7s ease-out forwards; }
.slide::after{
  content:""; position:absolute; inset:0;
  /* 글자가 있는 왼쪽·위·아래만 살짝 어둡게, 나머지는 사진 그대로 밝게 */
  background:
    linear-gradient(90deg, rgba(31,28,29,.5) 0%, rgba(31,28,29,.18) 45%, rgba(31,28,29,0) 70%),
    linear-gradient(180deg, rgba(31,28,29,.35) 0%, rgba(31,28,29,0) 22%, rgba(31,28,29,0) 75%, rgba(31,28,29,.4) 100%);
}
.slide__title, .slide__desc, .slide__en, .slide .eyebrow{ text-shadow:0 2px 16px rgba(0,0,0,.35); }
.slide__in{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding-top:calc(var(--hh) + 24px); padding-bottom:140px;
}
@media (min-width:1024px){ .slide__in{ padding-top:120px; padding-bottom:160px; } }
.slide .eyebrow{ color:var(--c-orange-400); font-size:12px; margin-bottom:16px; }
.slide__title{ font-size:var(--fs-display); font-weight:800; line-height:1.15; letter-spacing:-.03em; margin-bottom:16px; }
.slide__en{ font-size:13px; font-weight:500; line-height:1.4; letter-spacing:.18em; text-transform:uppercase; margin-bottom:20px; color:rgba(255,255,255,.92); }
.slide__desc{ max-width:560px; font-size:16px; line-height:1.7; color:rgba(255,255,255,.9); margin-bottom:32px; }
@media (min-width:768px){ .slide__en{ font-size:20px; } .slide__desc{ font-size:18px; } .slide .eyebrow{ font-size:13px; } }
.slide .btn-row{ flex-direction:column; max-width:360px; }
@media (min-width:600px){ .slide .btn-row{ flex-direction:row; max-width:none; } }
.slide .btn-row .btn{ width:100%; }
@media (min-width:600px){ .slide .btn-row .btn{ width:auto; } }
.slide .anim{ opacity:0; }
.slide.is-active .anim{ animation:fadeUp .8s var(--ease-out) forwards; animation-delay:calc(var(--d,0) * 120ms + 200ms); }

.hero__ctrl{
  position:absolute; z-index:5; left:0; right:0; bottom:24px;
}
.hero__ctrl .container{ display:flex; align-items:center; gap:16px; }
.hero__count{ font-size:14px; font-weight:600; letter-spacing:.06em; font-variant-numeric:tabular-nums; min-width:56px; }
.hero__bar{ position:relative; width:120px; height:2px; background:rgba(255,255,255,.3); overflow:hidden; }
.hero__bar i{ position:absolute; inset:0; background:#fff; transform-origin:left; transform:scaleX(0); }
.hero__pause{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.5); border-radius:var(--r-sm);
}
.hero__pause:hover{ background:rgba(255,255,255,.15); }
.hero__pause .i-play{ display:none; }
.hero.is-paused-user .hero__pause .i-play{ display:block; }
.hero.is-paused-user .hero__pause .i-pause{ display:none; }
.hero__arrow{
  display:none; position:absolute; z-index:5; top:50%; margin-top:-28px; width:56px; height:56px;
  align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.6); background:transparent; color:#fff;
  transition:background-color var(--t-fast) ease;
}
.hero__arrow:hover{ background:var(--c-orange-600); border-color:var(--c-orange-600); }
.hero__arrow--prev{ left:24px; } .hero__arrow--next{ right:24px; }
.hero__scroll{ display:none; }
@media (min-width:1024px){
  .hero__arrow{ display:inline-flex; }
  .hero__ctrl{ bottom:40px; }
  .hero__scroll{
    display:flex; flex-direction:column; align-items:center; gap:12px; position:absolute; right:40px; bottom:40px; z-index:5;
    font-size:11px; letter-spacing:.2em; writing-mode:vertical-rl;
  }
  .hero__scroll i{ display:block; width:1px; height:56px; background:rgba(255,255,255,.3); position:relative; overflow:hidden; }
  .hero__scroll i::after{ content:""; position:absolute; left:0; top:0; width:1px; height:24px; background:#fff; animation:scrollLine 2s ease-in-out infinite; }
}
.hero.is-paused .slide.is-active .slide__img{ animation-play-state:paused; }

@keyframes kenburns{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes scrollLine{ 0%{ transform:translateY(-24px); } 100%{ transform:translateY(56px); } }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ---------- 7. Home sections ---------- */
/* Quick menu: 메인 슬라이드 아래 바로가기 (본사 요청). 데스크톱 한 줄 8칸, 모바일 2열 */
.quick{ background:#fff; border-bottom:1px solid var(--c-gray-200); }
.quick__grid a{
  display:flex; align-items:center; gap:16px; padding:16px var(--pad-x);
  border-top:1px solid var(--c-gray-200); transition:background-color .2s, color .2s;
}
.quick__grid li:first-child a{ border-top:0; }
.quick__grid a::after{ content:"→"; margin-left:auto; color:var(--c-orange-600); transition:transform .2s; }
.quick__grid a:hover{ background:var(--c-orange-50); }
.quick__grid a:hover::after{ transform:translateX(4px); }
.quick__grid svg{ flex:none; width:32px; height:32px; fill:none; stroke:var(--c-orange-600); stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; }
.quick__t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.quick__grid b{ font-size:17px; font-weight:700; color:var(--c-charcoal-900); }
.quick__grid small{ font-size:13px; line-height:1.4; color:var(--c-charcoal-600); }
@media (max-width:1023px){
  .quick__grid{ display:grid; grid-template-columns:1fr 1fr; }
  .quick__grid a{ gap:10px; padding:14px 16px; border-top:1px solid var(--c-gray-200); }
  .quick__grid li:nth-child(-n+2) a{ border-top:0; }
  .quick__grid li:nth-child(odd) a{ border-right:1px solid var(--c-gray-200); }
  .quick__grid a::after, .quick__grid small{ display:none; }
  .quick__grid svg{ width:26px; height:26px; }
  .quick__grid b{ font-size:15px; }
}
@media (min-width:1024px){
  /* 위·양옆 여백: 사진을 흰 바탕 위 카드처럼 띄운다 (헤더는 홈에서도 흰색 고정) */
  .topband{ position:relative; margin:calc(var(--hh-solid) + 20px) clamp(20px, 3vw, 48px) 0; border-radius:12px; overflow:hidden; }
  .topband .hero{ height:calc((100svh - var(--hh-solid) - 40px) * .75); min-height:460px; }
  .topband .slide__in{ padding-top:32px; padding-bottom:96px; }
  .topband .hero__ctrl{ bottom:28px; }
  .topband .hero__scroll{ display:none; }
  .topband .hero .container{ max-width:none; padding-left:96px; padding-right:96px; }
  /* 바로가기: 사진 아래 한 줄 8칸, 박스 없이 세로 구분선만 */
  .quick{ margin:0 clamp(20px, 3vw, 48px); border:0; border-bottom:1px solid var(--c-gray-200); }
  .quick__grid{ display:grid; grid-template-columns:repeat(8, 1fr); }
  .quick__grid a{
    position:relative; flex-direction:column; justify-content:center; gap:10px; height:100%;
    padding:28px 8px; text-align:center; border-top:0;
  }
  .quick__grid li + li a::before{ content:""; position:absolute; left:0; top:28px; bottom:28px; width:1px; background:var(--c-gray-200); }
  .quick__grid a::after{ display:none; }
  .quick__grid a:hover{ background:transparent; }
  .quick__grid a:hover b{ color:var(--c-orange-600); }
  .quick__grid svg{ width:36px; height:36px; transition:transform .2s; }
  .quick__grid a:hover svg{ transform:translateY(-3px); }
  .quick__t{ align-items:center; }
  .quick__grid b{ font-size:17px; transition:color .2s; }
  .quick__grid small{ font-size:13px; }
}
@media (min-width:1024px) and (max-width:1279px){
  .quick__grid small{ display:none; }
  .quick__grid b{ font-size:15px; }
}
/* About summary */
.about-sum{ display:grid; gap:40px; align-items:center; }
.about-sum__photo{ position:relative; }
.about-sum__photo img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-md); }
.about-sum__since{ display:none; }
.about-sum__text .h2{ margin-bottom:24px; }
.about-sum__text .prose{ margin-bottom:24px; }
@media (min-width:1024px){
  .about-sum{ grid-template-columns:5fr 6fr; gap:0 8.333%; }
  .about-sum__photo img{ aspect-ratio:4/5; }
  .about-sum__since{
    display:block; position:absolute; right:-40px; bottom:-40px; padding:24px 32px; background:var(--c-gray-100);
    font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--c-charcoal-600);
  }
  .about-sum__since b{ display:block; font-size:32px; letter-spacing:-.02em; color:var(--c-charcoal-700); font-weight:800; text-transform:none; }
}

/* Counters */
.counters{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.counter{ padding:32px 16px; text-align:left; border-top:1px solid rgba(255,255,255,.15); }
.counter:nth-child(odd){ padding-left:0; }
.counter:nth-child(even){ border-left:1px solid rgba(255,255,255,.15); padding-left:24px; }
.counter:nth-child(-n+2){ border-top:0; }
.counter__v{ display:flex; align-items:baseline; gap:4px; font-size:var(--fs-counter); font-weight:800; line-height:1; letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; }
.counter__u{ font-size:clamp(18px,2vw,24px); font-weight:700; color:var(--c-orange-400); letter-spacing:0; }
.counter__l{ margin-top:12px; font-size:15px; line-height:1.5; color:var(--c-foot-text); }
.counters-note{ margin-top:32px; font-size:13px; color:var(--c-foot-mute); }
@media (min-width:1024px){
  .counters{ grid-template-columns:repeat(4,1fr); }
  .counter{ border-top:0; padding:16px 32px; }
  .counter:nth-child(odd){ padding-left:32px; }
  .counter:first-child{ padding-left:0; }
  .counter:nth-child(n+2){ border-left:1px solid rgba(255,255,255,.15); }
  .counter__l{ font-size:16px; }
}

/* Business cards */
.biz-grid{ display:grid; gap:16px; }
@media (min-width:768px){ .biz-grid{ grid-template-columns:1fr 1fr; gap:24px; } }
@media (min-width:1024px){ .biz-grid{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.biz-card{
  position:relative; display:block; overflow:hidden; aspect-ratio:16/10; color:#fff; background:var(--c-charcoal-700); border-radius:var(--r-md);
}
@media (min-width:1024px){ .biz-card{ aspect-ratio:3/4; max-height:460px; } }
.biz-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease-out); }
.biz-card::after{
  content:""; position:absolute; inset:0; transition:opacity var(--t-slow) ease;
  background:linear-gradient(180deg, rgba(31,28,29,.1) 40%, rgba(31,28,29,.8));
}
.biz-card__body{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:24px; }
.biz-card__no{ display:block; font-size:14px; font-weight:600; color:var(--c-orange-400); margin-bottom:4px; }
.biz-card__t{ font-size:22px; font-weight:700; line-height:1.4; transition:transform var(--t-base) var(--ease-out); }
.biz-card__d{ margin-top:8px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.92); }
.biz-card__go{ display:inline-block; margin-top:12px; font-size:14px; font-weight:600; }
@media (min-width:1024px){
  .biz-card__d, .biz-card__go{ opacity:0; max-height:0; overflow:hidden; margin-top:0; transition:opacity var(--t-base) ease, max-height var(--t-base) ease, margin var(--t-base) ease; }
  .biz-card:hover img, .biz-card:focus-visible img{ transform:scale(1.06); }
  .biz-card:hover .biz-card__d, .biz-card:focus-visible .biz-card__d{ opacity:1; max-height:90px; margin-top:8px; }
  .biz-card:hover .biz-card__go, .biz-card:focus-visible .biz-card__go{ opacity:1; max-height:30px; margin-top:12px; }
  .biz-card:hover .biz-card__t, .biz-card:focus-visible .biz-card__t{ transform:translateY(-4px); }
}

/* Showcase */
.show-head{ display:flex; flex-direction:column; gap:8px; margin-bottom:var(--s-7); }
.show-head .sec-head{ margin-bottom:0; }
@media (min-width:768px){ .show-head{ flex-direction:row; justify-content:space-between; align-items:flex-end; } }
.showcase{
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--pad-x) * -1); padding:0 var(--pad-x) 16px;
  scrollbar-width:thin;
}
.showcase > *{ flex:0 0 82vw; max-width:420px; scroll-snap-align:start; }
.sc-card{ position:relative; display:block; overflow:hidden; min-height:300px; aspect-ratio:4/3; color:#fff; background:var(--c-charcoal-700); border-radius:var(--r-md); }
.sc-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease-out); }
.sc-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,28,29,0) 35%, rgba(31,28,29,.82)); }
.sc-card__body{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:20px 24px; }
.chip-label{
  display:inline-block; margin-bottom:8px; padding:2px 10px; font-size:12px; font-weight:600; line-height:1.6;
  background:rgba(0,0,0,.55); color:#fff; border-radius:var(--r-sm);
}
.sc-card__t{ font-size:18px; font-weight:600; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sc-card--lg .sc-card__t{ font-size:24px; }
.sc-card__m{ margin-top:4px; font-size:14px; color:rgba(255,255,255,.88); }
.sc-card__go{ display:block; margin-top:8px; font-size:14px; font-weight:600; opacity:0; transform:translateY(6px); transition:opacity var(--t-base) ease, transform var(--t-base) ease; }
.sc-card:hover img, .sc-card:focus-visible img{ transform:scale(1.05); }
.sc-card:hover .sc-card__go, .sc-card:focus-visible .sc-card__go{ opacity:1; transform:none; }
@media (hover:none){ .sc-card__go{ opacity:1; transform:none; } }
@media (min-width:1024px){
  .showcase{
    display:grid; margin:0; padding:0; overflow:visible; gap:32px;
    grid-template-columns:repeat(12,1fr); grid-template-rows:264px 264px 300px 300px;
  }
  .showcase > *{ max-width:none; flex:none; }
  .sc-card{ aspect-ratio:auto; min-height:0; }
  .showcase > :nth-child(1){ grid-column:1 / span 7; grid-row:1 / span 2; }
  .showcase > :nth-child(2){ grid-column:8 / span 5; grid-row:1; }
  .showcase > :nth-child(3){ grid-column:8 / span 5; grid-row:2; }
  .showcase > :nth-child(4){ grid-column:1 / span 4; grid-row:3; }
  .showcase > :nth-child(5){ grid-column:5 / span 4; grid-row:3; }
  .showcase > :nth-child(6){ grid-column:9 / span 4; grid-row:3; }
  .showcase > :nth-child(7){ grid-column:1 / span 6; grid-row:4; }
  .showcase > :nth-child(8){ grid-column:7 / span 6; grid-row:4; }
}

/* Home history */
.hist-sum{ display:grid; gap:40px; }
@media (min-width:1024px){ .hist-sum{ grid-template-columns:4fr 8fr; gap:32px; } }
.hist-list li{ display:grid; gap:4px; padding:24px 0; border-bottom:1px solid var(--c-gray-200); }
.hist-list li:first-child{ border-top:1px solid var(--c-gray-200); }
.hist-list .y{ position:relative; padding-left:20px; font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:var(--c-charcoal-700); font-variant-numeric:tabular-nums; }
.hist-list .y::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; background:var(--c-orange-brand); border-radius:50%; }
.hist-list .t{ padding-left:20px; color:var(--c-charcoal-600); font-size:16px; }
@media (min-width:768px){
  .hist-list li{ grid-template-columns:180px 1fr; align-items:center; gap:24px; }
  .hist-list .y{ font-size:32px; }
  .hist-list .t{ padding-left:0; font-size:17px; }
}

/* CTA band */
.cta-band{ background:var(--c-charcoal-700); color:#fff; padding:var(--sec-y) 0; text-align:center; }
@media (min-width:1024px){ .cta-band{ min-height:360px; display:flex; align-items:center; padding:80px 0; } .cta-band .container{ width:100%; } }
.cta-band .h2{ color:#fff; margin-bottom:16px; }
.cta-band p{ color:rgba(255,255,255,.88); margin-bottom:32px; font-size:var(--fs-lead); }
.cta-band .btn-row{ justify-content:center; }

/* ---------- 8. Sub visual / breadcrumb / tabs ---------- */
.subvisual{ position:relative; height:240px; background:var(--c-charcoal-900); color:#fff; overflow:hidden; }
@media (min-width:768px){ .subvisual{ height:340px; } }
@media (min-width:1024px){ .subvisual{ height:400px; } }
.subvisual__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:subzoom 1.2s var(--ease-out) forwards; }
.subvisual::after{ content:""; position:absolute; inset:0; background:rgba(31,28,29,.62); }
@keyframes subzoom{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.subvisual__in{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:32px; }
@media (min-width:1024px){ .subvisual__in{ padding-bottom:56px; } }
.subvisual .eyebrow{ color:var(--c-orange-400); margin-bottom:8px; }
.subvisual h1{ font-size:var(--fs-h1); font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.subvisual__desc{ display:none; margin-top:12px; font-size:var(--fs-lead); color:rgba(255,255,255,.88); }
@media (min-width:1024px){ .subvisual__desc{ display:block; } }
.crumb{ margin-bottom:12px; font-size:14px; }
.crumb ol{ display:flex; flex-wrap:wrap; gap:0; color:rgba(255,255,255,.75); }
.crumb li + li::before{ content:">"; margin:0 8px; opacity:.7; }
.crumb [aria-current="page"]{ color:#fff; }
.crumb a{ display:inline-flex; align-items:center; min-height:44px; }
.crumb a:hover{ text-decoration:underline; }
@media (min-width:1024px){ .crumb a{ min-height:0; } }
@media (min-width:1024px){ .crumb{ position:absolute; right:var(--pad-x); bottom:56px; margin:0; } }

.subtabs{ position:sticky; top:var(--hh-solid); z-index:60; height:var(--tabs-h); background:#fff; border-bottom:1px solid var(--c-gray-200); }
.subtabs__in{ max-width:var(--container); margin:0 auto; height:100%; padding:0 var(--pad-x); }
.subtabs ul{ display:flex; height:100%; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; margin:0 calc(var(--pad-x) * -1); padding:0 var(--pad-x); }
.subtabs ul::-webkit-scrollbar{ display:none; }
.subtabs li{ flex:0 0 auto; scroll-snap-align:start; }
.subtabs a{
  position:relative; display:flex; align-items:center; height:100%; min-width:96px; justify-content:center; padding:0 20px;
  font-size:16px; font-weight:600; color:var(--c-charcoal-600); white-space:nowrap;
}
.subtabs a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:transparent; transition:background-color var(--t-fast) ease; }
.subtabs a:hover{ color:var(--c-charcoal-700); }
.subtabs a:hover::after{ background:var(--c-gray-300); }
.subtabs a[aria-current]{ color:var(--c-charcoal-700); }
.subtabs a[aria-current]::after{ background:var(--c-orange-brand); }
@media (min-width:768px){ .subtabs ul{ margin:0; padding:0; } .subtabs a{ min-width:140px; } }
.anchor{ scroll-margin-top:calc(var(--hh-solid) + var(--tabs-h)); }

/* ---------- 9. About ---------- */
.greet{ display:grid; gap:32px; }
@media (min-width:1024px){ .greet{ grid-template-columns:5fr 7fr; gap:64px; } }
.greet__quote{ font-size:var(--fs-h3); font-weight:700; line-height:1.4; letter-spacing:-.02em; color:var(--c-charcoal-700); }
@media (min-width:1024px){ .greet__quote{ font-size:32px; } }
.greet__sign{ margin-top:32px; padding-top:24px; border-top:1px solid var(--c-gray-200); color:var(--c-charcoal-600); }
.greet__sign strong{ display:block; margin-top:4px; font-size:20px; color:var(--c-charcoal-700); }

.timeline{ position:relative; padding-left:32px; max-width:860px; }
.timeline::before{ content:""; position:absolute; left:5px; top:8px; bottom:8px; width:2px; background:var(--c-gray-300); }
.timeline__fill{ position:absolute; left:5px; top:8px; width:2px; height:0; background:var(--c-orange-brand); }
.tl-item{ position:relative; padding-bottom:40px; }
.tl-item:last-child{ padding-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-32px; top:10px; width:12px; height:12px; border-radius:50%;
  background:#fff; border:2px solid var(--c-charcoal-700);
}
.tl-item:last-child::before{ background:var(--c-orange-brand); border-color:var(--c-orange-brand); }
.tl-item .y{ display:block; font-size:28px; font-weight:800; line-height:1.2; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tl-item .t{ margin-top:4px; font-size:17px; color:var(--c-charcoal-600); }
@media (min-width:768px){
  .timeline{ padding-left:200px; }
  .timeline::before, .timeline__fill{ left:164px; }
  .tl-item::before{ left:-42px; top:18px; }
  .tl-item{ padding-bottom:48px; }
  .tl-item .y{ position:absolute; left:-200px; width:140px; text-align:right; font-size:40px; }
  .tl-item .t{ font-size:18px; padding-top:10px; margin-top:0; }
}

/* Org chart */
.org{ margin:0 auto 64px; max-width:1100px; }
.org__top{ display:flex; flex-direction:column; align-items:center; position:relative; }
.org__row1{ position:relative; display:flex; justify-content:center; width:100%; }
.org-box{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:2px;
  min-height:72px; padding:12px 16px; background:#fff; border:1px solid var(--c-gray-300); border-radius:var(--r-md);
}
.org-box b{ font-size:17px; font-weight:700; color:var(--c-charcoal-700); }
.org-box span{ font-size:14px; color:var(--c-charcoal-600); line-height:1.5; }
.org-box--ceo{ background:var(--c-charcoal-700); border-color:var(--c-charcoal-700); min-width:200px; }
.org-box--ceo b{ color:#fff; font-size:19px; }
.org-box--audit{ position:absolute; left:calc(50% + 140px); top:0; min-width:120px; border-style:dashed; }
.org-box--audit::before{ content:""; position:absolute; right:100%; top:50%; width:40px; border-top:1px dashed var(--c-gray-300); }
.org__line{ width:1px; height:32px; background:var(--c-gray-300); }
.org__kids{ position:relative; display:grid; gap:12px; margin-top:0; padding-left:24px; }
.org__kids::before{ content:""; position:absolute; left:8px; top:-32px; bottom:36px; width:1px; background:var(--c-gray-300); }
.org__kids .org-box{ position:relative; align-items:flex-start; text-align:left; }
.org__kids .org-box::before{ content:""; position:absolute; right:100%; top:50%; width:16px; border-top:1px solid var(--c-gray-300); }
.org__audit-m{ display:block; }
@media (max-width:767px){
  .org-box--audit{ position:relative; left:auto; margin-top:12px; width:100%; }
  .org-box--audit::before{ display:none; }
  .org__row1{ flex-direction:column; align-items:center; }
  .org-box--ceo{ width:100%; }
  .org__top{ align-items:stretch; }
  .org__line{ margin-left:8px; }
}
@media (min-width:768px){
  .org__kids{ grid-template-columns:repeat(5,1fr); gap:16px; padding:16px 0 0; margin-top:0; }
  .org__kids::before{ left:10%; right:10%; top:0; bottom:auto; width:auto; height:1px; }
  .org__kids .org-box{ align-items:center; text-align:center; min-height:104px; }
  .org__kids .org-box::before{ right:auto; left:50%; top:-16px; width:0; height:16px; border-top:0; border-left:1px solid var(--c-gray-300); }
  .org__line{ height:16px; margin-left:0; }
}

.org-info{ display:grid; gap:48px; }
@media (min-width:1024px){ .org-info{ grid-template-columns:5fr 7fr; gap:64px; } }
.staff__total{ display:flex; align-items:baseline; gap:6px; font-size:var(--fs-counter); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--c-orange-brand); font-variant-numeric:tabular-nums; }
.staff__total small{ font-size:24px; font-weight:700; }
.staff__label{ margin:8px 0 24px; color:var(--c-charcoal-600); }
.staff__list li{ display:grid; grid-template-columns:48px 1fr 32px; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--c-gray-200); font-size:15px; }
.staff__list .bg{ height:8px; background:var(--c-gray-200); border-radius:var(--r-sm); overflow:hidden; }
.staff__list .bg i{ display:block; height:100%; background:var(--c-charcoal-700); }
.staff__list b{ text-align:right; font-variant-numeric:tabular-nums; }
.lic-list{ display:grid; gap:12px; margin-top:24px; }
@media (min-width:600px){ .lic-list{ grid-template-columns:1fr 1fr; } }
.lic-list li{ position:relative; padding:16px 20px 16px 36px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--r-md); font-weight:600; }
.lic-list li::before{ content:""; position:absolute; left:20px; top:26px; width:6px; height:6px; background:var(--c-orange-brand); }
.lic-list small{ display:block; font-weight:400; font-size:14px; color:var(--c-charcoal-600); }
.partner{ margin-top:24px; padding:24px; border:1px solid var(--c-gray-300); border-left:4px solid var(--c-orange-brand); border-radius:var(--r-md); background:#fff; }
.partner b{ display:block; font-size:18px; }
.partner span{ color:var(--c-charcoal-600); }
.sub-h{ font-size:var(--fs-h3); font-weight:700; margin-bottom:8px; }

/* Location */
.loc{ display:grid; gap:24px; }
@media (min-width:1024px){ .loc{ grid-template-columns:8fr 4fr; gap:32px; } }
.map-box{
  position:relative; height:320px; border:1px solid var(--c-gray-200); border-radius:var(--r-md); overflow:hidden; background:var(--c-gray-100);
}
@media (min-width:1024px){ .map-box{ height:440px; } }
.map-box iframe{ display:block; width:100%; height:100%; border:0; }
/* 지도 위 바로가기: 네이버·카카오 앱/웹에서 바로 열기 */
.map-box__links{ position:absolute; left:12px; top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.map-btn{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px 0 8px; border-radius:var(--r-full);
  font-size:15px; font-weight:700; box-shadow:var(--sh-2); transition:transform var(--t-fast) ease;
}
.map-btn:hover{ transform:translateY(-2px); }
.map-btn b{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; font-size:14px; font-weight:900; }
.map-btn--naver{ background:#03C75A; color:#fff; }
.map-btn--naver b{ background:#fff; color:#03C75A; }
.map-btn--kakao{ background:#FEE500; color:#191919; }
.map-btn--kakao b{ background:#191919; color:#FEE500; }
.info-card{ padding:32px 24px; border:1px solid var(--c-gray-200); border-radius:var(--r-md); background:#fff; }
.info-card dl{ display:grid; gap:16px; margin-bottom:24px; }
.info-card dt{ font-size:14px; color:var(--c-gray-500); }
.info-card dd{ font-size:17px; font-weight:600; color:var(--c-charcoal-700); }
.info-card dd a:hover{ color:var(--c-orange-600); }
.info-card .btn{ width:100%; }
.info-card .btn + .btn{ margin-top:12px; }
.section--gray .info-card{ background:#fff; }

/* ---------- 10. Business ---------- */
.process{ display:grid; gap:0; margin-top:48px; counter-reset:step; }
.process li{ position:relative; display:grid; grid-template-columns:48px 1fr; gap:4px 16px; padding-bottom:32px; }
.process li:last-child{ padding-bottom:0; }
.process li::before{ content:""; position:absolute; left:23px; top:48px; bottom:0; width:1px; background:var(--c-gray-300); }
.process li:last-child::before{ display:none; }
.process .no{ grid-row:span 2; width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:2px solid var(--c-charcoal-700); border-radius:50%; font-weight:700; background:#fff; }
.process li:last-child .no{ background:var(--c-orange-600); border-color:var(--c-orange-600); color:#fff; }
.process b{ font-size:20px; align-self:end; }
.process span.d{ color:var(--c-charcoal-600); font-size:15px; }
@media (min-width:1024px){
  .process{ grid-template-columns:repeat(4,1fr); gap:32px; margin-top:64px; }
  .process li{ grid-template-columns:1fr; justify-items:center; text-align:center; padding:0; gap:8px; }
  .process li::before{ left:calc(50% + 40px); right:calc(-32px + 0px); top:24px; bottom:auto; width:auto; height:1px; margin-right:-0px; }
  .process .no{ grid-row:auto; margin-bottom:8px; }
  .process li::after{ content:""; }
  .process span.d{ max-width:220px; }
}
.biz-block{ display:grid; gap:32px; align-items:center; }
.biz-block__ph img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:var(--r-md); }
.biz-block__no{ display:block; font-size:clamp(56px,7vw,80px); font-weight:800; line-height:1; letter-spacing:-.03em; color:var(--c-gray-200); margin-bottom:8px; }
.section--gray .biz-block__no{ color:var(--c-gray-300); }
.biz-block__copy{ margin:12px 0 16px; font-size:var(--fs-lead); font-weight:600; color:var(--c-charcoal-700); }
.biz-block ul.bul{ margin:24px 0; display:grid; gap:8px; }
.bul li{ position:relative; padding-left:20px; }
.bul li::before{ content:""; position:absolute; left:0; top:.8em; width:4px; height:4px; background:var(--c-orange-brand); }
@media (min-width:1024px){
  .biz-block{ grid-template-columns:1fr 1fr; gap:64px; }
  .biz-block--rev .biz-block__ph{ order:2; }
}

/* ---------- 11. Projects ---------- */
.p-controls{ padding:32px 0 0; }
.p-controls__row{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:1024px){ .p-controls__row{ flex-direction:row; justify-content:space-between; align-items:flex-start; gap:32px; } }
.chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; margin:0 calc(var(--pad-x) * -1); padding-left:var(--pad-x); padding-right:var(--pad-x); }
.chips::-webkit-scrollbar{ display:none; }
@media (min-width:1024px){ .chips{ flex-wrap:wrap; overflow:visible; margin:0; padding:0; flex:1; } }
.chip{
  flex:none; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:var(--r-full);
  background:#fff; border:1px solid var(--c-gray-300); color:var(--c-charcoal-700); font-size:15px; font-weight:500; white-space:nowrap;
  transition:border-color var(--t-fast) ease, background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.chip em{ font-style:normal; color:var(--c-gray-500); font-variant-numeric:tabular-nums; }
.chip:hover{ border-color:var(--c-charcoal-700); }
.chip[aria-pressed="true"]{ background:var(--c-charcoal-700); border-color:var(--c-charcoal-700); color:#fff; }
.chip[aria-pressed="true"] em{ color:var(--c-gray-300); }
.chip[disabled]{ color:var(--c-gray-500); border:1px dashed var(--c-gray-200); cursor:not-allowed; }
.search{ position:relative; width:100%; order:-1; }
@media (min-width:1024px){ .search{ width:320px; order:0; flex:none; } }
.search svg{ position:absolute; left:16px; top:50%; margin-top:-10px; color:var(--c-gray-500); pointer-events:none; }
.search input{ padding-left:48px; }
.p-summary{ margin:24px 0 24px; font-size:14px; color:var(--c-charcoal-600); }
.p-summary b{ color:var(--c-charcoal-700); font-variant-numeric:tabular-nums; }

.p-grid{ display:grid; gap:20px; }
@media (min-width:768px){ .p-grid{ grid-template-columns:1fr 1fr; gap:24px; } }
@media (min-width:1024px){ .p-grid{ grid-template-columns:repeat(3,1fr); gap:32px; } }
.pcard{
  display:flex; flex-direction:column; height:100%; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--r-md); overflow:hidden;
  transition:transform var(--t-base) ease, box-shadow var(--t-base) ease;
}
.pcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.pcard:active{ transform:translateY(-2px); }
.pcard__ph{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--c-gray-100); animation:pulse 1.2s ease-in-out infinite; }
.pcard__ph.is-loaded{ animation:none; }
.pcard__ph img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease-out); }
.pcard:hover .pcard__ph img{ transform:scale(1.05); }
.pcard__ph--empty{ display:flex; align-items:center; justify-content:center; color:var(--c-gray-300); animation:none; }
.pcard__ph--empty svg{ width:72px; height:72px; }
.pcard__ph--empty .wm{ position:absolute; right:16px; bottom:12px; font-weight:800; letter-spacing:-.02em; font-size:15px; color:var(--c-gray-300); }
.pcard__more{ position:absolute; top:12px; right:12px; padding:2px 8px; font-size:12px; font-weight:600; background:rgba(31,28,29,.7); color:#fff; border-radius:var(--r-sm); }
.pcard__body{ padding:20px; display:flex; flex-direction:column; gap:4px; flex:1; }
.pcard__cat{ font-size:13px; font-weight:600; color:var(--c-orange-600); }
.pcard__t{ font-size:18px; font-weight:600; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color var(--t-fast) ease; }
.pcard:hover .pcard__t{ color:var(--c-orange-600); }
.pcard__client{ font-size:14px; color:var(--c-charcoal-600); }
.pcard__meta{ font-size:14px; color:var(--c-gray-500); }
.p-more{ text-align:center; margin-top:48px; }
.p-empty{ text-align:center; padding:64px 0; color:var(--c-charcoal-600); }
.p-empty p{ margin-bottom:24px; }
.p-empty strong{ display:block; font-size:20px; color:var(--c-charcoal-700); margin-bottom:4px; }

/* Modal */
.modal{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgba(31,28,29,.88); opacity:0; visibility:hidden; transition:opacity 200ms ease, visibility 0s linear 200ms; }
.modal.is-open{ opacity:1; visibility:visible; transition:opacity 200ms ease, visibility 0s; }
.modal__panel{
  position:relative; display:flex; flex-direction:column; width:100%; height:100%; background:#fff; overflow-y:auto;
  transform:translateY(16px); opacity:0; transition:transform 250ms var(--ease-out), opacity 250ms ease;
}
.modal.is-open .modal__panel{ transform:none; opacity:1; }
.modal__stage{ position:relative; background:var(--c-charcoal-900); color:#fff; flex:none; }
.modal__img{ position:relative; height:56vw; min-height:220px; max-height:60vh; display:flex; align-items:center; justify-content:center; touch-action:pan-y; }
.modal__img img{ max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }
.modal__nav{
  position:absolute; top:50%; margin-top:-24px; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(31,28,29,.5); color:#fff; transition:background-color var(--t-fast) ease, opacity var(--t-fast) ease;
}
.modal__nav:hover{ background:var(--c-orange-600); }
.modal__nav[disabled]{ opacity:.3; pointer-events:none; }
.modal__nav--prev{ left:8px; } .modal__nav--next{ right:8px; }
.modal__count{ position:absolute; right:12px; bottom:8px; padding:2px 8px; font-size:13px; background:rgba(31,28,29,.6); border-radius:var(--r-sm); font-variant-numeric:tabular-nums; }
.modal__thumbs{ display:flex; gap:8px; padding:8px 12px; overflow-x:auto; background:var(--c-charcoal-900); scrollbar-width:thin; }
.modal__thumbs button{ flex:none; width:64px; height:48px; opacity:.55; border:2px solid transparent; transition:opacity var(--t-fast) ease; }
.modal__thumbs button img{ width:100%; height:100%; object-fit:cover; }
.modal__thumbs button[aria-current="true"]{ opacity:1; border-color:#fff; }
.modal__info{ padding:24px 20px 32px; flex:1; display:flex; flex-direction:column; }
.modal__cat{ font-size:13px; font-weight:600; color:var(--c-orange-600); margin-bottom:4px; }
.modal__title{ font-size:22px; font-weight:700; line-height:1.4; margin-bottom:20px; }
.modal__dl{ display:grid; gap:14px; }
.modal__dl dt{ font-size:14px; color:var(--c-gray-500); }
.modal__dl dd{ font-size:16px; }
.modal__pn{ display:flex; justify-content:space-between; gap:8px; margin-top:auto; padding-top:32px; }
.modal__pn .btn{ flex:1; min-height:44px; padding:0 12px; font-size:14px; }
.modal__close{
  position:absolute; top:0; right:0; z-index:5; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:rgba(31,28,29,.6); color:#fff;
}
.modal__close:hover{ background:rgba(0,0,0,.8); }
.modal__nophoto{ display:none; }
.modal.no-photo .modal__stage{ display:none; }
.modal.no-photo .modal__info{ padding-top:64px; }
@media (min-width:1024px){
  .modal__panel{ flex-direction:row; width:min(1080px,92vw); height:auto; max-height:90vh; border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden; }
  .modal__stage{ flex:7 1 0; display:flex; flex-direction:column; min-width:0; }
  .modal__img{ height:auto; max-height:none; flex:1; min-height:420px; }
  .modal__info{ flex:5 1 0; overflow-y:auto; padding:40px 32px 32px; min-width:0; }
  .modal__title{ font-size:26px; }
  .modal.no-photo .modal__panel{ width:min(560px,92vw); }
  .modal.no-photo .modal__info{ padding-top:48px; }
  .modal__close{ background:transparent; color:var(--c-charcoal-700); }
  .modal__close:hover{ background:var(--c-gray-100); }
}

/* ---------- 12. Contact ---------- */
.ccards{ display:grid; gap:16px; margin-bottom:64px; }
@media (min-width:600px){ .ccards{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .ccards{ grid-template-columns:repeat(4,1fr); gap:24px; } }
.ccard{ padding:32px 24px; border:1px solid var(--c-gray-200); border-radius:var(--r-md); background:var(--c-gray-100); }
.ccard svg{ color:var(--c-charcoal-700); margin-bottom:16px; }
.ccard dt{ font-size:14px; color:var(--c-gray-500); }
.ccard dd{ font-size:19px; font-weight:600; line-height:1.5; word-break:break-all; }
.ccard--addr dd{ word-break:keep-all; font-size:17px; }
.ccard a:hover{ color:var(--c-orange-600); }
@media (min-width:600px){ .ccard--addr{ grid-column:1 / -1; } }
@media (min-width:1024px){ .ccard--addr{ grid-column:auto; } }

.form-wrap{ display:grid; gap:40px; }
@media (min-width:1024px){ .form-wrap{ grid-template-columns:4fr 8fr; gap:64px; } }
.form-grid{ display:grid; gap:24px; }
@media (min-width:768px){ .form-grid .two{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } }
.form-grid .two{ display:grid; gap:24px; }
.field label, .field .lbl{ display:block; margin-bottom:8px; font-size:14px; font-weight:600; color:var(--c-charcoal-700); }
.req{ color:var(--c-error); }
.input, .select, .textarea{
  width:100%; min-height:52px; padding:0 16px; background:#fff; border:1px solid var(--c-gray-300); border-radius:var(--r-sm);
  font-size:16px; color:var(--c-charcoal-700); transition:border-color var(--t-fast) ease;
}
.input::placeholder, .textarea::placeholder{ color:var(--c-gray-500); opacity:1; }
.input:hover, .select:hover, .textarea:hover{ border-color:var(--c-gray-500); }
.input:focus, .select:focus, .textarea:focus{ outline:3px solid var(--c-info); outline-offset:0; border-color:var(--c-charcoal-700); }
.textarea{ min-height:160px; padding:14px 16px; resize:vertical; line-height:1.6; }
.select{
  appearance:none; -webkit-appearance:none; padding-right:44px;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233D3839' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"]{ border:2px solid var(--c-error); }
.err{ display:none; align-items:center; gap:6px; margin-top:8px; font-size:14px; color:var(--c-error); }
.err.is-show{ display:flex; }
.err svg{ flex:none; }
.check{ display:flex; align-items:flex-start; gap:12px; }
.check input{ appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:3px 0 0; border:2px solid var(--c-charcoal-700); border-radius:2px; background:#fff; cursor:pointer; position:relative; }
.check input:checked{ background:var(--c-charcoal-700); }
.check input:checked::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.check input:focus-visible{ outline:3px solid var(--c-info); outline-offset:2px; }
.check label{ margin:0; font-weight:400; font-size:15px; cursor:pointer; }
.check input[aria-invalid="true"]{ border-color:var(--c-error); box-shadow:0 0 0 2px var(--c-error); }
.privacy{ padding:16px 20px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--r-md); font-size:14px; color:var(--c-charcoal-600); }
.form-note{ font-size:14px; color:var(--c-charcoal-600); }
.form-actions{ display:flex; flex-direction:column; gap:12px; }
@media (min-width:600px){ .form-actions{ flex-direction:row; } }
.copy-ok{ font-size:14px; color:var(--c-success); min-height:1.6em; }

/* ---------- 13. Footer ---------- */
.site-footer{ background:var(--c-charcoal-900); color:var(--c-foot-text); padding:64px 0 32px; font-size:14px; }
@media (min-width:1024px){ .site-footer{ padding-top:80px; padding-bottom:40px; } }
.site-footer a:hover{ color:var(--c-orange-400); }
.foot{ display:grid; gap:40px; }
.foot__brand .wm{ display:flex; align-items:center; font-size:28px; font-weight:800; color:#fff; letter-spacing:-.02em; line-height:1; }
.foot__brand .wm i{ display:inline-block; width:2px; height:18px; background:var(--c-orange-400); margin:0 7px; }
.foot__en{ margin:12px 0 8px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-foot-mute); }
.foot__brand p.one{ color:var(--c-foot-text); }
.foot__map{ display:grid; grid-template-columns:1fr 1fr; gap:32px 24px; }
.foot__map h3{ margin-bottom:12px; font-size:15px; font-weight:600; color:#fff; }
.foot__map li + li{ margin-top:0; }
.foot__map a{ display:inline-flex; align-items:center; min-height:44px; padding:2px 0; }
@media (min-width:1024px){ .foot__map a{ min-height:32px; } }
.foot__contact{ order:-1; }
.foot__contact h3{ margin-bottom:12px; font-size:15px; font-weight:600; color:#fff; }
.foot__contact li + li{ margin-top:6px; }
.foot__bottom{ margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:grid; gap:8px; font-size:13px; color:var(--c-foot-mute); }
.foot__bottom a{ color:var(--c-foot-text); }
@media (min-width:1024px){
  .foot{ grid-template-columns:4fr 6fr 3fr; gap:32px; }
  .foot__contact{ order:0; }
  .foot__map{ grid-template-columns:repeat(3,1fr); gap:24px; }
  .foot__bottom{ grid-template-columns:1fr auto; gap:24px; }
}
.to-top{
  position:fixed; right:16px; bottom:16px; z-index:50; width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  background:var(--c-charcoal-700); color:#fff; border-radius:var(--r-sm); opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-base) ease, transform var(--t-base) ease, visibility 0s linear var(--t-base), background-color var(--t-fast) ease;
}
.to-top.is-show{ opacity:1; visibility:visible; transform:none; transition:opacity var(--t-base) ease, transform var(--t-base) ease, visibility 0s, background-color var(--t-fast) ease; }
.to-top:hover{ background:var(--c-charcoal-900); }
@media (min-width:1024px){ .to-top{ right:32px; bottom:32px; } }

/* ---------- 14. Reveal ---------- */
html.js [data-reveal]{ opacity:0; transform:translateY(32px); }
html.js [data-reveal].is-in{
  opacity:1; transform:none;
  transition:opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  transition-delay:calc(var(--i, 0) * 80ms);
}

/* ---------- 15. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .slide .anim{ opacity:1 !important; }
}

/* Typography: 제목은 SUIT(가볍고 날렵하게), 영문·숫자는 Montserrat */
h1,h2,h3,.h2,.slide__title,.subvisual h1,.greet__quote,.biz-card__t,.pcard__t,.modal__title,.quick__h,.quick__grid b,.sub-h{
  font-family:var(--font-display);
}
.slide__title{ font-weight:700 ; letter-spacing:-.045em ; line-height:1.12 ; }
.h2,.subvisual h1{ font-weight:700; letter-spacing:-.035em; }
.eyebrow,.slide__en,.counter__v,.biz-card__no,.hero__count,.about-sum__since,.hist-list .y,.tl-item .y,.quick__no,.p-summary b{
  font-family:var(--font-en);
}
.eyebrow{ letter-spacing:.22em; font-weight:600; }
.slide__en{ font-weight:500; letter-spacing:.24em; }
.counter__v{ font-weight:700; letter-spacing:-.02em; }

/* ---------- Admin: 로그인·회원가입·관리자 화면 ---------- */
.auth{ display:grid; min-height:100vh; padding-top:var(--hh-solid); background:var(--c-gray-100); }
.auth__visual{ display:none; }
.auth__panel{ display:flex; align-items:center; justify-content:center; padding:48px var(--pad-x); }
.auth__box{ width:100%; max-width:420px; padding:40px 32px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.auth__h{ margin:6px 0 24px; font-size:28px; font-weight:700; letter-spacing:-.035em; color:var(--c-charcoal-900); }
.auth-tabs{ display:grid; grid-template-columns:1fr 1fr; margin-bottom:24px; border-bottom:1px solid var(--c-gray-200); }
.auth-tabs button{ min-height:48px; font-size:16px; font-weight:600; color:var(--c-gray-500); border-bottom:3px solid transparent; margin-bottom:-1px; }
.auth-tabs button[aria-selected="true"]{ color:var(--c-charcoal-900); border-bottom-color:var(--c-orange-600); }
.auth-form{ display:grid; gap:18px; }
.auth-form .btn{ width:100%; margin-top:4px; }
.auth-form small{ font-weight:400; color:var(--c-gray-500); }
.auth-link{ justify-self:center; font-size:14px; color:var(--c-charcoal-600); text-decoration:underline; text-underline-offset:3px; }
.auth-msg{ margin-bottom:18px; padding:12px 14px; border-radius:var(--r-md); font-size:14px; line-height:1.5; background:var(--c-gray-100); color:var(--c-charcoal-700); }
.auth-msg--error{ background:#FEF3F2; color:var(--c-error); }
.auth-msg--ok{ background:#ECFDF3; color:var(--c-success); }
.auth-msg--warn{ background:var(--c-orange-50); color:var(--c-orange-700); }
@media (min-width:1024px){
  .auth{ grid-template-columns:1fr 1fr; }
  .auth__visual{ display:block; position:relative; overflow:hidden; background:var(--c-charcoal-900); }
  .auth__visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; }
  .auth__visual-in{ position:absolute; left:56px; bottom:64px; color:#fff; }
  .auth__visual-in .eyebrow{ color:var(--c-orange-400); }
  .auth__visual-t{ margin-top:12px; font-family:var(--font-display); font-size:48px; font-weight:700; line-height:1.15; letter-spacing:-.045em; }
}

.admin{ min-height:100vh; padding:calc(var(--hh-solid) + 48px) 0 96px; background:var(--c-gray-100); }
.admin__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:32px; }
.admin__head .h2{ margin-top:6px; }
.admin__who{ margin-top:8px; color:var(--c-charcoal-600); }
.admin-card{ margin-top:24px; padding:28px 24px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--r-lg); }
.admin-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.admin-grid{ display:grid; gap:12px; }
@media (min-width:768px){ .admin-grid{ grid-template-columns:repeat(3,1fr); } }
.admin-tile{ display:flex; flex-direction:column; gap:6px; padding:28px 24px; background:#fff; border:1px solid var(--c-gray-200); border-radius:var(--r-lg); transition:border-color .2s, transform .2s; }
.admin-tile:hover{ border-color:var(--c-orange-600); transform:translateY(-2px); }
.admin-tile.is-off{ opacity:.55; pointer-events:none; }
.admin-tile svg{ width:40px; height:40px; margin-bottom:8px; fill:none; stroke:var(--c-orange-600); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.admin-tile b{ font-family:var(--font-display); font-size:19px; color:var(--c-charcoal-900); }
.admin-tile small{ font-size:14px; color:var(--c-charcoal-600); }
.admin-table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; min-width:560px; border-collapse:collapse; font-size:15px; }
.admin-table th,.admin-table td{ padding:12px 10px; text-align:left; border-bottom:1px solid var(--c-gray-200); vertical-align:middle; }
.admin-table th{ font-size:13px; font-weight:600; color:var(--c-gray-500); }
.badge{ display:inline-block; padding:3px 10px; border-radius:var(--r-full); font-size:13px; font-weight:600; }
.badge--ok{ background:#ECFDF3; color:var(--c-success); }
.badge--wait{ background:var(--c-orange-50); color:var(--c-orange-700); }

/* 관리자: 시공실적 관리 */
.pm-tools{ display:flex; flex-wrap:wrap; gap:8px; }
.pm-filter{ display:grid; gap:8px; margin-bottom:12px; }
@media (min-width:768px){ .pm-filter{ grid-template-columns:1fr 160px auto; align-items:center; } }
.pm-count{ font-size:14px; color:var(--c-charcoal-600); }
.pm-table td{ padding:10px; }
.pm-table tr.is-hidden td{ background:var(--c-gray-100); }
.pm-table tr.is-hidden b{ color:var(--c-gray-500); }
.pm-table small{ color:var(--c-gray-500); }
.pm-th{ display:block; width:88px; height:62px; object-fit:cover; border-radius:var(--r-sm); background:var(--c-gray-100); }
.pm-th--none{ display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--c-gray-500); }
.pm-act{ white-space:nowrap; text-align:right; }
.pm-act .btn + .btn{ margin-left:6px; }

.pm-dialog{ width:min(960px, calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:0; border-radius:var(--r-lg); box-shadow:var(--sh-3); }
.pm-dialog::backdrop{ background:rgba(20,17,18,.6); }
.pm-dialog form{ display:flex; flex-direction:column; max-height:calc(100vh - 24px); }
.pm-dialog__head{ padding:20px 24px; border-bottom:1px solid var(--c-gray-200); }
.pm-dialog__body{ flex:1; overflow:auto; padding:20px 24px; }
.pm-dialog__foot{ display:flex; align-items:center; gap:8px; padding:16px 24px; border-top:1px solid var(--c-gray-200); background:var(--c-gray-100); }
.pm-dialog__foot span{ flex:1; }
.pm-del{ color:var(--c-error); border-color:var(--c-error); }
.pm-fields{ display:grid; gap:14px; margin-bottom:24px; }
@media (min-width:768px){ .pm-fields{ grid-template-columns:1fr 1fr; } .pm-wide{ grid-column:1 / -1; } }
.pm-fields small{ font-weight:400; color:var(--c-gray-500); }
.pm-photos-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.pm-sub{ font-size:18px; font-weight:700; }
.pm-upload{ position:relative; overflow:hidden; cursor:pointer; }
.pm-upload input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.pm-photos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; margin:12px 0; }
.pm-ph{ position:relative; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--c-gray-100); cursor:grab; border:2px solid transparent; }
.pm-ph:first-child{ border-color:var(--c-orange-600); }
.pm-ph.is-drag{ opacity:.4; }
.pm-ph img{ width:100%; height:100%; object-fit:cover; pointer-events:none; }
.pm-ph__cover, .pm-ph__no{ position:absolute; left:6px; top:6px; padding:2px 8px; border-radius:var(--r-full); font-size:12px; font-weight:700; background:rgba(20,17,18,.7); color:#fff; }
.pm-ph__cover{ background:var(--c-orange-600); }
.pm-ph__btns{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:center; gap:4px; padding:6px; background:linear-gradient(transparent, rgba(20,17,18,.75)); }
.pm-ph__btns button{ min-width:32px; height:30px; padding:0 8px; border-radius:var(--r-sm); background:#fff; color:var(--c-charcoal-900); font-size:12px; font-weight:700; }
.pm-ph__btns button:disabled{ opacity:.35; cursor:default; }
.pm-ph__btns button[data-del]{ color:var(--c-error); }