/* ============================================================
   GMN 재구축 프로토타입 (콘텐츠 무변경 / 화면·모션 재구성)
   - 본문 타이포: Pretendard (자체 호스팅, 무료 OFL)
   - 상단바(nav)는 기존 디자인 그대로 유지
   - transform·opacity 중심, prefers-reduced-motion 지원
   ============================================================ */

/* Pretendard */
@font-face{font-family:'Pretendard';src:url('/assets/fonts/Pretendard-Regular.woff2') format('woff2');font-weight:400;font-display:swap;}
@font-face{font-family:'Pretendard';src:url('/assets/fonts/Pretendard-Medium.woff2') format('woff2');font-weight:500;font-display:swap;}
@font-face{font-family:'Pretendard';src:url('/assets/fonts/Pretendard-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap;}
@font-face{font-family:'Pretendard';src:url('/assets/fonts/Pretendard-Bold.woff2') format('woff2');font-weight:700;font-display:swap;}
@font-face{font-family:'Pretendard';src:url('/assets/fonts/Pretendard-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap;}
/* 상단바 전용(기존 그대로) */
@font-face{font-family:'GmnNav';src:url('/assets/fonts/RixHB.woff') format('woff');font-weight:700;font-display:swap;}
@font-face{font-family:'GmnNav';src:url('/assets/fonts/RixHM.woff') format('woff');font-weight:500;font-display:swap;}

:root{
  --ink:#111114;--ink-soft:#2b2b30;
  --paper:#f3f1ec;--paper-2:#e8e5de;
  --graphite:#5f6066;--muted:#9a9a9f;
  --line:rgba(17,17,20,.12);--line-dk:rgba(255,255,255,.16);
  --brass:#b98a34;--brass-dim:rgba(185,138,52,.4);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-scene:cubic-bezier(.62,.02,.34,1);
  --d-fast:.28s;--d-base:.62s;--d-slow:.95s;
  --shell:min(1380px,calc(100vw - 12vw));
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{font-family:'Pretendard',-apple-system,'Malgun Gothic',sans-serif;
  background:var(--paper);color:var(--ink);overflow-x:clip;
  line-height:1.7;letter-spacing:-.015em;font-weight:400;-webkit-font-smoothing:antialiased;word-break:keep-all;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--paper);}

.progress-rail{position:fixed;top:0;left:0;width:100%;height:2px;z-index:120;}
.progress-rail span{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--brass),#e4c98a);transform:scaleX(0);transform-origin:left;}

/* ===== 상단바 (운영 원본 수치 그대로: 가운데 캡슐 1447px / 높이 70px) ===== */
.nav{position:absolute;top:30px;left:50%;transform:translateX(-50%);width:min(1447px,calc(100vw - 48px));z-index:110;}
.main-menu-bar{display:flex;align-items:center;justify-content:space-between;width:100%;height:70px;border-radius:70px;
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0 40px 0 35px;}
.nav__logo{display:flex;align-items:center;flex-shrink:0;}
.nav__logo img{height:25px;filter:brightness(0) invert(1);transition:transform var(--d-base) var(--e-out);}
.nav__logo:hover img{transform:translateY(-1px);}
.main-menu-bar>nav{width:60%;}
.menu{display:flex;list-style:none;width:100%;}
.menu>li{flex:1 1 0;text-align:center;position:relative;}
.menu>li>a{display:inline-block;padding:24px 6px;font-family:'Pretendard';font-weight:500;font-size:clamp(15px,1.25vw,19px);letter-spacing:-.01em;color:rgba(255,255,255,.84);position:relative;transition:color var(--d-fast) var(--e-out);}
.menu>li:hover>a,.menu>li:focus-within>a{color:#fff;font-weight:700;}
.menu>li>a::after{content:"";position:absolute;left:6px;right:6px;bottom:15px;height:1.5px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform var(--d-fast) var(--e-out);}
.menu>li:hover>a::after,.menu>li:focus-within>a::after{transform:scaleX(1);transform-origin:left;}
.submenu{position:absolute;top:calc(100% + 10px);left:50%;transform-origin:top center;transform:translateX(-50%) translateY(10px) scale(.97);min-width:212px;list-style:none;
  background:rgba(13,13,15,.66);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:10px;overflow:hidden;
  opacity:0;visibility:hidden;transition:opacity .34s var(--e-out),transform .44s var(--e-out),visibility .34s;
  box-shadow:0 36px 90px -44px rgba(0,0,0,.9);}
.submenu::before{content:"";position:absolute;top:0;left:18px;right:18px;height:1px;background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.55;}
.menu>li:hover .submenu,.menu>li:focus-within .submenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1);}
.submenu li{opacity:0;transform:translateX(-12px);transition:opacity .42s var(--e-out),transform .42s var(--e-out);}
.menu>li:hover .submenu li,.menu>li:focus-within .submenu li{opacity:1;transform:none;}
.submenu li:nth-child(1){transition-delay:.05s;}.submenu li:nth-child(2){transition-delay:.10s;}
.submenu li:nth-child(3){transition-delay:.15s;}.submenu li:nth-child(4){transition-delay:.20s;}
.submenu li:nth-child(5){transition-delay:.25s;}
.submenu li a{display:flex;align-items:center;padding:12px 16px;font-size:14px;font-weight:500;color:rgba(255,255,255,.62);border-radius:10px;letter-spacing:-.01em;white-space:nowrap;transition:color .3s var(--e-out),background .3s,padding-left .34s var(--e-out);}
.submenu li a::after{content:"\203A";margin-left:auto;padding-left:14px;color:var(--brass);font-size:24px;font-weight:400;line-height:1;position:relative;top:-3px;opacity:0;transform:translateX(-8px);transition:opacity .3s var(--e-out),transform .3s var(--e-out);}
.submenu li a:hover{color:#fff;background:rgba(255,255,255,.06);padding-left:22px;}
.submenu li a:hover::after{opacity:1;transform:none;}
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;background:none;border:0;color:#fff;align-items:center;}
.nav__burger span{width:22px;height:1.6px;background:currentColor;transition:transform var(--d-base) var(--e-out),opacity var(--d-base);}
body.mnav-open .nav__burger span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
body.mnav-open .nav__burger span:nth-child(2){opacity:0;}
body.mnav-open .nav__burger span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

/* 모바일 전용 풀스크린 메뉴 */
.mnav{position:fixed;inset:0;z-index:105;background:rgba(14,14,16,.98);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;justify-content:center;padding:0 8vw;
  opacity:0;visibility:hidden;transform:translateY(-2%);transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out),visibility var(--d-base);}
body.mnav-open .mnav{opacity:1;visibility:visible;transform:none;}
.mnav ul{list-style:none;}
.mnav>ul>li{border-bottom:1px solid rgba(255,255,255,.1);}
.mnav>ul>li>a{display:block;padding:22px 4px;color:#fff;font-family:'Pretendard';font-weight:700;font-size:26px;letter-spacing:-.02em;}
.mnav .sub{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0 4px 22px;}
.mnav .sub a{color:rgba(255,255,255,.6);font-size:15px;padding:8px 0;min-height:40px;display:flex;align-items:center;}
.mnav .sub a:active{color:#fff;}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:#000;color:#fff;}
.hero__stage{position:absolute;inset:0;}
.hero__slide{position:absolute;inset:0;opacity:0;}
.hero__slide.active{opacity:1;}
.hero__media{position:absolute;inset:0;overflow:hidden;}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);filter:saturate(.92) contrast(1.02) brightness(.82);}
.hero__slide.active .hero__media img{transform:scale(1);transition:transform 7.4s linear;}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,.1) 34%,rgba(0,0,0,.08) 55%,rgba(10,10,12,.84) 100%);}
.hero__grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.hero__content{position:absolute;left:0;bottom:0;width:100%;padding:0 6vw 9vh;z-index:3;}
.hero__inner{max-width:var(--shell);margin:0 auto;}
.hero__title{font-family:'Pretendard';font-weight:800;font-size:clamp(32px,5vw,74px);line-height:1.1;letter-spacing:-.035em;max-width:18ch;}
.hero__title .ln{display:block;overflow:hidden;}
.hero__title .ln>span{display:block;transform:translateY(115%);}
.hero__sub{margin-top:28px;font-size:clamp(14px,1.1vw,16px);color:rgba(255,255,255,.8);line-height:1.8;opacity:0;transform:translateY(16px);font-weight:400;}
.hero__sub span{display:block;word-break:keep-all;}
.hero__sub span+span{margin-top:5px;}
@media (min-width:721px){.hero__sub span{white-space:nowrap;}}
@media (max-width:720px){.hero__sub span{text-wrap:balance;}}
.hero__slide.seq .hero__title .ln>span{transform:translateY(0);transition:transform 1.05s var(--e-out);}
.hero__slide.seq .hero__title .ln:nth-child(1)>span{transition-delay:.2s;}
.hero__slide.seq .hero__title .ln:nth-child(2)>span{transition-delay:.32s;}
.hero__slide.seq .hero__title .ln:nth-child(3)>span{transition-delay:.44s;}
.hero__slide.seq .hero__sub{opacity:1;transform:none;transition:opacity .9s var(--e-out) .62s,transform .9s var(--e-out) .62s;}
.hero__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;align-items:center;justify-content:center;width:60px;height:120px;
  border:0;background:none;color:#fff;cursor:pointer;opacity:0;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));
  transition:opacity var(--d-base) var(--e-out),transform var(--d-base) var(--e-out);}
.hero.ready .hero__nav{opacity:.8;}
.hero__nav.prev{left:1.6vw;} .hero__nav.next{right:1.6vw;}
.hero__nav:hover{opacity:1;}
.hero__nav.prev:hover{transform:translateY(-50%) scale(1.14);}
.hero__nav.next:hover{transform:translateY(-50%) scale(1.14);}
.hero__nav svg{width:44px;height:44px;}
.hero__nav path{stroke-width:2;}
.hero__ring{position:absolute;right:5vw;bottom:7vh;z-index:5;width:64px;height:64px;padding:0;border:0;background:none;cursor:pointer;opacity:0;transform:translateY(12px);
  -webkit-tap-highlight-color:transparent;transition:transform var(--d-base) var(--e-out);}
