/* 브루아(BREWA) 홈페이지 스타일 — 디자인 시안(개선안) 기준 */
@property --num{syntax:'<integer>';inherits:false;initial-value:0}
body{margin:0;background:#FFFFFF}
html{scroll-behavior:smooth}
h1,h2,h3{text-wrap:balance}
a{color:#755037}a:hover{color:#56331A}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-a:hover{color:#FFFFFF!important}

/* 첫 화면 등장 */
@keyframes in-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes in-rise{from{opacity:0;transform:translateY(56px) scale(.97)}to{opacity:1;transform:none}}
.in1{animation:in-up .9s cubic-bezier(.2,.7,.2,1) .05s both}
.in2{animation:in-up .9s cubic-bezier(.2,.7,.2,1) .2s both}
.in3{animation:in-up .9s cubic-bezier(.2,.7,.2,1) .35s both}
.in4{animation:in-rise 1.4s cubic-bezier(.2,.7,.2,1) .25s both}

/* 스크롤 등장 */
@keyframes rv-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
.rv{animation:rv-up .9s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 30%}
.rv.d1{animation-range:entry 8% cover 34%}
.rv.d2{animation-range:entry 16% cover 38%}
.rv.d3{animation-range:entry 24% cover 42%}

/* 숫자 올라가기 */
@keyframes count-up{from{--num:0}}
.count{--num:var(--to);counter-reset:num var(--num);animation:count-up 1.8s cubic-bezier(.2,.7,.2,1) both;animation-timeline:view();animation-range:entry 0% cover 40%}
.count::after{content:counter(num)}
.count.load{animation-timeline:auto;animation-delay:.6s}

/* 메뉴줄: 스크롤하면 진해짐 */
@keyframes hdr-solid{to{background-color:rgba(42,22,9,.9);box-shadow:0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.22)}}
.hdr{animation:hdr-solid linear both;animation-timeline:scroll(root);animation-range:0 200px}

/* 첫 화면 바닥 반사 */
.reflect{-webkit-box-reflect:below 0 linear-gradient(to bottom,rgba(255,255,255,0) 76%,rgba(255,255,255,.16))}

/* 마우스 올림 */
.lift{transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .4s,background-color .4s}
.lift:hover{transform:translateY(-4px)}
.lift-d:hover{border-color:rgba(255,255,255,.26)!important}
.lift-l:hover{border-color:#D2C0B1!important}
.zoom img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.04)}
.btn{transition:background-color .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{transform:translateY(-1px)}
.btn-w:hover{background-color:#F5F0EB!important}
.btn-o:hover{background-color:rgba(255,255,255,.1)!important}
.btn-p:hover{background-color:#56331A!important;border-color:#56331A!important}
.btn-l:hover{background-color:#F5F0EB!important}

/* 메뉴 띠 */
@keyframes mq{to{transform:translateX(-50%)}}
.mq{display:flex;width:max-content;animation:mq 70s linear infinite}
.mq.rev{animation-direction:reverse;animation-duration:84s}
.mq-wrap{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-wrap:hover .mq{animation-play-state:paused}

/* 작동 원리 1: Level Press */
.lp-dots{animation:lp-dots 6.5s linear infinite}
@keyframes lp-dots{0%{opacity:0;transform:translateY(0)}3%{opacity:1}14%{opacity:1;transform:translateY(70px)}17%,100%{opacity:0;transform:translateY(70px)}}
.lp-pile{transform-box:fill-box;transform-origin:50% 100%;animation:lp-pile 6.5s cubic-bezier(.3,.6,.3,1) infinite}
@keyframes lp-pile{0%{opacity:1;transform:scaleY(0)}16%{opacity:1;transform:scaleY(1)}30%{opacity:1;transform:scaleY(1)}40%,100%{opacity:0;transform:scaleY(1)}}
.lp-flat{transform-box:fill-box;transform-origin:50% 100%;animation:lp-flat 6.5s cubic-bezier(.3,.6,.3,1) infinite}
@keyframes lp-flat{0%,30%{opacity:0;transform:scaleY(1)}40%{opacity:1;transform:scaleY(1)}54%{opacity:1;transform:scaleY(1)}60%{opacity:1;transform:scaleY(.72)}86%{opacity:1;transform:scaleY(.72)}94%,100%{opacity:0;transform:scaleY(.72)}}
.lp-shake{animation:lp-shake 6.5s linear infinite}
@keyframes lp-shake{0%,17%{transform:translateX(0)}18.5%{transform:translateX(-2.5px)}20%{transform:translateX(2.5px)}21.5%{transform:translateX(-2.5px)}23%{transform:translateX(2.5px)}24.5%{transform:translateX(-2.5px)}26%{transform:translateX(2.5px)}27.5%{transform:translateX(-2.5px)}29%{transform:translateX(2.5px)}30.5%{transform:translateX(-2.5px)}32%{transform:translateX(2.5px)}33.5%{transform:translateX(-2.5px)}35%{transform:translateX(2.5px)}36.5%{transform:translateX(-2px)}38%{transform:translateX(1px)}39.5%,100%{transform:translateX(0)}}
.lp-vib{animation:lp-vib 6.5s linear infinite}
@keyframes lp-vib{0%,17%{opacity:0}19%,37%{opacity:1}40%,100%{opacity:0}}
.lp-piston{animation:lp-piston 6.5s cubic-bezier(.45,0,.2,1) infinite}
@keyframes lp-piston{0%,44%{transform:translateY(0)}54%{transform:translateY(74px)}60%{transform:translateY(82px)}82%{transform:translateY(82px)}92%,100%{transform:translateY(0)}}
.lp-s1{animation:lp-s1 6.5s linear infinite}
@keyframes lp-s1{0%,15%{opacity:1}18%,100%{opacity:.35}}
.lp-s2{animation:lp-s2 6.5s linear infinite}
@keyframes lp-s2{0%,15%{opacity:.35}18%,40%{opacity:1}43%,100%{opacity:.35}}
.lp-s3{animation:lp-s3 6.5s linear infinite}
@keyframes lp-s3{0%,42%{opacity:.35}45%,84%{opacity:1}88%,100%{opacity:.35}}

/* 작동 원리 2: SMC */
.smc-rot{transform-box:fill-box;transform-origin:center;animation:smc-rot 1s linear infinite}
@keyframes smc-rot{to{transform:rotate(360deg)}}
.smc-bar{transform-box:fill-box;transform-origin:0 50%;animation:smc-bar 4.5s cubic-bezier(.3,.6,.3,1) infinite}
@keyframes smc-bar{0%{transform:scaleX(0)}25%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}

/* 작동 원리 3: Clean Cut */
.cc-liq{animation:cc-liq 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cc-liq{0%{stroke-dashoffset:100}22%{stroke-dashoffset:0}50%{stroke-dashoffset:0}66%,100%{stroke-dashoffset:100}}
.cc-rot{transform-box:fill-box;transform-origin:center;animation:cc-rot 6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cc-rot{0%{transform:rotate(0)}50%{transform:rotate(900deg)}66%,100%{transform:rotate(540deg)}}
.cc-cw{animation:cc-cw 6s linear infinite}
@keyframes cc-cw{0%,48%{opacity:1}50%,100%{opacity:0}}
.cc-ccw{animation:cc-ccw 6s linear infinite}
@keyframes cc-ccw{0%,48%{opacity:0}50%,68%{opacity:1}72%,100%{opacity:0}}
.cc-stream{animation:cc-stream 6s linear infinite}
@keyframes cc-stream{0%,22%{opacity:0}25%,46%{opacity:1}49%,100%{opacity:0}}
.cc-res{transform-box:fill-box;transform-origin:50% 0;animation:cc-res 6s ease-in-out infinite}
@keyframes cc-res{0%,49%{opacity:0;transform:translateY(0) scale(.2)}53%,58%{opacity:1;transform:translateY(0) scale(1)}64%,100%{opacity:0;transform:translateY(-10px) scale(.4)}}
.cc-cup{transform-box:fill-box;transform-origin:50% 100%;animation:cc-cup 6s ease-out infinite}
@keyframes cc-cup{0%,24%{opacity:1;transform:scaleY(0)}46%,90%{opacity:1;transform:scaleY(1)}97%,100%{opacity:0;transform:scaleY(1)}}
.cc-s1{animation:cc-s1 6s linear infinite}
@keyframes cc-s1{0%,46%{opacity:1}50%,100%{opacity:.35}}
.cc-s2{animation:cc-s2 6s linear infinite}
@keyframes cc-s2{0%,46%{opacity:.35}50%,64%{opacity:1}68%,100%{opacity:.35}}
.cc-s3{animation:cc-s3 6s linear infinite}
@keyframes cc-s3{0%,64%{opacity:.35}68%,92%{opacity:1}96%,100%{opacity:.35}}

/* 작동 원리 4: Safe Stop · Safe Run */
.sr-dot{animation:sr-dot 7s linear infinite}
@keyframes sr-dot{0%,16%{fill:#5DBB84}18%,90%{fill:#E0574F}93%,100%{fill:#5DBB84}}
.sr-ring{transform-box:fill-box;transform-origin:center;animation:sr-ring 7s ease-out infinite}
@keyframes sr-ring{0%,17%{opacity:0;transform:scale(1)}18%{opacity:.9;transform:scale(1)}30%{opacity:0;transform:scale(3)}31%{opacity:.9;transform:scale(1)}43%,100%{opacity:0;transform:scale(3)}}
.sr-ok{animation:sr-ok 7s linear infinite}
@keyframes sr-ok{0%,26%{opacity:1}28%,90%{opacity:0}93%,100%{opacity:1}}
.sr-stop{animation:sr-stop 7s linear infinite}
@keyframes sr-stop{0%,26%{opacity:0}28%,90%{opacity:1}93%,100%{opacity:0}}
.sr-sold{animation:sr-sold 7s linear infinite}
@keyframes sr-sold{0%,34%{opacity:0}38%,88%{opacity:1}92%,100%{opacity:0}}
.sr-s1{animation:sr-s1 7s linear infinite}
@keyframes sr-s1{0%,16%{opacity:.35}18%,28%{opacity:1}31%,100%{opacity:.35}}
.sr-s2{animation:sr-s2 7s linear infinite}
@keyframes sr-s2{0%,26%{opacity:.35}28%,36%{opacity:1}39%,100%{opacity:.35}}
.sr-s3{animation:sr-s3 7s linear infinite}
@keyframes sr-s3{0%,35%{opacity:.35}38%,86%{opacity:1}90%,100%{opacity:.35}}

.span2{grid-column:span 2}
.span-all{grid-column:1/-1}

/* 자주 묻는 질문 */
.faq summary{list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .faq-q{color:#755037}
.faq-ic{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.faq details[open] .faq-ic{transform:rotate(45deg)}

/* 모바일 */
@media (max-width:760px){
.hide-sm{display:none!important}
.stack-sm{grid-template-columns:minmax(0,1fr)!important}
.span2{grid-column:auto!important}
.g2-sm{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.tile-sm{height:220px!important}
.bar-btn{flex:1 1 0!important}
.pad-sm{padding-left:0!important;padding-right:0!important;border-left:0!important}
.row-auto-sm{grid-row:auto!important;grid-column:auto!important}
.rows-auto-sm{grid-template-rows:none!important}
.ar43-sm{aspect-ratio:4/3!important;height:auto!important}
.step-sm{flex-direction:row!important;align-items:flex-start!important}
.pop-card{top:auto!important;bottom:0!important;left:0!important;right:0!important;transform:none!important;width:auto!important;max-width:none!important;border-radius:20px 20px 0 0!important}
}

/* 움직임 줄이기 · 모션 끄기 */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- 사이트 공통 ---------- */
[hidden]{display:none!important}
img{max-width:100%}
.skip{position:absolute;left:16px;top:-64px;z-index:100;padding:10px 16px;border-radius:8px;background:#FFFFFF;color:#181513;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid #C98A4B;outline-offset:2px}

/* ---------- 문의 폼 ---------- */
.fld{display:grid;gap:8px;min-width:0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lbl{font-size:14px;font-weight:700;color:#2A2521}
.req{color:#755037}
.ctl{box-sizing:border-box;width:100%;min-height:48px;padding:0 14px;border:1px solid #D3CECA;border-radius:10px;background:#FFFFFF;font-family:inherit;font-size:16px;color:#181513;scroll-margin-top:96px}
select.ctl{height:48px;min-height:48px;appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23755037' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
textarea.ctl{min-height:136px;padding:12px 14px;line-height:1.6;resize:vertical}
.ctl:focus{border-color:#755037}
.ctl[aria-invalid="true"]{border-color:#B3261E}
.ctl::placeholder{color:#767170}
.err{margin:0;font-size:13px;line-height:1.5;color:#B3261E}
.err:empty{display:none}
.booth{padding:16px;border-radius:12px;background:#F5F0EB}
.consent{padding:16px;border-radius:12px;background:#FAF8F5;border:1px solid #E7E4E0}
.consent p{margin:0;font-size:13px;line-height:1.75;color:#544F4B}
.consent .err{margin-top:4px}
.chk{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:8px;font-size:15px;font-weight:700;color:#2A2521;cursor:pointer}
.chk input{flex:none;width:20px;height:20px;margin:0;accent-color:#755037}
.submit{min-height:52px;border:1px solid #755037;border-radius:999px;background:#755037;color:#FFFFFF;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer}
.submit:disabled{opacity:.65;cursor:default;transform:none!important}
.status{margin:0;padding:14px 16px;border-radius:12px;background:#F5F0EB;font-size:15px;font-weight:600;line-height:1.6;color:#56331A}
.status.is-error{background:#FBEDEC;color:#8C1D18}
.status:focus{outline:none}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- 카페쇼 팝업 ---------- */
.promo{padding:0;border:0;border-radius:20px;width:calc(100% - 32px);max-width:440px;overflow:hidden;background:#FFFFFF;color:#181513;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.promo::backdrop{background:rgba(24,21,19,.55)}
.promo:focus{outline:none}
.promo-foot{display:flex;border-top:1px solid #E7E4E0}
.promo-foot button{flex:1 1 0;min-height:50px;border:0;background:#FFFFFF;font-family:inherit;font-size:14px;color:#544F4B;cursor:pointer}
.promo-foot button+button{border-left:1px solid #E7E4E0;font-weight:700;color:#181513}
.promo-foot button:hover{background:#FAF8F5}

/* ---------- 영상 ---------- */
.vfacade .vplay{transition:transform .25s ease}
.vfacade:hover .vplay{transform:translate(-50%,-50%) scale(1.07)!important}
.vframe{position:relative;width:100%;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal{padding:0;border:0;background:transparent;width:min(1120px,calc(100% - 32px));max-width:none;overflow:visible}
.vmodal::backdrop{background:rgba(0,0,0,.84)}
.vmodal:focus{outline:none}
.vmodal .vframe{border-radius:14px}
.vmodal-close{position:absolute;right:0;top:-54px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.16);cursor:pointer}
.vmodal-close:hover{background:rgba(255,255,255,.28)}

/* ---------- 하단 고정 바 ---------- */
.bottom-bar{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bottom-bar.is-hidden{transform:translateY(110%)}

@media (max-width:760px){
.promo{margin:auto 0 0;width:100%;max-width:none;border-radius:20px 20px 0 0}
}
@media (prefers-reduced-motion:reduce){.bottom-bar{transition:none}}

/* Existing certificate evidence remains available in the refreshed layout. */
.certificate-evidence{margin-top:24px}
.certificate-evidence summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:#755037}
.evidence-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:16px}
.evidence-grid figure{margin:0}
.evidence-grid img{display:block;width:100%;aspect-ratio:1/1.414;object-fit:contain;border:1px solid #E7E4E0;border-radius:8px}
.evidence-grid figcaption{margin-top:8px;font-size:12px}
@media(max-width:760px){.evidence-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}