.hero.ready .hero__ring{opacity:1;transform:none;transition:opacity 1s var(--e-out) 1s,transform 1s var(--e-out) 1s;}
.hero.ready .hero__ring:hover{transform:scale(1.06);}
.hero__ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block;}
.hero__ring circle{fill:none;}
.ring-track{stroke:rgba(255,255,255,.3);stroke-width:1.4;}
.ring-fill{stroke:#fff;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:289;stroke-dashoffset:289;}
.hero__ring.run .ring-fill{stroke-dashoffset:0;transition:stroke-dashoffset 6s linear;}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;pointer-events:none;}
.ring-num{font-family:'Pretendard';font-weight:600;font-size:16px;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.ring-tot{font-family:'Pretendard';font-weight:500;font-size:9.5px;color:rgba(255,255,255,.55);margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:.05em;}
@media (max-width:720px){.hero__ring{right:5vw;bottom:5.5vh;width:52px;height:52px;padding:8px;box-sizing:content-box;}.ring-num{font-size:14px;}.ring-tot{font-size:9px;margin-top:2px;}}
@media (prefers-reduced-motion:reduce){.hero__ring.run .ring-fill{stroke-dashoffset:0;transition:none;}}
@media (max-width:720px){.hero__nav{width:44px;height:88px;}.hero__nav svg{width:34px;height:34px;}.hero__nav.prev{left:6px;}.hero__nav.next{right:6px;}}

/* ============================================================
   공통 / 리빌
   ============================================================ */
.shell{max-width:var(--shell);margin:0 auto;}
.section{position:relative;padding:clamp(96px,14vh,190px) 6vw;}
h2{font-family:'Pretendard';font-weight:800;letter-spacing:-.035em;}
p{text-wrap:pretty;}
.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--d-slow) var(--e-out),transform var(--d-slow) var(--e-out);will-change:transform,opacity;}
.reveal.is-in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}.reveal.d2{transition-delay:.16s;}.reveal.d3{transition-delay:.24s;}.reveal.d4{transition-delay:.32s;}
.lift{overflow:hidden;}
.lift>*{display:block;transform:translateY(110%);transition:transform var(--d-slow) var(--e-out);}
.lift.is-in>*{transform:none;}
.mask{position:relative;overflow:hidden;}
.mask>img,.mask>.bg{transform:scale(1.16);transition:transform 1.5s var(--e-scene);will-change:transform;}
.mask::after{content:"";position:absolute;inset:0;background:var(--paper);transform-origin:bottom;transform:scaleY(1);transition:transform 1.15s var(--e-scene);}
.mask.is-in>img,.mask.is-in>.bg{transform:scale(1);}
.mask.is-in::after{transform:scaleY(0);}

/* ===== 히어로 아래 공통 타이포/간격 토큰 ===== */
:root{
  --fz-display:clamp(42px,6.2vw,84px);
  --fz-h2:clamp(34px,4.6vw,60px);
  --fz-lead:clamp(20px,2vw,27px);
  --fz-body:clamp(16.5px,1.15vw,19px);
  --fz-aux:clamp(14px,1vw,15.5px);
  --sec-pad:clamp(110px,15vh,200px);
}
.section{padding:var(--sec-pad) 6vw;}
.btn-line{--c:var(--ink);position:relative;display:inline-flex;align-items:center;gap:14px;font-weight:600;font-size:var(--fz-aux);color:var(--c);padding:14px 2px;}
.btn-line .lbl{position:relative;z-index:2;transition:transform var(--d-base) var(--e-out);}
.btn-line .arw{position:relative;width:34px;height:1px;background:var(--c);}
.btn-line .arw::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--c);border-right:1px solid var(--c);transform:rotate(45deg);}
.btn-line::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--c);transform:scaleX(1);transform-origin:right;transition:transform var(--d-base) var(--e-out);}
.btn-line:hover::before{transform:scaleX(0);}
.btn-line:hover .lbl{transform:translateX(6px);}

/* ===== ① 회사소개 — 에디토리얼 증거 ===== */
.about{background:var(--paper);}
.about__top{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,5vw,90px);align-items:start;margin-bottom:clamp(46px,6vw,84px);}
.about__title{font-size:var(--fz-h2);line-height:1.16;letter-spacing:-.03em;font-weight:800;}
.about__body{color:var(--ink-soft);font-size:var(--fz-body);line-height:1.9;max-width:50ch;}
.about__body b{color:var(--ink);font-weight:600;}
.about__feature{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--paper-2);}
.about__feature .af{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .85s var(--e-out);}
.about__feature .af.on{opacity:1;}
.about__feature .af-idx{position:absolute;left:24px;bottom:20px;z-index:2;color:#fff;font-weight:600;font-size:var(--fz-aux);letter-spacing:.06em;font-variant-numeric:tabular-nums;mix-blend-mode:difference;}
.about__thumbs{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin-top:14px;}
.about__thumbs button{position:relative;aspect-ratio:1/1;border:0;padding:0;cursor:pointer;overflow:hidden;border-radius:2px;background-size:cover;background-position:center;opacity:.45;filter:grayscale(.5);transition:opacity var(--d-base) var(--e-out),filter var(--d-base);}
.about__thumbs button:hover{opacity:.85;filter:grayscale(.15);}
.about__thumbs button.on{opacity:1;filter:none;}
.about__thumbs button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brass);}
.about__more{margin-top:clamp(34px,4vw,54px);}

/* ===== ② 정교기술·완성가치 — 다크 역량 ===== */
.tech{position:relative;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden;background:#0c0c0e;padding:var(--sec-pad) 6vw;}
.tech__bg{position:absolute;inset:-8% 0;background-size:cover;background-position:center;filter:brightness(.42) contrast(1.05) saturate(.9);will-change:transform;z-index:0;}
.tech__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.88),rgba(8,8,10,.45) 58%,rgba(8,8,10,.2));z-index:1;}
.tech__inner{position:relative;z-index:2;width:100%;max-width:var(--shell);margin:0 auto;display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(40px,6vw,100px);align-items:center;}
.tech__logo{width:clamp(60px,5vw,92px);opacity:.9;margin-bottom:30px;}
.tech__logo img{filter:brightness(0) invert(1);}
.tech h2{font-size:clamp(50px,7.2vw,112px);line-height:.98;letter-spacing:-.045em;font-weight:800;}
.tech h2 .ln{overflow:hidden;}
.tech__desc{color:rgba(255,255,255,.78);font-size:var(--fz-body);line-height:1.95;font-weight:400;max-width:52ch;}
.tech__materials{margin-top:clamp(32px,4vw,50px);padding-top:26px;border-top:1px solid rgba(255,255,255,.2);display:flex;gap:clamp(24px,3vw,50px);flex-wrap:wrap;}
.tech__materials span{position:relative;font-weight:700;font-size:clamp(18px,1.8vw,26px);letter-spacing:.06em;color:#fff;padding-bottom:2px;}
.tech__materials span::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-out);}
.tech__materials.is-in span::after{transform:scaleX(1);}
.tech__materials.is-in span:nth-child(2)::after{transition-delay:.1s;}
.tech__materials.is-in span:nth-child(3)::after{transition-delay:.2s;}

/* ===== ③ 9단계 제작시스템 — 스크롤 연동 스테퍼 ===== */
.proc{background:var(--paper);position:relative;}
.proc__intro{max-width:var(--shell);margin:0 auto;padding:var(--sec-pad) 6vw clamp(36px,5vh,72px);}
.proc__intro h2{font-size:var(--fz-display);line-height:1.04;letter-spacing:-.035em;font-weight:800;max-width:15ch;}
.proc__intro p{margin-top:24px;color:var(--graphite);font-size:var(--fz-lead);line-height:1.55;max-width:42ch;}
.proc__scroll{position:relative;}
.proc__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding-bottom:clamp(40px,7vh,80px);}
.proc__stage{max-width:var(--shell);margin:0 auto;width:100%;padding:0 6vw;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,90px);align-items:center;}
.proc__count{display:flex;align-items:baseline;gap:14px;margin-bottom:18px;}
.proc__count b{font-size:clamp(60px,8vw,120px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--brass);font-variant-numeric:tabular-nums;}
.proc__count i{font-style:normal;font-size:var(--fz-body);color:var(--muted);font-weight:600;}
.proc__now h3{font-size:clamp(28px,3.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:18px;min-height:1.2em;}
.proc__now p{color:var(--graphite);font-size:var(--fz-body);line-height:1.9;max-width:40ch;}
.proc__media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--paper-2);}
.proc__media .pm{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.05);transition:opacity .7s var(--e-out),transform 1s var(--e-out);}
.proc__media .pm.on{opacity:1;transform:none;}
.proc__rail{position:absolute;left:0;right:0;bottom:clamp(20px,4vh,44px);z-index:3;}
.proc__rail-in{max-width:var(--shell);margin:0 auto;padding:0 6vw;}
.proc__track{position:relative;height:2px;background:var(--line);}
.proc__track b{position:absolute;left:0;top:0;height:100%;width:0;background:var(--brass);}
.proc__mobile{display:none;}

/* ===== ④ CREATING VALUE — 협업으로 연결 ===== */
.value{position:relative;min-height:58svh;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;background:#000;padding:clamp(70px,9vh,110px) 6vw;}
.value__bg{position:absolute;inset:-8% 0;background-size:cover;background-position:center;filter:brightness(.5);will-change:transform;}
.value__scrim{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 45%,rgba(0,0,0,.18),rgba(0,0,0,.76));}
.value__inner{position:relative;z-index:2;max-width:940px;}
.value h2{font-size:var(--fz-display);line-height:1.02;letter-spacing:-.02em;font-weight:800;}
.value h2 .ln{overflow:hidden;}
.value__sub{margin-top:12px;color:rgba(255,255,255,.82);font-size:var(--fz-lead);line-height:1.55;}
.value__cta{margin-top:clamp(38px,4vw,56px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.btn-fill{display:inline-flex;align-items:center;gap:12px;padding:19px 36px;background:var(--brass);color:#fff;font-weight:700;font-size:16px;border-radius:3px;transition:transform var(--d-base) var(--e-out),background var(--d-base);}
.btn-fill:hover{transform:translateY(-2px);background:#caa24a;}
.btn-outline{display:inline-flex;align-items:center;gap:12px;padding:19px 36px;border:1px solid rgba(255,255,255,.42);color:#fff;font-weight:600;font-size:16px;border-radius:3px;transition:background var(--d-base),border-color var(--d-base);}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;}

/* [2026-08-10] value 히어로: 타이틀 단어 blur-rise 애니메이션 + 버튼 리디자인 */
.value__title{display:flex;flex-wrap:wrap;gap:.06em .3em;justify-content:center;}
.value__title.reveal{opacity:1;transform:none;}
.value__title .w{display:inline-block;opacity:0;transform:translateY(48px) scale(.94);filter:blur(12px);transition:opacity .9s var(--e-out),transform .9s var(--e-out),filter .9s var(--e-out);}
.value__title.is-in .w{opacity:1;transform:none;filter:blur(0);}
.value__title.is-in .w:nth-child(1){transition-delay:.06s;}
.value__title.is-in .w:nth-child(2){transition-delay:.22s;}
.value__title.is-in .w:nth-child(3){transition-delay:.38s;}
.value__cta a{position:relative;padding:17px 40px;border-radius:999px;font-size:16px;letter-spacing:-.01em;overflow:hidden;transition:transform .38s var(--e-out),box-shadow .38s var(--e-out),background .38s,color .38s,border-color .38s;}
.value__cta a span{position:relative;z-index:2;}
.value__cta a svg{width:17px;height:17px;position:relative;z-index:2;transition:transform .38s var(--e-out);}
.value__cta a:hover svg{transform:translateX(5px);}
.value__cta .btn-fill{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.55);color:#fff;box-shadow:none;}
.value__cta .btn-fill::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e6cd8f 0%,#c99b43 55%,#b98a34 100%);transform:translateX(-101%);transition:transform .45s var(--e-scene);z-index:1;}
.value__cta .btn-fill:hover{color:#1c1305;border-color:#c99b43;transform:translateY(-3px);box-shadow:none;}
.value__cta .btn-fill:hover::before{transform:translateX(0);}
.value__cta .btn-outline{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.55);color:#fff;}
.value__cta .btn-outline::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#e6cd8f 0%,#c99b43 55%,#b98a34 100%);transform:translateX(-101%);transition:transform .45s var(--e-scene);z-index:1;}
.value__cta .btn-outline:hover{color:#1c1305;border-color:#c99b43;transform:translateY(-3px);}
.value__cta .btn-outline:hover::before{transform:translateX(0);}
@media (prefers-reduced-motion: reduce){
  .value__title .w{opacity:1;transform:none;filter:none;transition:none;}
}

/* ===== ⑤ CONTACT ===== */
.contact{background:#f5f6f7;}

/* [2026-08-11] 인스타그램 피드 (예시 그리드 · 연동 준비) */
.insta-feed{ background:#ffffff; }
.insta-feed__head{ text-align:center; }
.insta-feed__head h2{ margin:0; font-size:clamp(28px,3.4vw,44px); font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.insta-feed__head p{ margin-top:8px; color:var(--ink-soft); font-size:var(--fz-body); }
.insta-card--hidden{ display:none !important; }
.insta-feed__grid{ margin-top:clamp(34px,4vw,54px); display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(12px,1.4vw,20px); }
.insta-card{ position:relative; aspect-ratio:4/5; border-radius:16px; background:#eef0f3; display:flex; align-items:center; justify-content:center; color:#8a8f98; font-weight:700; font-size:15px; overflow:hidden; transition:transform .35s var(--e-out), box-shadow .35s var(--e-out); }
.insta-card span{ position:relative; z-index:2; }
.insta-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s var(--e-out); }
.insta-card:hover img{ transform:scale(1.05); }
.insta-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(228,201,138,0),rgba(185,138,52,.16)); opacity:0; transition:opacity .35s; z-index:1; }
.insta-card:hover{ transform:translateY(-5px); box-shadow:0 18px 36px -16px rgba(0,0,0,.28); }
.insta-card:hover::after{ opacity:1; }
.insta-feed__more{ text-align:center; margin-top:clamp(30px,3.5vw,46px); }
.ig-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 34px; border-radius:999px; background:var(--ink); color:#fff; font-weight:700; letter-spacing:-.01em; transition:transform .3s var(--e-out), background .3s; }
.ig-btn:hover{ transform:translateY(-2px); background:#000; }
@media(max-width:900px){ .insta-feed__grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .insta-feed__grid{ grid-template-columns:repeat(2,1fr); } }
.contact__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(40px,6vw,100px);align-items:start;}
.contact h2{font-size:var(--fz-h2);line-height:1.1;letter-spacing:-.03em;font-weight:800;}
.contact__lead{margin-top:22px;color:var(--ink-soft);font-size:var(--fz-body);line-height:1.85;max-width:34ch;}
.contact__meta{margin-top:clamp(36px,4vw,52px);}
.contact__meta div{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--line);font-size:var(--fz-aux);}
.contact__meta div:last-child{border-bottom:1px solid var(--line);}
.contact__meta span{font-weight:600;color:var(--graphite);min-width:58px;letter-spacing:.04em;}
.form{display:grid;grid-template-columns:1fr 1fr;gap:28px 26px;}
.field{position:relative;}
.field.full{grid-column:1/-1;}
.field label{display:block;font-weight:600;font-size:var(--fz-aux);color:var(--graphite);margin-bottom:10px;}
.field label i{color:var(--brass);font-style:normal;}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:13px 2px;font-family:'Pretendard';font-size:16px;color:var(--ink);transition:border-color var(--d-base) var(--e-out);}
.field textarea{resize:none;height:132px;line-height:1.7;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink);}
.field .uline{position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform var(--d-base) var(--e-out);}
.field input:focus~.uline,.field textarea:focus~.uline{transform:scaleX(1);}
.field.err input,.field.err textarea{border-color:#bf4a3f;}
.field .msg{position:absolute;right:2px;top:0;font-size:12px;color:#bf4a3f;opacity:0;transition:opacity .3s;}
.field.err .msg{opacity:1;}
.submit{grid-column:1/-1;margin-top:12px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.btn-solid{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:19px 44px;background:var(--ink);color:var(--paper);font-family:'Pretendard';font-weight:600;font-size:16px;letter-spacing:.02em;border:0;cursor:pointer;position:relative;overflow:hidden;border-radius:3px;}
.btn-solid span{position:relative;z-index:2;transition:color var(--d-base);}
.btn-solid::before{content:"";position:absolute;inset:0;background:var(--brass);transform:translateY(101%);transition:transform var(--d-base) var(--e-scene);}
.btn-solid:hover::before{transform:translateY(0);}
.form__done{color:var(--brass);font-weight:600;font-size:15px;opacity:0;transition:opacity .4s;}
.form.sent .form__done{opacity:1;}

/* ===== FOOTER ===== */
.assoc{background:var(--paper);border-top:1px solid var(--line);padding:clamp(40px,5vh,58px) 0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.assoc__track{display:flex;align-items:center;gap:clamp(48px,5vw,72px);width:max-content;animation:marq 42s linear infinite;}
.assoc:hover .assoc__track{animation-play-state:paused;}
.assoc__track img{height:clamp(34px,3.4vw,44px);width:auto;object-fit:contain;opacity:.55;filter:grayscale(1);transition:opacity var(--d-base),filter var(--d-base);}
.assoc__track img:hover{opacity:1;filter:grayscale(0);}
@keyframes marq{to{transform:translateX(-50%);}}
.foot{background:var(--ink);color:rgba(255,255,255,.7);padding:clamp(66px,8vh,90px) 6vw clamp(42px,5vh,58px);}
.foot__top{display:flex;justify-content:space-between;gap:32px 60px;flex-wrap:wrap;align-items:center;padding-bottom:clamp(34px,4vw,50px);border-bottom:1px solid var(--line-dk);}
.foot__logo img{height:30px;filter:brightness(0) invert(1);opacity:.95;}
.foot__links{display:flex;gap:28px;font-size:14.5px;flex-wrap:wrap;}
.foot__links a{color:rgba(255,255,255,.6);transition:color var(--d-fast);}
.foot__links a:hover{color:#fff;}
.foot__sns{display:flex;gap:12px;}
.foot__sns a{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;transition:background var(--d-base) var(--e-out),transform var(--d-base) var(--e-out);}
.foot__sns a:hover{background:#fff;transform:translateY(-3px);}
.foot__sns img{height:16px;}
.foot__info{margin-top:clamp(30px,3.5vw,44px);font-size:14px;line-height:2.1;color:rgba(255,255,255,.5);}
.foot__info b{color:rgba(255,255,255,.85);font-weight:500;}
.foot__copy{margin-top:18px;font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.34);}


/* ===== 반응형 ===== */
@media (max-width:1024px){
  :root{--shell:calc(100vw - 10vw);}
  .about__top{grid-template-columns:1fr;gap:30px;align-items:start;}
  .tech__inner{grid-template-columns:1fr;gap:36px;}
  .contact__grid{grid-template-columns:1fr;gap:44px;}
  /* 제작시스템: 데스크톱 핀 → 태블릿·모바일 가로 스와이프 */
  .proc__scroll{display:none;}
  .proc__mobile{display:block;padding-bottom:clamp(56px,8vh,88px);}
  .proc__mtrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 6vw clamp(20px,3vh,28px);-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .proc__mtrack::-webkit-scrollbar{display:none;}
  .pcard{flex:0 0 min(78%,420px);scroll-snap-align:center;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:clamp(20px,4vw,28px);}
  .pcard__num{font-size:clamp(38px,9vw,46px);font-weight:800;color:var(--brass);line-height:1;margin-bottom:16px;font-variant-numeric:tabular-nums;}
  .pcard__img{aspect-ratio:16/10;border-radius:3px;overflow:hidden;margin-bottom:18px;background:var(--paper-2);}
  .pcard__img img{width:100%;height:100%;object-fit:cover;}
  .pcard h3{font-size:clamp(20px,5vw,23px);font-weight:800;margin-bottom:10px;letter-spacing:-.02em;}
  .pcard p{color:var(--graphite);font-size:clamp(15px,4vw,16px);line-height:1.8;}
  .proc__mbar{height:2px;background:var(--line);margin:0 6vw;position:relative;overflow:hidden;}
  .proc__mbar b{position:absolute;left:0;top:0;height:100%;background:var(--brass);width:calc(100% / 9);transition:transform .25s var(--e-out);transform-origin:left;}
}
@media (max-width:720px){
  .nav{top:14px;width:calc(100vw - 24px);}
  .main-menu-bar{height:60px;padding:0 10px 0 22px;}
  .menu{display:none;}
  .nav__burger{display:flex;}
  .hero__content{padding:0 5vw 13vh;}
  .section{padding:clamp(74px,10vh,96px) 5vw;}
  .tech{padding:clamp(74px,10vh,96px) 5vw;}
  .value{padding:clamp(84px,12vh,120px) 5vw;}
  .proc__intro{padding:clamp(74px,10vh,96px) 5vw clamp(28px,4vh,44px);}
  .about__thumbs{grid-template-columns:repeat(5,1fr);}
  .about__feature{aspect-ratio:4/3;}
  .form{grid-template-columns:1fr;}
  .value__cta{flex-direction:column;}
  .value__cta a{width:100%;justify-content:center;}
  .foot__top{flex-direction:column;gap:24px;}
}
@media (max-width:400px){
  .about__thumbs{gap:7px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .reveal,.lift>*,.hero__title .ln>span,.hero__sub{opacity:1!important;transform:none!important;}
  .mask::after{display:none;}.mask>img,.mask>.bg{transform:none!important;}
  .hero__slide.active .hero__media img{transform:none;}
  .assoc__track{animation:none;}
}

/* ============================================================
   [2026-08-09 batch2] main nav tighten / login / submenu / hero ring
   (appended -> overrides earlier rules)
   ============================================================ */
/* [req3] menu spacing tighter (remove full stretch) */
.menu{ width:auto; justify-content:center; gap:10px; margin:0 auto; }
.menu>li{ flex:0 0 auto; }
.menu>li>a{ padding:24px 14px; }
/* [req4] login icon on main nav (next to 고객센터) */
.menu-login{ display:flex; align-items:center; }
.menu-login>a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:rgba(255,255,255,.9); transition:all .28s var(--e-out); }
.menu-login>a:hover{ background:var(--brass); border-color:var(--brass); color:#111; }
.menu-login svg{ width:19px; height:19px; }
/* [req5] submenu font +2pt, keep dark bg/colors */
.submenu li a{ font-size:17px; }
/* [req2] hero ring: bottom-right -> bottom-center, keep simple */
.hero__ring{ right:auto; left:50%; bottom:5vh; transform:translateX(-50%) translateY(12px); }
.hero.ready .hero__ring{ transform:translateX(-50%); }
.hero.ready .hero__ring:hover{ transform:translateX(-50%) scale(1.06); }
@media (max-width:720px){ .hero__ring{ right:auto; left:50%; bottom:4.5vh; } }
/* ============================================================
   [2026-08-09 batch3] main nav re-layout / hero title center / ring->gold dots
   ============================================================ */
/* nav: logo(left) | menu(center, wider) | login(far right) */
.main-menu-bar>nav{ flex:1 1 auto; display:flex; justify-content:center; }
.menu{ width:auto; justify-content:center; gap:30px; margin:0; }
.menu>li{ flex:0 0 auto; }
.menu>li>a{ padding:24px 6px; }
.nav__login{ flex:0 0 auto; display:flex; align-items:center; margin-left:40px; }
.nav__login>a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(255,255,255,.45); border-radius:50%; color:rgba(255,255,255,.9); transition:all .28s var(--e-out); }
.nav__login>a:hover{ background:var(--brass); border-color:var(--brass); color:#111; }
.nav__login svg{ width:19px; height:19px; }
@media (max-width:720px){ .nav__login{ display:none; } .main-menu-bar>nav{ flex:0 0 auto; } }

/* hero title/sub -> vertical center, keep LEFT align */
.hero__content{ top:0; bottom:0; padding:0 6vw; display:flex; align-items:center; justify-content:flex-start; }
.hero__inner{ margin:0; }
@media (max-width:720px){ .hero__content{ padding:0 5vw; } }

/* hero progress: ring hidden -> gold-fill dots (bottom center) */
.hero__ring{ display:none !important; }
.hero__dots{ position:absolute; left:50%; bottom:5.5vh; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:9px; opacity:0; transition:opacity 1s var(--e-out) .8s; }
.hero.ready .hero__dots{ opacity:1; }
.hero__dot{ position:relative; width:9px; height:9px; padding:0; border:0; background:rgba(255,255,255,.34); border-radius:20px; cursor:pointer; overflow:hidden; -webkit-appearance:none; appearance:none; transition:width .42s var(--e-out),background .42s; }
.hero__dot:hover{ background:rgba(255,255,255,.6); }
.hero__dot.active{ width:46px; background:rgba(255,255,255,.22); }
.hero__dot-fill{ position:absolute; left:0; top:0; height:100%; width:0; background:#DDBD7E; border-radius:20px; }
.hero__dot.active .hero__dot-fill.run{ width:100%; transition:width 6s linear; }
@media (prefers-reduced-motion:reduce){ .hero__dot.active .hero__dot-fill{ width:100%; transition:none; } }
/* [2026-08-09 batch4] main hero subtitle +2pt */
.hero__sub{ font-size:clamp(17px,1.15vw,19px); }
/* ============================================================
   [2026-08-09 batch5] main nav menu right-align + hero baseline
   ============================================================ */
.main-menu-bar>nav{ flex:0 0 auto; margin-left:auto; justify-content:flex-end; }
.menu{ gap:40px; }
.main-menu-bar>.nav__search{ margin-left:44px; }
.main-menu-bar>.nav__lang{ margin-left:40px; }
.main-menu-bar>.nav__user{ margin-left:40px; }
/* [2026-08-09 batch8] 히어로 강조어: 슬라이드 등장과 동시에 좌→우 골드 채움(hover 불필요) */
.hero__title .hl{
  display:inline-block;
  background:
    linear-gradient(90deg,#C69A34,#E3C179) left center / 0% 100% no-repeat,
    linear-gradient(90deg,#fff,#fff) left center / 100% 100% no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  transition:background-size 1.1s cubic-bezier(.22,1,.36,1) .55s;
}
.hero__slide.seq .hero__title .hl{ background-size:100% 100%,100% 100%; }
.hero__title .hl:hover{ filter:brightness(1.08); }
/* [2026-08-28] 히어로 강조어 골드 채움은 "동작 줄이기" 설정에서도 재생한다.
   기존에는 이 블록이 transition 을 끄고 처음부터 100% 골드로 고정해서,
   그 설정이 켜진 폰에서는 골드 채움 연출이 아예 보이지 않았다.
   화면이 흔들리는 연출이 아니라 색이 차오르는 것뿐이라 그대로 둔다. */
.main-menu-bar>.nav__login{ margin-left:40px; }
/* hero content left aligned to nav baseline on wide screens */
.hero__content{ padding-left:max(6vw, calc((100vw - 1447px)/2 + 35px)); padding-right:6vw; }

/* ============================================================
   [2026-08-09] #2 tech 섹션 리디자인(로고박스·타이틀 제거 → 소재 애니메이션 카드) / #4 공정 이미지 16:9
   ============================================================ */
.tech__inner--v2{ display:block !important; grid-template-columns:none !important; max-width:960px; text-align:center; }
.tech__inner--v2 .tech__desc{ font-size:clamp(20px,1.8vw,24px); font-weight:700; line-height:1.9; color:#2b2b2b; max-width:900px; margin:0 auto; }
/* [2026-08-11] 기술 섹션 화이트 배경 전환 */
.tech{ background:var(--paper) !important; color:#141110 !important; min-height:auto !important; padding-top:92px !important; padding-bottom:148px !important; }
.tech__scrim{ display:none !important; }
/* [2026-08-11] 메인 통계(tech) 섹션에도 지구 배경 적용 — WHO WE ARE와 동일한 연그레이 지구 */
.tech__bg{ display:none !important; }
/* 화면 폭과 무관하게: 하단 고정 높이 띠 + 윗부분 페이드로 지구를 자연스럽게 노출(칼선 제거) */
.tech__bg--earth{ display:block !important; left:0 !important; right:0 !important; top:auto !important; bottom:-40px !important; height:360px !important; filter:none !important; background-repeat:no-repeat !important; background-position:center 30% !important; background-size:cover !important; -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 46%, #000 100%) !important; mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 46%, #000 100%) !important; opacity:1 !important; z-index:0 !important; }
.tech .tstat__num{ color:#141110; }
.tech .tstat__label{ color:#8a8a8a; }
.tech .tstat__track{ stroke:rgba(20,17,16,.12); }
.tech__inner--v2 .tech__materials{ display:flex; justify-content:center; gap:clamp(14px,2.6vw,32px); margin-top:clamp(36px,5vw,58px); border:0 !important; padding:0 !important; flex-wrap:wrap; }
.tech__mcard{ min-width:150px; padding:26px 26px; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:rgba(255,255,255,.03); transition:transform .4s var(--e-out), border-color .4s var(--e-out), background .4s var(--e-out); }
.tech__mcard b{ display:block; font-size:22px; font-weight:700; letter-spacing:.06em; color:#DDBD7E; }
.tech__mcard span{ display:block; margin-top:8px; color:rgba(255,255,255,.55); font-size:14px; }
.tech__mcard:hover{ transform:translateY(-7px); border-color:rgba(221,189,126,.5); background:rgba(221,189,126,.06); }
/* #4 공정 이미지 16:9 */
.proc__media{ aspect-ratio:16/9 !important; }
.pcard__img{ aspect-ratio:16/9 !important; }

/* ============================================================
   [2026-08-10 #8] 정교기술 섹션 — GOLD/SILVER/BRASS 원형 카드 리디자인 (임팩트)
   ============================================================ */
.tech__mcard{ width:174px !important; height:174px !important; min-width:0 !important; padding:0 !important;
  border-radius:50% !important; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  position:relative; border:1px solid rgba(221,189,126,.4) !important;
  background:radial-gradient(circle at 50% 32%, rgba(221,189,126,.16), rgba(221,189,126,0) 68%) !important; }
.tech__mcard::before{ content:''; position:absolute; inset:11px; border-radius:50%; border:1px solid rgba(221,189,126,.16); pointer-events:none; }
.tech__mcard b{ font-size:25px !important; letter-spacing:.08em;
  background:linear-gradient(180deg,#f0d9a8,#c19a3e); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#DDBD7E; }
.tech__mcard span{ margin-top:2px !important; font-size:14px !important; color:rgba(255,255,255,.62) !important; }
.tech__mcard:hover{ transform:translateY(-8px) !important; border-color:#DDBD7E !important;
  box-shadow:0 30px 62px -28px rgba(185,138,52,.75);
  background:radial-gradient(circle at 50% 32%, rgba(221,189,126,.27), rgba(221,189,126,0) 66%) !important; }
@media (max-width:520px){ .tech__mcard{ width:140px !important; height:140px !important; } }

/* ============================================================
   [2026-08-10 #7] 회사소개 — 피처 이미지 라운드 + 하단 10장 마퀴(무한 흐름)
   ============================================================ */
/* [2026-08-10] 회사소개(about) — 큰 이미지 + 이미지 내부 하단 골드 도트, 본문 +2pt */
.about__feature{ border-radius:18px !important; box-shadow:0 34px 70px -34px rgba(0,0,0,.42); }
.about__body{ font-size:calc(var(--fz-body) + 2.5px) !important; }
.about__dots{ position:absolute; left:0; right:0; bottom:16px; z-index:3; display:flex !important; justify-content:center; align-items:center; gap:9px; margin:0; }
.about__dots .adot{ width:8px; height:8px; padding:0; border:0; border-radius:999px; background:rgba(255,255,255,.5); cursor:pointer; transition:width .38s var(--e-out), background .38s var(--e-out); }
.about__dots .adot:hover{ background:rgba(255,255,255,.78); }
.about__dots .adot.on{ width:28px; background:var(--brass); }

/* [2026-08-10] 기술 섹션 — 골드 원형 통계 (카운트업 + 링 필 애니메이션) */
.tech__stats{ display:grid; grid-template-columns:repeat(4,1fr); align-items:start; justify-items:center; gap:clamp(14px,2.4vw,40px); margin-top:clamp(42px,5vw,66px); }
.tstat{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; }
.tstat__ring{ position:relative; width:min(100%,204px); aspect-ratio:1; }
.tstat__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.tstat__track{ fill:none; stroke:rgba(255,255,255,.12); stroke-width:6.5; }
.tstat__prog{ fill:none; stroke:url(#gmnGold); stroke-width:6.5; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:327; transition:stroke-dashoffset 1.6s var(--e-out); }
.tstat__val{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; line-height:1; }
.tstat__num{ font-size:clamp(34px,3.2vw,48px); font-weight:800; color:#fff; font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-0.025em; }
.tstat__val i{ font-size:clamp(18px,1.6vw,22px); color:#141110; font-weight:700; font-style:normal; margin-top:3px; }
.tstat__label{ font-size:clamp(15px,1.2vw,17px); color:rgba(255,255,255,.66); font-weight:600; letter-spacing:.01em; }
@media (max-width:640px){ .tech__stats{ grid-template-columns:repeat(2,1fr); gap:30px 20px; } }

/* ============================================================
   [2026-08-10 #1] 협업 문의 폼 — 라벨/입력 +2pt, 텍스트박스 확대, 문의 버튼 정리
   ============================================================ */
.contact__lead{ margin-top:16px; }
.contact .field label{ font-size:17px !important; margin-bottom:12px; }
.contact .field input,
.contact .field textarea{ font-size:18px !important; padding:15px 16px !important; line-height:1.5; }
.contact .field input{ height:56px; }
.contact .field textarea{ height:230px !important; border:1px solid #ccc !important; border-radius:5px !important; }
.contact .form{ gap:32px 26px; }
.contact .submit{ margin-top:-18px !important; }

/* [2026-08-10] SweetAlert 골드 테마 (메인 협업문의 팝업 전용) */
.swal2-popup{ border-radius:14px !important; }
.swal2-popup .swal2-confirm.swal2-styled{ background:#141110 !important; color:#DDBD7E !important; box-shadow:none !important; border:0 !important; font-weight:700 !important; }
.swal2-popup .swal2-confirm.swal2-styled:hover{ background:#000 !important; }
.swal2-popup .swal2-confirm.swal2-styled:focus{ box-shadow:0 0 0 3px rgba(221,189,126,.4) !important; }
.swal2-popup .swal2-cancel.swal2-styled{ background:#f0ead9 !important; color:#8a7a55 !important; box-shadow:none !important; }
.swal2-popup .swal2-cancel.swal2-styled:hover{ background:#e7dec6 !important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-warning,
.swal2-icon.swal2-question{ border-color:#DDBD7E !important; color:#c99b43 !important; }
.swal2-icon.swal2-success .swal2-success-ring{ border-color:rgba(221,189,126,.55) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:#c99b43 !important; }

/* ===== [2026-08-26] 메인 주가지수 요약 (클릭 시 /Market/) ===== */
.quote-strip{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(62% 120% at 84% -12%, rgba(216,181,106,.20) 0%, rgba(216,181,106,0) 62%),
    radial-gradient(58% 110% at 6% 118%, rgba(185,138,52,.14) 0%, rgba(185,138,52,0) 60%),
    linear-gradient(180deg,#191510 0%,#0e0c0a 100%);
  border-top:0; border-bottom:0;
}
/* 골드바 사진 배경 — 카드 위아래로 골드바가 걸쳐 보이도록 확대·배치하고 불투명도로 눌러준다 */
.qs-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url('/assets/images/mainArt/quote_goldbar_bg.jpg') 72% 62% / 155% auto no-repeat;
}
.qs-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,9,8,.60) 0%, rgba(10,9,8,.70) 50%, rgba(10,9,8,.80) 100%);
}
@media (max-width:900px){
  /* 좁은 화면에서는 세로가 길어져 확대 배치가 빈 공간을 만든다 → cover 로 */
  .qs-bg{ background-size:cover; background-position:center 28%; }
}
.quote-strip > .shell{ position:relative; z-index:2; }
/* 위·아래 경계에 금빛 실선 한 줄 */
.quote-strip::before,
.quote-strip::after{
  content:""; position:absolute; left:0; right:0; height:1px; z-index:1;
  background:linear-gradient(90deg,rgba(216,181,106,0) 0%,rgba(216,181,106,.5) 50%,rgba(216,181,106,0) 100%);
}
.quote-strip::before{ top:0; }
.quote-strip::after{ bottom:0; opacity:.55; }
/* ===== [2026-09-01] 오늘의 시세 =====
   한 종목이 한 줄. 값마다 자기 칸을 하나씩 갖고 나란히 선다.
   화면 폭을 그대로 쓰되 칸 비율을 정해 네 줄이 같은 자리에 맞는다.
   그래프 uPlot(MIT) / 값이 바뀔 때만 굴러가는 숫자 NumberFlow(MIT) */

/* 배경 골드바가 밝아 글자를 삼킨다. 글자가 놓이는 쪽을 눌러준다. */
.quote-strip .qs-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg,
    rgba(5,5,4,.97) 0%, rgba(5,5,4,.95) 55%, rgba(5,5,4,.88) 80%, rgba(5,5,4,.78) 100%);
}
@media (max-width:900px){
  .quote-strip .qs-bg::before{ background:linear-gradient(180deg,rgba(8,7,6,.90),rgba(8,7,6,.93)); }
}

/* 머리 — 제목은 왼쪽, 기준시각과 환율은 오른쪽. 표 윗선에 붙여 둔다. */
.qs-hd{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  padding:0 6px 11px;
}
.qs-h2{
  font-family:'Noto Sans bold'; font-size:clamp(23px,2.3vw,34px);
  letter-spacing:-.045em; color:#fff; margin:0;
}
.qs-when{
  margin:0; font-size:13.5px; color:rgba(233,226,215,.55);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
  text-align:right; white-space:nowrap; line-height:1.2;
}
.qs-when b{ font-family:'Noto Sans bold'; font-weight:400; color:rgba(246,242,234,.88); }
.qs-kd{ color:rgba(233,226,215,.38); font-size:12px; }

.qs-rows{ border-top:1px solid rgba(233,226,215,.16); }
.qs-row{
  display:grid;
  /* 이름 · 원/g · 원/3.75g · 국제가 · 등락 · 흐름 */
  grid-template-columns:minmax(130px,.9fr) minmax(190px,1.35fr) minmax(150px,1.05fr)
                        minmax(130px,.9fr) minmax(160px,1.1fr) minmax(150px,1.05fr) minmax(120px,.85fr);
  align-items:center; column-gap:clamp(18px,1.8vw,34px);
  padding:16px 6px;
  border-bottom:1px solid rgba(233,226,215,.10);
  transition:background .26s ease;
}
.qs-row:hover{ background:rgba(255,255,255,.045); }

/* 금은 금마니의 주력이다. 나머지 셋보다 한 단계 크게 세운다. */
.qs-row--lead{ padding-top:21px; padding-bottom:21px; }
.qs-row--lead .qs-row__nm{ font-size:clamp(18px,1.5vw,22px); color:#fff; }
.qs-row--lead .qs-row__nm span{ color:rgba(224,189,119,.62); }
.qs-row--lead .qs-c--main .qs-num{ font-size:clamp(26px,2.3vw,32px); }
.qs-row--lead .qs-c--main em{ font-size:12.5px; color:rgba(233,226,215,.55); min-width:36px; }
/* :not(--main) 을 반드시 붙인다. 안 붙이면 같은 특정도라 아래 규칙이
   대표값(원/g)까지 작게 덮어써 금 줄이 오히려 제일 작아진다. */
.qs-row--lead .qs-c:not(.qs-c--main) .qs-num{ font-size:clamp(15px,1.2vw,17px); color:rgba(246,242,234,.8); }
.qs-row--lead .qs-chg b{ font-size:17px; }
.qs-row--lead .qs-chg u{ font-size:13.5px; }
.qs-row--lead .qs-row__sp{ height:46px; opacity:.72; }

/* 이름 */
.qs-row__nm{
  font-family:'Noto Sans bold'; font-size:clamp(16px,1.35vw,19px);
  letter-spacing:-.04em; color:#f6f2ea;
  display:flex; align-items:baseline; gap:9px;
  transform-origin:left center;
  transition:color .26s ease, transform .34s cubic-bezier(.22,1,.36,1);
}
.qs-row__nm span{
  font-family:'Noto Sans'; font-size:11.5px; letter-spacing:.05em;
  color:rgba(233,226,215,.34); transition:color .26s ease;
}
.qs-row:hover .qs-row__nm{ color:#fff; transform:scale(1.28); }
.qs-row:hover .qs-row__nm span{ color:rgba(224,189,119,.8); }

/* 값 칸 — 숫자는 오른쪽 끝을 맞추고 단위는 폭을 고정해 세로로 줄을 세운다 */
.qs-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
number-flow.qs-num{ display:inline-block; }
.qs-c{
  display:flex; align-items:baseline; justify-content:flex-end; gap:7px;
  min-width:0; white-space:nowrap;
}
.qs-c em{
  font-style:normal; font-size:12px; color:rgba(233,226,215,.52);
  min-width:62px; text-align:left;
}
.qs-c .qs-num{
  font-family:'Noto Sans bold'; font-weight:400; font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.03em; color:rgba(246,242,234,.92);
}
/* 원/g 이 이 줄의 대표값이다. 나머지 값보다 확실히 크게 세운다. */
.qs-c--main .qs-num{
  font-size:clamp(20px,1.7vw,24px); line-height:1; letter-spacing:-.045em; color:#fff;
  transition:color .26s ease, text-shadow .26s ease;
}
.qs-c--main em{ font-size:12.5px; color:rgba(233,226,215,.55); min-width:36px; }
.qs-row:hover .qs-c--main .qs-num{ color:#fbf3e2; text-shadow:0 0 22px rgba(224,189,119,.3); }
.qs-c--usd b{
  font-family:'Noto Sans'; font-weight:400; font-size:clamp(15px,1.3vw,17px);
  letter-spacing:-.02em; color:rgba(233,226,215,.7);
  font-variant-numeric:tabular-nums; transition:color .26s ease;
}
.qs-c--usd em{ min-width:30px; font-size:11.5px; color:rgba(233,226,215,.45); }
/* 국내(KRX) 값. 있는 종목만 값이 들어온다. */
/* KRX 칸만 두 줄이다. 숫자와 기준일이 한 덩어리로 붙어 보이도록
   두 줄의 가운데를 맞추고 간격을 좁힌다. */
/* 두 줄 덩어리를 가운데 맞추면 숫자가 다른 값보다 위로 떠 보인다.
   숫자가 옆 값들과 같은 눈높이에 오도록 덩어리째 살짝 내린다. */
.qs-c--krx{ flex-direction:column; align-items:center; justify-content:center; gap:0;
  transform:translateY(5px); }
.qs-c--krx b{
  font-family:'Noto Sans bold'; font-weight:400; font-size:clamp(17px,1.5vw,21px);
  letter-spacing:-.03em; color:rgba(246,242,234,.92); font-variant-numeric:tabular-nums;
  line-height:1; display:block;
}
.qs-c--krx em{ min-width:0; text-align:center; line-height:1; font-size:11.5px;
  color:rgba(233,226,215,.45); margin-top:3px; display:block; }
.qs-none{ font-size:12px; color:rgba(233,226,215,.4); white-space:nowrap; line-height:1; }
.qs-row--lead .qs-c--krx b{ font-size:clamp(17px,1.5vw,21px); }
.qs-row:hover .qs-c--usd b{ color:rgba(233,226,215,.85); }

/* 등락 — 실제 전일 종가가 있을 때만 값이 들어온다 */
.qs-row__ch{ display:flex; justify-content:flex-end; }
.qs-chg{
  display:inline-flex; align-items:baseline; gap:5px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.qs-chg i{ font-style:normal; font-size:10px; min-width:10px; text-align:right; }
.qs-chg b{ font-family:'Noto Sans bold'; font-weight:400; font-size:15px; letter-spacing:-.03em;
  min-width:52px; text-align:right; }
.qs-chg u{ text-decoration:none; font-size:12.5px; opacity:.9; min-width:54px; text-align:right; }
.qs-chg--up{ color:#ff6a6f; }
.qs-chg--dn{ color:#6ba6f5; }
.qs-chg--flat{ color:rgba(233,226,215,.4); font-size:13.5px; }

/* 오늘 흐름 */
.qs-row__sp{
  height:38px; width:100%; min-width:0; opacity:.6;
  transition:opacity .28s ease;
}
.qs-row:hover .qs-row__sp{ opacity:1; }

.qs-base{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 6px 0; flex-wrap:wrap;
}
.qs-meta{ font-size:12px; color:rgba(233,226,215,.4); }
.qs-go{
  font-family:'Noto Sans bold'; font-size:14.5px; color:#e0bd77; text-decoration:none;
  border-bottom:1px solid rgba(224,189,119,.35); padding-bottom:3px;
  transition:color .25s ease, border-color .25s ease;
}
.qs-go:hover{ color:#f6e0ad; border-color:rgba(246,224,173,.8); }
.qs-empty{ padding:28px 0; text-align:center; color:rgba(233,226,215,.4); font-size:14px; }

.quote-strip .u-wrap, .quote-strip .uplot,
.quote-strip .u-over, .quote-strip .u-under{ background:transparent; }

@media (prefers-reduced-motion:reduce){
  .qs-row,.qs-row__nm,.qs-row__sp,.qs-c--main .qs-num,.qs-c--usd b{ transition:none; }
  .qs-row:hover .qs-row__nm{ transform:none; }
}

/* 태블릿 : 국제가를 접는다 */
@media (max-width:1440px){
  .qs-row{
    grid-template-columns:minmax(110px,1fr) minmax(170px,1.4fr) minmax(140px,1.05fr)
                          minmax(150px,1.1fr) minmax(130px,1fr) minmax(110px,.9fr);
    column-gap:18px; padding:18px 4px;
  }
  .qs-c--usd{ display:none; }
  .qs-c em{ min-width:56px; }
}

/* 폰 : 두 줄로 접되 네 종목이 스크롤 없이 다 보인다 */
@media (max-width:640px){
  .qs-hd{ display:block; padding:0 0 12px; }
  .qs-when{ text-align:left; margin-top:6px; white-space:normal; font-size:12.5px; }
  .qs-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"nm ch" "pr sp" "don sp";
    gap:5px 12px; padding:15px 0;
  }
  .qs-row__nm{ grid-area:nm; font-size:18px; }
  .qs-row__nm span{ font-size:10.5px; }
  .qs-row:hover .qs-row__nm{ transform:none; }
  .qs-c--main{ grid-area:pr; justify-content:flex-start; }
  .qs-c--main .qs-num{ font-size:clamp(23px,6.6vw,29px); }
  .qs-row--lead .qs-c--main .qs-num{ font-size:clamp(31px,9.4vw,40px); }
  .qs-row--lead .qs-row__nm{ font-size:21px; }
  .qs-row--lead{ padding-top:19px; padding-bottom:19px; }
  .qs-c--main em{ font-size:12.5px; min-width:0; }
  .qs-c:not(.qs-c--main){ grid-area:don; justify-content:flex-start; }
  .qs-c:not(.qs-c--main) .qs-num{ font-size:14px; }
  .qs-c em{ min-width:0; font-size:11px; }
  .qs-c--usd{ display:none; }
  .qs-c--krx{ grid-area:don; justify-content:flex-start; }
  .qs-c--krx b{ font-size:14px; }
  .qs-row:not(.qs-row--lead) .qs-c--krx{ display:none; }
  .qs-row__ch{ grid-area:ch; align-items:flex-start; }
  .qs-chg b{ font-size:15px; min-width:0; }
  .qs-chg u{ font-size:12.5px; min-width:0; }
  .qs-row__sp{ grid-area:sp; height:34px; width:92px; align-self:center; opacity:.8; }
  .qs-base{ padding:14px 0 0; }
  .qs-meta{ font-size:11px; }
  .qs-go{ font-size:13.5px; }
}







/* ============================================================
   [2026-08-26] 모바일 히어로 재구성 (≤720px 전용 · 데스크톱 무변경)

   문제의 구조
   - .hero__content 는 화면 좌우를 6vw(390px에서 23px)만 남기고 꽉 채운다.
     그런데 .hero__nav(화살표)는 top:50% 로 그 한가운데 얹혀 있다.
     즉 화살표 자리와 본문 자리가 처음부터 같은 자리라 반드시 겹친다.
   - 위 6vw 값은 파일 뒤쪽 전역 규칙
     `.hero__content{padding-left:max(6vw,...);padding-right:6vw}` 가
     앞쪽 모바일 규칙(`padding:0 5vw`)을 덮어써서 생긴 것이다.
     모바일에도 데스크톱 여백이 그대로 적용돼 있었다.
   - 본문은 세로 중앙 정렬이라, 화면이 짧은 실제 폰에서는 위로 올라와
     상단 캡슐 메뉴(30~100px)까지 파고든다.

   재구성 방식
   - 좌우 중앙에 있던 화살표를 하단 컨트롤 줄로 내린다. 본문 위에 아무것도 없다.
   - 하단 한 줄에 [화살표 좌] [인디케이터 중앙] [플로팅 아이콘 우] 로 역할을 나눈다.
   - 본문은 상단바 아래 ~ 하단 컨트롤 위 사이에서만 세로 중앙 정렬한다.
   ============================================================ */
@media (max-width:720px){

  /* 히어로 높이: min-height:640px 는 화면이 짧은 폰에서 히어로가 뷰포트보다 커지게 만들어
     하단 화살표·인디케이터를 화면 밖으로 밀어낸다. 폰에서는 화면 높이에 맞춘다. */
  .hero{ min-height:480px; }

  /* 본문: 좌우 20px, 상단바(최대 100px)와 하단 컨트롤(약 92px)을 피한 구역 안에서 중앙 */
  .hero__content{
    padding-left:20px;
    padding-right:64px;   /* 우측 플로팅 아이콘 열(10+48)만큼 비워 본문과 겹치지 않게 */
    padding-top:104px;    /* 상단 캡슐 메뉴(30~100) 아래 */
    padding-bottom:96px;  /* 하단 컨트롤 줄 위 */
  }
  .hero__title{
    font-size:clamp(26px,8.2vw,34px);
    line-height:1.18;
    max-width:none;
  }
  .hero__sub{
    margin-top:18px;
    font-size:16px;
    line-height:1.72;
  }
  .hero__sub span+span{ margin-top:4px; }

  /* 화살표: 세로 중앙에서 빼내 하단 왼쪽으로. 본문과 물리적으로 분리된다. */
  .hero__nav{
    top:auto;
    bottom:calc(5.5vh - 15px);
    transform:none;
    width:40px;
    height:40px;
    opacity:0;
  }
  .hero.ready .hero__nav{ opacity:.85; }
  .hero__nav.prev{ left:8px; }
  .hero__nav.next{ left:52px; right:auto; }
  .hero__nav.prev:hover,
  .hero__nav.next:hover{ transform:none; }
  .hero__nav svg{ width:24px; height:24px; }

  /* 인디케이터: 화살표와 같은 줄. 가운데 정렬을 풀고 화살표 오른쪽에 붙여
     [화살표][인디케이터] 좌측 클러스터 + [플로팅 아이콘] 우측 으로 역할을 나눈다.
     320px 에서도 화살표와 12px, 플로팅과 13px 간격이 남는다. */
  .hero__dots{ left:104px; transform:none; gap:5px; }
  .hero__dot{ width:6px; height:6px; }
  .hero__dot.active{ width:26px; }
}

/* 스크립트가 아예 실행되지 않아도 콘텐츠가 사라지지 않게 (JS 성공 시엔 개입 없음) */
html:not(.gmn-js) .reveal,
html:not(.gmn-js) .lift,
html:not(.gmn-js) .mask{ opacity:1 !important; transform:none !important; }

/* [2026-08-26] 모바일 인스타 3열 + 정교기술 대비 (≤720px 전용)
   인스타는 실제 피드와 같은 3열 유지. 560px 이하에서 2열로 떨어지던 것을 되돌린다. */
@media (max-width:560px){
  .insta-feed__grid{ grid-template-columns:repeat(3,1fr); gap:6px; }
}
@media (max-width:720px){
  .tech .tstat__label{ color:#5f5f5f; }
  .tech__inner--v2 .tech__desc{ color:#1e1e1e; }
  .tech__bg--earth{ opacity:.55 !important; }
}

/* [2026-08-26] 데스크톱 인스타 3열 복구
   실제 인스타 피드가 3열이라 그 형태를 그대로 살린다. 5열은 카드가 작아져 피드처럼 보이지 않음.
   (8/25에 3열로 바꿨던 것이 이후 업로드로 5열로 되돌아가 다시 지정) */
.insta-feed__grid{ grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.1vw,16px); max-width:900px; margin-left:auto; margin-right:auto; }
@media (max-width:900px){ .insta-feed__grid{ grid-template-columns:repeat(3,1fr); max-width:none; } }

/* ============================================================
   [2026-08-27] 모바일 본문 체계 정리 (≤720px 전용 · 데스크톱 무변경)

   문제: 폰에 데스크톱 크기가 그대로 들어와 있었다.
     · 기술 본문 20px/굵기700/줄간격38px  → 본문인데 제목처럼 읽힘, 5줄 차지
     · 통계 링 167px = 화면 폭의 43%      → 4개가 화면 1.5개를 먹음
     · 가치 제목 42px                      → 한 줄에 9글자
     · 문의 내용칸 230px                   → 폰 화면의 1/3
     · 인스타 제목 줄간격 47.6px           → 여백만 큼

   기준: 제목은 제목답게 크고, 본문은 본문답게 읽히게.
        한 화면에 한 덩어리가 들어오도록 크기를 낮춘다.
   ============================================================ */
@media (max-width:720px){

  /* 기술 섹션 본문 — 제목처럼 굵던 것을 본문 굵기로 */
  .tech__inner--v2 .tech__desc{
    font-size:16px;
    font-weight:500;
    line-height:1.68;
    max-width:34ch;
  }

  /* 통계 링 — 화면 폭의 43% → 30%. 4개가 한 화면에 들어옴 */
  .tech__stats{ gap:clamp(18px,5vw,28px) 12px; }
  .tstat__ring{ width:118px; height:118px; }
  .tstat__num{ font-size:26px; }
  .tstat__val i{ font-size:12px; }
  .tstat__label{ font-size:13px; margin-top:10px; }

  /* 완성가치 — 42px 는 폰에서 한 줄 9글자 */
  /* .value h2 (구체성 0,1,1) 가 앞서 지정하고 있어 태그를 함께 적어 이긴다 */
  .value h2.value__title{ font-size:clamp(26px,7.4vw,32px); line-height:1.22; }
  .value__sub{ font-size:16px; line-height:1.7; }

  /* 문의 — 내용칸이 화면의 1/3 이었다 */
  .contact__lead{ font-size:16px; line-height:1.7; }
  /* 앞쪽에 height:230px !important / font-size:18px !important 가 있어 함께 !important */
  .contact .field textarea{ height:132px !important; min-height:132px !important; font-size:16px !important; }
  .contact .field input{ font-size:16px !important; }

  /* 인스타 제목 — 줄간격만 컸다 */
  .insta-feed__head h2{ font-size:24px; line-height:1.25; }
  .insta-feed__head p{ font-size:15px; line-height:1.65; }
}

/* ============================================================
   [2026-08-27] 모바일 히어로 — 폰 기준 재구성 (≤720px 전용)

   주의: 상단바 스타일은 gmnNav.css 에 있고 그 파일이 이 파일보다
        나중에 로드된다(index.asp 77 → 79 → 143). 선택자도
        `.nav .main-menu-bar` 로 더 구체적이라 일반 규칙으로는 못 이긴다.
        gmnNav.css 는 다른 담당 영역이라 건드리지 않고,
        여기서 구체성을 맞추고 !important 로 덮는다. (그 파일엔 !important 0개)
   ============================================================ */
@media (max-width:720px){

  /* ① 캡슐 헤더 제거 → 우측 상단 햄버거만 */
  .nav{
    top:12px !important;
    left:auto !important;
    right:12px !important;
    width:auto !important;
    transform:none !important;
  }
  .nav .main-menu-bar{
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .nav .nav__logo{ display:none !important; }
  .nav .nav__burger{
    display:flex !important;
    width:44px; height:44px;
    margin-left:0 !important;
    border-radius:50%;
    background:rgba(18,18,20,.34);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  body.mnav-open .nav .nav__burger{ background:transparent; border-color:transparent; backdrop-filter:none; }

  /* ③ 보조 설명 제거 · ④ 화살표 제거(스와이프로 이동) */
  .hero__sub{ display:none !important; }
  .hero__nav{ display:none !important; }

  /* ② 제목만 남기고 하단에 앉힌다.
        화면 한가운데 떠 있으면 기댈 데가 없어 허전하다.
        인디케이터 바로 위에 정렬해 포스터 캡션처럼 자리를 잡는다. */
  .hero__content{
    align-items:flex-end !important;
    padding-left:20px;
    padding-right:20px;
    padding-top:22vh;
    padding-bottom:clamp(104px,17vh,150px);
  }
  .hero__title{
    font-size:clamp(25px,7vw,31px);
    line-height:1.28;
    letter-spacing:-.032em;
  }

  /* ⑤ 인디케이터 중앙 정렬 */
  .hero__dots{ left:50% !important; transform:translateX(-50%) !important; margin-left:0 !important; gap:6px; }
}

/* ============================================================
   [2026-08-28] 모바일 히어로 이미지 — 세로형 전용 교체
   기존 2524x900 초광각 사진을 폰 비율(1170x2532)로 새로 제작해 교체했다.
   더 이상 가로 사진을 억지로 잘라 쓰지 않으므로, 장별로 잡아두었던
   object-position 보정과 시작 확대를 걷어낸다.
   3번만 아직 기존 가로 사진이라 초점 보정을 남긴다.
   ============================================================ */
@media (max-width:720px){
  .hero__media img{ object-position:center center; }
  /* 3번은 아직 가로 원본(2524x900) — 반지가 73% 지점에 있어 보정 유지 */
  .hero__slide:nth-child(3) .hero__media img{ object-position:79% 60%; }

  /* 세로 사진이라 시작 확대를 키워도 잘림이 없다. 원래 연출값으로 되돌린다. */
  .hero__media img{ transform:scale(1.10); }
  .hero__slide.active .hero__media img{ transform:scale(1); }
}

/* ============================================================
   [2026-08-27] 모바일 통계 4열 + 기술 본문 3줄 (≤720px 전용)
   - @media(max-width:640px) 가 2열로 떨어뜨리고 있어 1행 4개로 되돌린다.
   - 본문은 마크업의 <br> 때문에 "기반 플랫폼." 이 외톨이 줄이 된다.
     폰에서는 <br> 을 무시하고 자연스럽게 흘려 3줄로 맞춘다.
   ============================================================ */
@media (max-width:720px){

  /* 한 줄에 4개 — 393px 기준 원 78px + 간격 8px */
  .tech__stats{
    grid-template-columns:repeat(4,1fr) !important;
    gap:10px 7px !important;
    align-items:start;
  }
  .tstat{ gap:8px; }
  .tstat__ring{ width:78px; height:78px; }
  .tstat__num{ font-size:17px; letter-spacing:-.03em; }
  .tstat__val i{ font-size:9.5px; }
  .tstat__label{ font-size:11px; margin-top:6px; line-height:1.3; word-break:keep-all; }

  /* 본문 3줄 — <br> 해제 후 균형 잡힌 줄바꿈 */
  .tech__inner--v2 .tech__desc{
    font-size:14.5px;
    line-height:1.72;
    max-width:none;
    text-wrap:balance;
  }
  .tech__inner--v2 .tech__desc br{ display:none; }
}

/* ============================================================
   [2026-08-27] 모바일 기술 섹션 여백·링 마감 (≤720px 전용)
   - 섹션 여백이 데스크톱 값(위 92 / 아래 148)이라 통계 아래가 148px 비었다.
     폰에서는 화면의 1/4 을 빈 칸이 먹는다. 콘텐츠에 맞게 조인다.
   - 링이 118 → 78px 로 작아졌는데 선 두께(6.5)는 그대로라 굵어 보인다.
     작은 원에서는 선이 가늘어야 정교해 보이므로 비율을 맞춘다.
   - 지구 배경 띠도 360px 고정이라 줄어든 섹션에 비해 과하다.
   ============================================================ */
@media (max-width:720px){
  .tech{
    padding-top:64px !important;
    padding-bottom:76px !important;
  }
  .tech__stats{ margin-top:34px !important; }
  .tstat__track, .tstat__prog{ stroke-width:5.2; }
  .tech__bg--earth{ height:210px !important; bottom:-16px !important; }
}

/* ============================================================
   [2026-08-27] 메인 모바일 마감 (≤720px 전용)
   ============================================================ */
@media (max-width:720px){

  /* 캡슐 버튼 — 63px 은 폰에서 두껍다. 가로는 유지하고 세로만 줄인다 */
  .value__cta a{
    padding-top:14px !important;
    padding-bottom:14px !important;
    min-height:52px;
  }

  /* 견적문의 보조 설명 — "검토 / 후 안내드립니다" 로 끊기던 것을 한 덩어리로 */
  .contact__lead{
    font-size:15px !important;
    line-height:1.6 !important;
    text-wrap:balance;
    word-break:keep-all;
    max-width:30ch;
  }
}

/* [2026-08-28] 견적문의 폼 — 입력칸 높이와 항목 간격 정리 (≤720px 전용)
   입력칸 56px·항목 간격 32px 이라 네 칸을 보려면 화면을 두 번 넘겨야 했다.
   터치에 무리 없는 48px 로 낮추고 간격도 22px 로 좁힌다. */
@media (max-width:720px){
  .contact .field input{
    height:48px !important;
    padding:12px 14px !important;
  }
  .contact .field textarea{
    height:120px !important;
    min-height:120px !important;
    padding:12px 14px !important;
  }
  .form{ gap:22px 20px !important; }
  .contact .field label,
  .contact .field > b{ margin-bottom:8px !important; }
}

/* ============================================================
   [2026-08-28] 브랜드 골드 연출은 "동작 줄이기" 에서도 그대로 재생한다.
   원인: 389행의 전역 규칙이 모든 전환을 0.001ms 로 눌러버려서,
   그 설정이 켜진 폰에서는 링이 1.6초에 걸쳐 그려지지 않고 "뚝" 하고 채워졌다.
   글자 시간차도 사라져 한꺼번에 나타났다. 데스크톱과 같은 속도로 되돌린다.
   자동 슬라이드·패럴랙스·무한 흐름(.assoc__track)은 계속 동작 줄이기를 존중한다.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  /* 골드 원형 통계 — 조금씩 차오르기 */
  .tstat__prog{ transition-property:stroke-dashoffset !important; transition-duration:1.6s !important;
                transition-timing-function:cubic-bezier(.22,1,.36,1) !important; }

  /* value 타이틀 — 단어가 하나씩 시간차를 두고 떠오르기 */
  .value__title .w{ opacity:0; transform:translateY(48px) scale(.94); filter:blur(12px);
    transition-property:opacity,transform,filter !important; transition-duration:.9s !important;
    transition-timing-function:cubic-bezier(.22,1,.36,1) !important; }
  .value__title.is-in .w{ opacity:1; transform:none; filter:blur(0); }
  .value__title.is-in .w:nth-child(1){ transition-delay:.06s !important; }
  .value__title.is-in .w:nth-child(2){ transition-delay:.22s !important; }
  .value__title.is-in .w:nth-child(3){ transition-delay:.38s !important; }
  .value__title.is-in .w:nth-child(4){ transition-delay:.54s !important; }
  .value__title.is-in .w:nth-child(5){ transition-delay:.70s !important; }

  /* 히어로 강조어 — 좌에서 우로 골드 채움 */
  .hero__title .hl{ transition-property:background-size !important; transition-duration:1.1s !important;
    transition-delay:.55s !important; transition-timing-function:cubic-bezier(.22,1,.36,1) !important; }
}

/* [2026-08-28 정정] 앞서 링 "아래 라벨"을 한 줄로 고쳤는데,
   요청은 링 "안의 숫자와 단위"였다. 9 / 단계 가 두 줄로 쌓여 있었다.
   .tstat__val 이 flex-direction:column 이라 세로로 쌓였다.
   가로 한 줄로 바꾸고 단위를 숫자 baseline 에 맞춘다. (웹·모바일 모두) */
/* [수정] flex row + align-items:baseline 은 baseline 이 컨테이너 위쪽에 잡혀
   숫자가 링 위로 올라가 버렸다. grid 로 바꾸면
   place-content:center 가 한 줄 전체를 링 정중앙에 놓고,
   align-items:baseline 은 그 줄 안에서만 작동해 단위가 숫자 밑선에 붙는다. */
.tstat__val{
  display:grid !important;
  grid-auto-flow:column !important;
  place-content:center !important;
  align-items:baseline !important;
  column-gap:.14em;
  white-space:nowrap;
}
.tstat__val > i{ display:inline !important; }

/* [2026-08-28] 원형 통계 라벨을 한 줄로.
   "누적 제작 프로젝트"(9자)가 11px 에서 99px 필요한데 칸은 79px 이라 두 줄로 깨졌다.
   나머지 셋은 한 줄이라 하나만 두 줄이 되어 baseline 이 어긋나 보였다.
   줄바꿈을 막고, 글자는 화면 폭에 따라 줄어들게 해 어느 기기에서도 한 줄을 유지한다.
   라벨은 링 아래 가운데 정렬이고 이웃 라벨이 짧아, 칸을 조금 넘겨도 겹치지 않는다. */
.tstat__label{
  white-space:nowrap;
  letter-spacing:-.02em;
}
@media (max-width:720px){
  .tstat__label{
    font-size:clamp(9px, 2.55vw, 12px) !important;
    letter-spacing:-.04em !important;
    line-height:1.35 !important;
  }
  .tech__stats{ overflow:visible !important; }
  .tech__stats > *{ overflow:visible !important; }
}

/* [2026-08-28 #2] 320px 에서 마지막 라벨이 화면 밖으로 나가던 문제.
   1fr 은 최소 크기가 내용 크기(min-content)다. 라벨에 nowrap 을 걸자
   "누적 제작 프로젝트"의 폭이 칸의 하한이 되어 4칸이 컨테이너를 밀어냈다.
   minmax(0,1fr) 로 칸이 내용보다 작아질 수 있게 하면 총 폭이 유지된다. */
@media (max-width:720px){
  .tech__stats{
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  }
  .tstat, .tech__stats > *{ min-width:0 !important; }
}


/* ============================================================
   [2026-08-28] 견적문의 버튼 · 시세 카드 정리
   ① 문의하기 버튼을 '주가지수 전체보기' 와 같은 알약 모양으로
   ② 상세내용칸과 버튼이 붙어 있어 여백을 준다 (.submit 이 -18px 로 끌어올려져 있었다)
   ③ 시세 카드 — 이름표와 숫자가 2줄이라 카드가 길었다. 한 줄로 붙인다
   ============================================================ */

/* ① 알약 모양 — 채움색·글자는 그대로 두고 모서리만 바꾼다 */
.btn-solid{ border-radius:999px; }

/* ② 상세내용 ↔ 문의하기 여백. 앞쪽 .contact .submit{margin-top:-18px!important} 를 이긴다 */
@media (max-width:720px){
  .contact .submit{ margin-top:8px !important; }
  .contact .form{ padding-bottom:8px; }
}

/* [2026-09-01] 옛 시세 표(.qs-tbl) 관련 모바일 규칙은 전부 삭제했다.
   메인 시세는 표가 아니라 DARK MARKET BOARD(.qs-board)로 바뀌었다. */