/*
 * 자동 생성 파일 — 직접 수정하지 말 것.
 * 생성: apps/workers/central/build_css_bundle.php
 * 원본을 고쳤으면 이 스크립트를 다시 돌리고 ASSET_VERSION 을 올린다.
 * 번들이 원본보다 오래되면 header.php 가 자동으로 개별 CSS 로 되돌아간다.
 */
/* ===== vendor/swiper/swiper-bundle.min.css ===== */
/**
 * Swiper 12.2.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 27, 2026
 */

:root{--swiper-theme-color:#007aff}:host{display:block;margin-left:auto;margin-right:auto;position:relative;z-index:1}.swiper{display:block;list-style:none;margin-left:auto;margin-right:auto;overflow:hidden;padding:0;position:relative;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{box-sizing:initial;display:flex;height:100%;position:relative;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);width:100%;z-index:1}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{display:block;flex-shrink:0;height:100%;position:relative;transition-property:transform;width:100%}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-cube-shadow,.swiper-slide{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper:before{height:var(--swiper-centered-offset-after);min-width:1px;width:100%}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-bottom,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:10}.swiper-slide-shadow{background:#00000026}.swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-slide-shadow-top{background-image:linear-gradient(0deg,#00000080,#0000)}.swiper-slide-shadow-bottom{background-image:linear-gradient(180deg,#00000080,#0000)}}.swiper-lazy-preloader{border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top:4px solid #0000;box-sizing:border-box;height:42px;left:50%;margin-left:-21px;margin-top:-21px;position:absolute;top:50%;transform-origin:50%;width:42px;z-index:10}.swiper-watch-progress .swiper-slide-visible,.swiper:not(.swiper-watch-progress){.swiper-lazy-preloader{animation:swiper-preloader-spin 1s linear infinite}}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode{.swiper-wrapper:after{content:"";left:0;pointer-events:none;position:absolute;top:0}}.swiper-virtual.swiper-css-mode.swiper-horizontal{.swiper-wrapper:after{height:1px;width:var(--swiper-virtual-size)}}.swiper-virtual.swiper-css-mode.swiper-vertical{.swiper-wrapper:after{height:var(--swiper-virtual-size);width:1px}}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{align-items:center;color:var(--swiper-navigation-color,var(--swiper-theme-color));cursor:pointer;display:flex;height:var(--swiper-navigation-size);justify-content:center;position:absolute;width:var(--swiper-navigation-size);z-index:10;&.swiper-button-disabled{cursor:auto;opacity:.35;pointer-events:none}&.swiper-button-hidden{cursor:auto;opacity:0;pointer-events:none}.swiper-navigation-disabled &{display:none!important}::slotted(svg),svg{height:100%;object-fit:contain;transform-origin:center;width:100%;fill:currentColor;pointer-events:none}}.swiper-button-lock{display:none}.swiper-button-next,.swiper-button-prev{margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}.swiper-horizontal{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{margin-left:0;margin-top:calc(0px - var(--swiper-navigation-size)/2);top:var(--swiper-navigation-top-offset,50%)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{left:var(--swiper-navigation-sides-offset,4px);right:auto}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev,&~.swiper-button-next,.swiper-button-next{left:auto;right:var(--swiper-navigation-sides-offset,4px)}&.swiper-rtl .swiper-button-next,&.swiper-rtl~.swiper-button-next,&~.swiper-button-prev,.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(180deg)}}&.swiper-rtl .swiper-button-prev,&.swiper-rtl~.swiper-button-prev{.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(0deg)}}}.swiper-vertical{.swiper-button-next,.swiper-button-prev,~.swiper-button-next,~.swiper-button-prev{left:var(--swiper-navigation-top-offset,50%);margin-left:calc(0px - var(--swiper-navigation-size)/2);margin-top:0;right:auto}.swiper-button-prev,~.swiper-button-prev{bottom:auto;top:var(--swiper-navigation-sides-offset,4px);.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(-90deg)}}.swiper-button-next,~.swiper-button-next{bottom:var(--swiper-navigation-sides-offset,4px);top:auto;.swiper-navigation-icon,::slotted(.swiper-navigation-icon){transform:rotate(90deg)}}}.swiper-pagination{position:absolute;text-align:center;transform:translateZ(0);transition:opacity .3s;z-index:10;&.swiper-pagination-hidden{opacity:0}&.swiper-pagination-disabled,.swiper-pagination-disabled>&{display:none!important}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);left:0;top:var(--swiper-pagination-top,auto);width:100%}.swiper-pagination-bullets-dynamic{font-size:0;overflow:hidden;.swiper-pagination-bullet{position:relative;transform:scale(.33)}.swiper-pagination-bullet-active,.swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullet-active-next-next{transform:scale(.33)}}.swiper-pagination-bullet{background:var(--swiper-pagination-bullet-inactive-color,#000);border-radius:var(--swiper-pagination-bullet-border-radius,50%);display:inline-block;height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));opacity:var(--swiper-pagination-bullet-inactive-opacity,.2);width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));button&{appearance:none;border:none;box-shadow:none;margin:0;padding:0}.swiper-pagination-clickable &{cursor:pointer}&:only-child{display:none!important}}.swiper-pagination-bullet-active{background:var(--swiper-pagination-color,var(--swiper-theme-color));opacity:var(--swiper-pagination-bullet-opacity,1)}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{left:var(--swiper-pagination-left,auto);right:var(--swiper-pagination-right,8px);top:50%;transform:translate3d(0,-50%,0);.swiper-pagination-bullet{display:block;margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0}&.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px;.swiper-pagination-bullet{display:inline-block;transition:transform .2s,top .2s}}}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-horizontal.swiper-pagination-bullets{.swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}&.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap;.swiper-pagination-bullet{transition:transform .2s,left .2s}}}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:transform .2s,right .2s}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,#00000040);position:absolute;.swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));height:100%;left:0;position:absolute;top:0;transform:scale(0);transform-origin:left top;width:100%}.swiper-rtl & .swiper-pagination-progressbar-fill{transform-origin:right top}&.swiper-pagination-horizontal,&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-horizontal>&,.swiper-vertical>&.swiper-pagination-progressbar-opposite{height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0;width:100%}&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,&.swiper-pagination-vertical,.swiper-horizontal>&.swiper-pagination-progressbar-opposite,.swiper-vertical>&{height:100%;left:0;top:0;width:var(--swiper-pagination-progressbar-size,4px)}}.swiper-pagination-lock{display:none}.swiper-scrollbar{background:var(--swiper-scrollbar-bg-color,#0000001a);border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;&.swiper-scrollbar-disabled,.swiper-scrollbar-disabled>&{display:none!important}&.swiper-scrollbar-horizontal,.swiper-horizontal>&{bottom:var(--swiper-scrollbar-bottom,4px);height:var(--swiper-scrollbar-size,4px);left:var(--swiper-scrollbar-sides-offset,1%);position:absolute;top:var(--swiper-scrollbar-top,auto);width:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);z-index:50}&.swiper-scrollbar-vertical,.swiper-vertical>&{height:calc(100% - var(--swiper-scrollbar-sides-offset, 1%)*2);left:var(--swiper-scrollbar-left,auto);position:absolute;right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);width:var(--swiper-scrollbar-size,4px);z-index:50}}.swiper-scrollbar-drag{background:var(--swiper-scrollbar-drag-bg-color,#00000080);border-radius:var(--swiper-scrollbar-border-radius,10px);height:100%;left:0;position:relative;top:0;width:100%}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{align-items:center;display:flex;height:100%;justify-content:center;text-align:center;width:100%;>canvas,>img,>svg{max-height:100%;max-width:100%;object-fit:contain}}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{left:0;opacity:0;pointer-events:none;position:absolute;top:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-direction:column;flex-wrap:wrap}.swiper-fade{&.swiper-free-mode{.swiper-slide{transition-timing-function:ease-out}}.swiper-slide{pointer-events:none;transition-property:opacity;.swiper-slide{pointer-events:none}}.swiper-slide-active{pointer-events:auto;& .swiper-slide-active{pointer-events:auto}}}.swiper.swiper-cube{overflow:visible}.swiper-cube{.swiper-slide{backface-visibility:hidden;height:100%;pointer-events:none;transform-origin:0 0;visibility:hidden;width:100%;z-index:1;.swiper-slide{pointer-events:none}}&.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}.swiper-slide-active,.swiper-slide-next,.swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube-shadow{bottom:0;height:100%;left:0;opacity:.6;position:absolute;width:100%;z-index:0;&:before{background:#000;bottom:0;content:"";filter:blur(50px);left:0;position:absolute;right:0;top:0}}}.swiper-cube{.swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}}.swiper-cube{.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-slide-shadow-cube.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper.swiper-flip{overflow:visible}.swiper-flip{.swiper-slide{backface-visibility:hidden;pointer-events:none;z-index:1;.swiper-slide{pointer-events:none}}.swiper-slide-active{&,& .swiper-slide-active{pointer-events:auto}}}.swiper-flip{.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-slide-shadow-flip.swiper-slide-shadow-top{backface-visibility:hidden;z-index:0}}.swiper-creative{.swiper-slide{backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}}.swiper.swiper-cards{overflow:visible}.swiper-cards{.swiper-slide{backface-visibility:hidden;overflow:hidden;transform-origin:center bottom}}

/* ===== vendor/aos/aos.css ===== */
[data-aos][data-aos][data-aos-duration="50"],body[data-aos-duration="50"] [data-aos]{transition-duration:50ms}[data-aos][data-aos][data-aos-delay="50"],body[data-aos-delay="50"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="50"].aos-animate,body[data-aos-delay="50"] [data-aos].aos-animate{transition-delay:50ms}[data-aos][data-aos][data-aos-duration="100"],body[data-aos-duration="100"] [data-aos]{transition-duration:.1s}[data-aos][data-aos][data-aos-delay="100"],body[data-aos-delay="100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="100"].aos-animate,body[data-aos-delay="100"] [data-aos].aos-animate{transition-delay:.1s}[data-aos][data-aos][data-aos-duration="150"],body[data-aos-duration="150"] [data-aos]{transition-duration:.15s}[data-aos][data-aos][data-aos-delay="150"],body[data-aos-delay="150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="150"].aos-animate,body[data-aos-delay="150"] [data-aos].aos-animate{transition-delay:.15s}[data-aos][data-aos][data-aos-duration="200"],body[data-aos-duration="200"] [data-aos]{transition-duration:.2s}[data-aos][data-aos][data-aos-delay="200"],body[data-aos-delay="200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="200"].aos-animate,body[data-aos-delay="200"] [data-aos].aos-animate{transition-delay:.2s}[data-aos][data-aos][data-aos-duration="250"],body[data-aos-duration="250"] [data-aos]{transition-duration:.25s}[data-aos][data-aos][data-aos-delay="250"],body[data-aos-delay="250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="250"].aos-animate,body[data-aos-delay="250"] [data-aos].aos-animate{transition-delay:.25s}[data-aos][data-aos][data-aos-duration="300"],body[data-aos-duration="300"] [data-aos]{transition-duration:.3s}[data-aos][data-aos][data-aos-delay="300"],body[data-aos-delay="300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="300"].aos-animate,body[data-aos-delay="300"] [data-aos].aos-animate{transition-delay:.3s}[data-aos][data-aos][data-aos-duration="350"],body[data-aos-duration="350"] [data-aos]{transition-duration:.35s}[data-aos][data-aos][data-aos-delay="350"],body[data-aos-delay="350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="350"].aos-animate,body[data-aos-delay="350"] [data-aos].aos-animate{transition-delay:.35s}[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos][data-aos][data-aos-duration="450"],body[data-aos-duration="450"] [data-aos]{transition-duration:.45s}[data-aos][data-aos][data-aos-delay="450"],body[data-aos-delay="450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="450"].aos-animate,body[data-aos-delay="450"] [data-aos].aos-animate{transition-delay:.45s}[data-aos][data-aos][data-aos-duration="500"],body[data-aos-duration="500"] [data-aos]{transition-duration:.5s}[data-aos][data-aos][data-aos-delay="500"],body[data-aos-delay="500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="500"].aos-animate,body[data-aos-delay="500"] [data-aos].aos-animate{transition-delay:.5s}[data-aos][data-aos][data-aos-duration="550"],body[data-aos-duration="550"] [data-aos]{transition-duration:.55s}[data-aos][data-aos][data-aos-delay="550"],body[data-aos-delay="550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="550"].aos-animate,body[data-aos-delay="550"] [data-aos].aos-animate{transition-delay:.55s}[data-aos][data-aos][data-aos-duration="600"],body[data-aos-duration="600"] [data-aos]{transition-duration:.6s}[data-aos][data-aos][data-aos-delay="600"],body[data-aos-delay="600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="600"].aos-animate,body[data-aos-delay="600"] [data-aos].aos-animate{transition-delay:.6s}[data-aos][data-aos][data-aos-duration="650"],body[data-aos-duration="650"] [data-aos]{transition-duration:.65s}[data-aos][data-aos][data-aos-delay="650"],body[data-aos-delay="650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="650"].aos-animate,body[data-aos-delay="650"] [data-aos].aos-animate{transition-delay:.65s}[data-aos][data-aos][data-aos-duration="700"],body[data-aos-duration="700"] [data-aos]{transition-duration:.7s}[data-aos][data-aos][data-aos-delay="700"],body[data-aos-delay="700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="700"].aos-animate,body[data-aos-delay="700"] [data-aos].aos-animate{transition-delay:.7s}[data-aos][data-aos][data-aos-duration="750"],body[data-aos-duration="750"] [data-aos]{transition-duration:.75s}[data-aos][data-aos][data-aos-delay="750"],body[data-aos-delay="750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="750"].aos-animate,body[data-aos-delay="750"] [data-aos].aos-animate{transition-delay:.75s}[data-aos][data-aos][data-aos-duration="800"],body[data-aos-duration="800"] [data-aos]{transition-duration:.8s}[data-aos][data-aos][data-aos-delay="800"],body[data-aos-delay="800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="800"].aos-animate,body[data-aos-delay="800"] [data-aos].aos-animate{transition-delay:.8s}[data-aos][data-aos][data-aos-duration="850"],body[data-aos-duration="850"] [data-aos]{transition-duration:.85s}[data-aos][data-aos][data-aos-delay="850"],body[data-aos-delay="850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="850"].aos-animate,body[data-aos-delay="850"] [data-aos].aos-animate{transition-delay:.85s}[data-aos][data-aos][data-aos-duration="900"],body[data-aos-duration="900"] [data-aos]{transition-duration:.9s}[data-aos][data-aos][data-aos-delay="900"],body[data-aos-delay="900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="900"].aos-animate,body[data-aos-delay="900"] [data-aos].aos-animate{transition-delay:.9s}[data-aos][data-aos][data-aos-duration="950"],body[data-aos-duration="950"] [data-aos]{transition-duration:.95s}[data-aos][data-aos][data-aos-delay="950"],body[data-aos-delay="950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="950"].aos-animate,body[data-aos-delay="950"] [data-aos].aos-animate{transition-delay:.95s}[data-aos][data-aos][data-aos-duration="1000"],body[data-aos-duration="1000"] [data-aos]{transition-duration:1s}[data-aos][data-aos][data-aos-delay="1000"],body[data-aos-delay="1000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1000"].aos-animate,body[data-aos-delay="1000"] [data-aos].aos-animate{transition-delay:1s}[data-aos][data-aos][data-aos-duration="1050"],body[data-aos-duration="1050"] [data-aos]{transition-duration:1.05s}[data-aos][data-aos][data-aos-delay="1050"],body[data-aos-delay="1050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1050"].aos-animate,body[data-aos-delay="1050"] [data-aos].aos-animate{transition-delay:1.05s}[data-aos][data-aos][data-aos-duration="1100"],body[data-aos-duration="1100"] [data-aos]{transition-duration:1.1s}[data-aos][data-aos][data-aos-delay="1100"],body[data-aos-delay="1100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1100"].aos-animate,body[data-aos-delay="1100"] [data-aos].aos-animate{transition-delay:1.1s}[data-aos][data-aos][data-aos-duration="1150"],body[data-aos-duration="1150"] [data-aos]{transition-duration:1.15s}[data-aos][data-aos][data-aos-delay="1150"],body[data-aos-delay="1150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1150"].aos-animate,body[data-aos-delay="1150"] [data-aos].aos-animate{transition-delay:1.15s}[data-aos][data-aos][data-aos-duration="1200"],body[data-aos-duration="1200"] [data-aos]{transition-duration:1.2s}[data-aos][data-aos][data-aos-delay="1200"],body[data-aos-delay="1200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1200"].aos-animate,body[data-aos-delay="1200"] [data-aos].aos-animate{transition-delay:1.2s}[data-aos][data-aos][data-aos-duration="1250"],body[data-aos-duration="1250"] [data-aos]{transition-duration:1.25s}[data-aos][data-aos][data-aos-delay="1250"],body[data-aos-delay="1250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1250"].aos-animate,body[data-aos-delay="1250"] [data-aos].aos-animate{transition-delay:1.25s}[data-aos][data-aos][data-aos-duration="1300"],body[data-aos-duration="1300"] [data-aos]{transition-duration:1.3s}[data-aos][data-aos][data-aos-delay="1300"],body[data-aos-delay="1300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1300"].aos-animate,body[data-aos-delay="1300"] [data-aos].aos-animate{transition-delay:1.3s}[data-aos][data-aos][data-aos-duration="1350"],body[data-aos-duration="1350"] [data-aos]{transition-duration:1.35s}[data-aos][data-aos][data-aos-delay="1350"],body[data-aos-delay="1350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1350"].aos-animate,body[data-aos-delay="1350"] [data-aos].aos-animate{transition-delay:1.35s}[data-aos][data-aos][data-aos-duration="1400"],body[data-aos-duration="1400"] [data-aos]{transition-duration:1.4s}[data-aos][data-aos][data-aos-delay="1400"],body[data-aos-delay="1400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1400"].aos-animate,body[data-aos-delay="1400"] [data-aos].aos-animate{transition-delay:1.4s}[data-aos][data-aos][data-aos-duration="1450"],body[data-aos-duration="1450"] [data-aos]{transition-duration:1.45s}[data-aos][data-aos][data-aos-delay="1450"],body[data-aos-delay="1450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1450"].aos-animate,body[data-aos-delay="1450"] [data-aos].aos-animate{transition-delay:1.45s}[data-aos][data-aos][data-aos-duration="1500"],body[data-aos-duration="1500"] [data-aos]{transition-duration:1.5s}[data-aos][data-aos][data-aos-delay="1500"],body[data-aos-delay="1500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1500"].aos-animate,body[data-aos-delay="1500"] [data-aos].aos-animate{transition-delay:1.5s}[data-aos][data-aos][data-aos-duration="1550"],body[data-aos-duration="1550"] [data-aos]{transition-duration:1.55s}[data-aos][data-aos][data-aos-delay="1550"],body[data-aos-delay="1550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1550"].aos-animate,body[data-aos-delay="1550"] [data-aos].aos-animate{transition-delay:1.55s}[data-aos][data-aos][data-aos-duration="1600"],body[data-aos-duration="1600"] [data-aos]{transition-duration:1.6s}[data-aos][data-aos][data-aos-delay="1600"],body[data-aos-delay="1600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1600"].aos-animate,body[data-aos-delay="1600"] [data-aos].aos-animate{transition-delay:1.6s}[data-aos][data-aos][data-aos-duration="1650"],body[data-aos-duration="1650"] [data-aos]{transition-duration:1.65s}[data-aos][data-aos][data-aos-delay="1650"],body[data-aos-delay="1650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1650"].aos-animate,body[data-aos-delay="1650"] [data-aos].aos-animate{transition-delay:1.65s}[data-aos][data-aos][data-aos-duration="1700"],body[data-aos-duration="1700"] [data-aos]{transition-duration:1.7s}[data-aos][data-aos][data-aos-delay="1700"],body[data-aos-delay="1700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1700"].aos-animate,body[data-aos-delay="1700"] [data-aos].aos-animate{transition-delay:1.7s}[data-aos][data-aos][data-aos-duration="1750"],body[data-aos-duration="1750"] [data-aos]{transition-duration:1.75s}[data-aos][data-aos][data-aos-delay="1750"],body[data-aos-delay="1750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1750"].aos-animate,body[data-aos-delay="1750"] [data-aos].aos-animate{transition-delay:1.75s}[data-aos][data-aos][data-aos-duration="1800"],body[data-aos-duration="1800"] [data-aos]{transition-duration:1.8s}[data-aos][data-aos][data-aos-delay="1800"],body[data-aos-delay="1800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1800"].aos-animate,body[data-aos-delay="1800"] [data-aos].aos-animate{transition-delay:1.8s}[data-aos][data-aos][data-aos-duration="1850"],body[data-aos-duration="1850"] [data-aos]{transition-duration:1.85s}[data-aos][data-aos][data-aos-delay="1850"],body[data-aos-delay="1850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1850"].aos-animate,body[data-aos-delay="1850"] [data-aos].aos-animate{transition-delay:1.85s}[data-aos][data-aos][data-aos-duration="1900"],body[data-aos-duration="1900"] [data-aos]{transition-duration:1.9s}[data-aos][data-aos][data-aos-delay="1900"],body[data-aos-delay="1900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1900"].aos-animate,body[data-aos-delay="1900"] [data-aos].aos-animate{transition-delay:1.9s}[data-aos][data-aos][data-aos-duration="1950"],body[data-aos-duration="1950"] [data-aos]{transition-duration:1.95s}[data-aos][data-aos][data-aos-delay="1950"],body[data-aos-delay="1950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="1950"].aos-animate,body[data-aos-delay="1950"] [data-aos].aos-animate{transition-delay:1.95s}[data-aos][data-aos][data-aos-duration="2000"],body[data-aos-duration="2000"] [data-aos]{transition-duration:2s}[data-aos][data-aos][data-aos-delay="2000"],body[data-aos-delay="2000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2000"].aos-animate,body[data-aos-delay="2000"] [data-aos].aos-animate{transition-delay:2s}[data-aos][data-aos][data-aos-duration="2050"],body[data-aos-duration="2050"] [data-aos]{transition-duration:2.05s}[data-aos][data-aos][data-aos-delay="2050"],body[data-aos-delay="2050"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2050"].aos-animate,body[data-aos-delay="2050"] [data-aos].aos-animate{transition-delay:2.05s}[data-aos][data-aos][data-aos-duration="2100"],body[data-aos-duration="2100"] [data-aos]{transition-duration:2.1s}[data-aos][data-aos][data-aos-delay="2100"],body[data-aos-delay="2100"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2100"].aos-animate,body[data-aos-delay="2100"] [data-aos].aos-animate{transition-delay:2.1s}[data-aos][data-aos][data-aos-duration="2150"],body[data-aos-duration="2150"] [data-aos]{transition-duration:2.15s}[data-aos][data-aos][data-aos-delay="2150"],body[data-aos-delay="2150"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2150"].aos-animate,body[data-aos-delay="2150"] [data-aos].aos-animate{transition-delay:2.15s}[data-aos][data-aos][data-aos-duration="2200"],body[data-aos-duration="2200"] [data-aos]{transition-duration:2.2s}[data-aos][data-aos][data-aos-delay="2200"],body[data-aos-delay="2200"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2200"].aos-animate,body[data-aos-delay="2200"] [data-aos].aos-animate{transition-delay:2.2s}[data-aos][data-aos][data-aos-duration="2250"],body[data-aos-duration="2250"] [data-aos]{transition-duration:2.25s}[data-aos][data-aos][data-aos-delay="2250"],body[data-aos-delay="2250"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2250"].aos-animate,body[data-aos-delay="2250"] [data-aos].aos-animate{transition-delay:2.25s}[data-aos][data-aos][data-aos-duration="2300"],body[data-aos-duration="2300"] [data-aos]{transition-duration:2.3s}[data-aos][data-aos][data-aos-delay="2300"],body[data-aos-delay="2300"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2300"].aos-animate,body[data-aos-delay="2300"] [data-aos].aos-animate{transition-delay:2.3s}[data-aos][data-aos][data-aos-duration="2350"],body[data-aos-duration="2350"] [data-aos]{transition-duration:2.35s}[data-aos][data-aos][data-aos-delay="2350"],body[data-aos-delay="2350"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2350"].aos-animate,body[data-aos-delay="2350"] [data-aos].aos-animate{transition-delay:2.35s}[data-aos][data-aos][data-aos-duration="2400"],body[data-aos-duration="2400"] [data-aos]{transition-duration:2.4s}[data-aos][data-aos][data-aos-delay="2400"],body[data-aos-delay="2400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2400"].aos-animate,body[data-aos-delay="2400"] [data-aos].aos-animate{transition-delay:2.4s}[data-aos][data-aos][data-aos-duration="2450"],body[data-aos-duration="2450"] [data-aos]{transition-duration:2.45s}[data-aos][data-aos][data-aos-delay="2450"],body[data-aos-delay="2450"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2450"].aos-animate,body[data-aos-delay="2450"] [data-aos].aos-animate{transition-delay:2.45s}[data-aos][data-aos][data-aos-duration="2500"],body[data-aos-duration="2500"] [data-aos]{transition-duration:2.5s}[data-aos][data-aos][data-aos-delay="2500"],body[data-aos-delay="2500"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2500"].aos-animate,body[data-aos-delay="2500"] [data-aos].aos-animate{transition-delay:2.5s}[data-aos][data-aos][data-aos-duration="2550"],body[data-aos-duration="2550"] [data-aos]{transition-duration:2.55s}[data-aos][data-aos][data-aos-delay="2550"],body[data-aos-delay="2550"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2550"].aos-animate,body[data-aos-delay="2550"] [data-aos].aos-animate{transition-delay:2.55s}[data-aos][data-aos][data-aos-duration="2600"],body[data-aos-duration="2600"] [data-aos]{transition-duration:2.6s}[data-aos][data-aos][data-aos-delay="2600"],body[data-aos-delay="2600"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2600"].aos-animate,body[data-aos-delay="2600"] [data-aos].aos-animate{transition-delay:2.6s}[data-aos][data-aos][data-aos-duration="2650"],body[data-aos-duration="2650"] [data-aos]{transition-duration:2.65s}[data-aos][data-aos][data-aos-delay="2650"],body[data-aos-delay="2650"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2650"].aos-animate,body[data-aos-delay="2650"] [data-aos].aos-animate{transition-delay:2.65s}[data-aos][data-aos][data-aos-duration="2700"],body[data-aos-duration="2700"] [data-aos]{transition-duration:2.7s}[data-aos][data-aos][data-aos-delay="2700"],body[data-aos-delay="2700"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2700"].aos-animate,body[data-aos-delay="2700"] [data-aos].aos-animate{transition-delay:2.7s}[data-aos][data-aos][data-aos-duration="2750"],body[data-aos-duration="2750"] [data-aos]{transition-duration:2.75s}[data-aos][data-aos][data-aos-delay="2750"],body[data-aos-delay="2750"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2750"].aos-animate,body[data-aos-delay="2750"] [data-aos].aos-animate{transition-delay:2.75s}[data-aos][data-aos][data-aos-duration="2800"],body[data-aos-duration="2800"] [data-aos]{transition-duration:2.8s}[data-aos][data-aos][data-aos-delay="2800"],body[data-aos-delay="2800"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2800"].aos-animate,body[data-aos-delay="2800"] [data-aos].aos-animate{transition-delay:2.8s}[data-aos][data-aos][data-aos-duration="2850"],body[data-aos-duration="2850"] [data-aos]{transition-duration:2.85s}[data-aos][data-aos][data-aos-delay="2850"],body[data-aos-delay="2850"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2850"].aos-animate,body[data-aos-delay="2850"] [data-aos].aos-animate{transition-delay:2.85s}[data-aos][data-aos][data-aos-duration="2900"],body[data-aos-duration="2900"] [data-aos]{transition-duration:2.9s}[data-aos][data-aos][data-aos-delay="2900"],body[data-aos-delay="2900"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2900"].aos-animate,body[data-aos-delay="2900"] [data-aos].aos-animate{transition-delay:2.9s}[data-aos][data-aos][data-aos-duration="2950"],body[data-aos-duration="2950"] [data-aos]{transition-duration:2.95s}[data-aos][data-aos][data-aos-delay="2950"],body[data-aos-delay="2950"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="2950"].aos-animate,body[data-aos-delay="2950"] [data-aos].aos-animate{transition-delay:2.95s}[data-aos][data-aos][data-aos-duration="3000"],body[data-aos-duration="3000"] [data-aos]{transition-duration:3s}[data-aos][data-aos][data-aos-delay="3000"],body[data-aos-delay="3000"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="3000"].aos-animate,body[data-aos-delay="3000"] [data-aos].aos-animate{transition-delay:3s}[data-aos][data-aos][data-aos-easing=linear],body[data-aos-easing=linear] [data-aos]{transition-timing-function:cubic-bezier(.25,.25,.75,.75)}[data-aos][data-aos][data-aos-easing=ease],body[data-aos-easing=ease] [data-aos]{transition-timing-function:ease}[data-aos][data-aos][data-aos-easing=ease-in],body[data-aos-easing=ease-in] [data-aos]{transition-timing-function:ease-in}[data-aos][data-aos][data-aos-easing=ease-out],body[data-aos-easing=ease-out] [data-aos]{transition-timing-function:ease-out}[data-aos][data-aos][data-aos-easing=ease-in-out],body[data-aos-easing=ease-in-out] [data-aos]{transition-timing-function:ease-in-out}[data-aos][data-aos][data-aos-easing=ease-in-back],body[data-aos-easing=ease-in-back] [data-aos]{transition-timing-function:cubic-bezier(.6,-.28,.735,.045)}[data-aos][data-aos][data-aos-easing=ease-out-back],body[data-aos-easing=ease-out-back] [data-aos]{transition-timing-function:cubic-bezier(.175,.885,.32,1.275)}[data-aos][data-aos][data-aos-easing=ease-in-out-back],body[data-aos-easing=ease-in-out-back] [data-aos]{transition-timing-function:cubic-bezier(.68,-.55,.265,1.55)}[data-aos][data-aos][data-aos-easing=ease-in-sine],body[data-aos-easing=ease-in-sine] [data-aos]{transition-timing-function:cubic-bezier(.47,0,.745,.715)}[data-aos][data-aos][data-aos-easing=ease-out-sine],body[data-aos-easing=ease-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.39,.575,.565,1)}[data-aos][data-aos][data-aos-easing=ease-in-out-sine],body[data-aos-easing=ease-in-out-sine] [data-aos]{transition-timing-function:cubic-bezier(.445,.05,.55,.95)}[data-aos][data-aos][data-aos-easing=ease-in-quad],body[data-aos-easing=ease-in-quad] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quad],body[data-aos-easing=ease-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quad],body[data-aos-easing=ease-in-out-quad] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-cubic],body[data-aos-easing=ease-in-cubic] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-cubic],body[data-aos-easing=ease-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-cubic],body[data-aos-easing=ease-in-out-cubic] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos][data-aos][data-aos-easing=ease-in-quart],body[data-aos-easing=ease-in-quart] [data-aos]{transition-timing-function:cubic-bezier(.55,.085,.68,.53)}[data-aos][data-aos][data-aos-easing=ease-out-quart],body[data-aos-easing=ease-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.25,.46,.45,.94)}[data-aos][data-aos][data-aos-easing=ease-in-out-quart],body[data-aos-easing=ease-in-out-quart] [data-aos]{transition-timing-function:cubic-bezier(.455,.03,.515,.955)}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translateZ(0)}[data-aos=fade-up]{transform:translate3d(0,100px,0)}[data-aos=fade-down]{transform:translate3d(0,-100px,0)}[data-aos=fade-right]{transform:translate3d(-100px,0,0)}[data-aos=fade-left]{transform:translate3d(100px,0,0)}[data-aos=fade-up-right]{transform:translate3d(-100px,100px,0)}[data-aos=fade-up-left]{transform:translate3d(100px,100px,0)}[data-aos=fade-down-right]{transform:translate3d(-100px,-100px,0)}[data-aos=fade-down-left]{transform:translate3d(100px,-100px,0)}[data-aos^=zoom][data-aos^=zoom]{opacity:0;transition-property:opacity,transform}[data-aos^=zoom][data-aos^=zoom].aos-animate{opacity:1;transform:translateZ(0) scale(1)}[data-aos=zoom-in]{transform:scale(.6)}[data-aos=zoom-in-up]{transform:translate3d(0,100px,0) scale(.6)}[data-aos=zoom-in-down]{transform:translate3d(0,-100px,0) scale(.6)}[data-aos=zoom-in-right]{transform:translate3d(-100px,0,0) scale(.6)}[data-aos=zoom-in-left]{transform:translate3d(100px,0,0) scale(.6)}[data-aos=zoom-out]{transform:scale(1.2)}[data-aos=zoom-out-up]{transform:translate3d(0,100px,0) scale(1.2)}[data-aos=zoom-out-down]{transform:translate3d(0,-100px,0) scale(1.2)}[data-aos=zoom-out-right]{transform:translate3d(-100px,0,0) scale(1.2)}[data-aos=zoom-out-left]{transform:translate3d(100px,0,0) scale(1.2)}[data-aos^=slide][data-aos^=slide]{transition-property:transform}[data-aos^=slide][data-aos^=slide].aos-animate{transform:translateZ(0)}[data-aos=slide-up]{transform:translate3d(0,100%,0)}[data-aos=slide-down]{transform:translate3d(0,-100%,0)}[data-aos=slide-right]{transform:translate3d(-100%,0,0)}[data-aos=slide-left]{transform:translate3d(100%,0,0)}[data-aos^=flip][data-aos^=flip]{backface-visibility:hidden;transition-property:transform}[data-aos=flip-left]{transform:perspective(2500px) rotateY(-100deg)}[data-aos=flip-left].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-right]{transform:perspective(2500px) rotateY(100deg)}[data-aos=flip-right].aos-animate{transform:perspective(2500px) rotateY(0)}[data-aos=flip-up]{transform:perspective(2500px) rotateX(-100deg)}[data-aos=flip-up].aos-animate{transform:perspective(2500px) rotateX(0)}[data-aos=flip-down]{transform:perspective(2500px) rotateX(100deg)}[data-aos=flip-down].aos-animate{transform:perspective(2500px) rotateX(0)}

/* ===== css/reset.css ===== */
@charset "utf-8";
/* Pretendard 폰트 선언은 여기 있었다 (풀셋 woff2 9종 직접 로드).
   2026-07-31 제거 — 한글 한 글자만 써도 750KB 파일을 통째로 받아
   메인 한 페이지에서 폰트만 3.77MB 를 소비했다(Lighthouse 실측).
   지금은 header.php 에서 자체 호스팅 Pretendard Variable 동적 서브셋을 불러온다:
     /assets/fonts/pretendard/pretendardvariable-dynamic-subset.css  (assets/fonts/pretendard/README.txt)
   Variable 판은 굵기 축이 하나라 조각 하나가 전 굵기를 담는다(요청 수가 크게 준다).
   font-family 이름이 'Pretendard Variable' 이므로 아래 body 폰트 스택이 그 이름을 먼저 찾는다.
   여기에 @font-face 를 다시 넣지 말 것 — 중복 선언되면 서브셋과 풀셋을 둘 다 받게 된다. */

* {padding:0; margin:0; box-sizing:border-box !important; scrollbar-width:thin; scrollbar-color: #6366F1 #fff; --scrollbar-size:6px;}
html {scroll-behavior:smooth; font-size:16px;}
html.hidden{overflow: hidden;}
/* 폰트 스택: Pretendard Variable(자체 호스팅 동적 서브셋) → 시스템 한글 → sans-serif.
   'Pretendard Variable' 이 먼저다. 이름이 다르므로 이 스택을 임의로 줄이면 폰트가 적용되지 않는다. */
body {background-color: #fff; font-family:"Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size:16px; font-weight:400; line-height:1.5; color:#404040; font-optical-sizing:auto;}

html, body {width:100%; min-height:100%;}

h1, h2, h3, h4, h5, h6 {font-size:inherit; font-weight:inherit;}
ul, ol, li {list-style:none; margin: 0;}
a {display:inline-block; color:inherit; text-decoration:none; cursor:pointer;}
span {display:inline-block;}
i, em, address {font-style:normal;}
strong, b {font-weight:inherit;}
p {word-break:keep-all;}
input::placeholder, textarea::placeholder {color:inherit; opacity:1;}
select::-ms-expand {display:none;}

button {color:inherit; background:inherit; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer;}
button, input, select, textarea {font:inherit; color:inherit;}
input, textarea, select {border:none; outline:none; background:none; border-radius:0; appearance:none; -webkit-appearance:none;}
textarea {resize:none;}
input[type="button"], input[type="submit"], input[type="reset"], button {cursor:pointer;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {display:none;}

img, picture, video, canvas, svg {display:block; max-width:100%; height:auto;}
img {border:0; vertical-align:top;}

table {width:100%; border-collapse:collapse; border-spacing:0;}
table, th, td {border:none; padding:0; margin:0;}

fieldset {border:0; min-width:0;}
legend, caption {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

label {cursor:pointer;}
iframe {border:0;}
hr {border:0; margin:0;}

/* ===== css/common.css ===== */
@charset "utf-8";
/* inner */
.l-inner, .m-inner, .s-inner {width: calc(100% - 100px); margin-inline: auto;}
.l-inner {max-width: 1520px;}
.m-inner {max-width: 1390px;}
.s-inner {max-width: 1262px;}

/* 인풋 */
input[type="submit"] {cursor:pointer;}

/* =========================================================

========================================================= */
:root {
    --header-height: 0px;
    
    /* main color */
    --color-main: #6366F1;
    /* 흰 글자를 얹는 '채움' 배경 전용 색 (2026-07-31).
       #6366F1 + 흰 글자는 4.47:1 로 WCAG AA 기준(4.5:1)에 미달해 Lighthouse 접근성에서 걸렸다.
       #5A5DEB 는 흰색 5.00:1 · #FAFAFA 4.79:1 로 통과하며 같은 계열이라 육안 차이가 거의 없다.
       테두리·아이콘·글자색으로 쓰는 --color-main 은 그대로 둔다(흰 배경 위라 대비가 이미 충분). */
    --color-main-strong: #5A5DEB;
    --rgb-main: 99 102 241;
    --color-main-rgb: 99,102,241;
    --color-main-30: #6366F14D;
    --color-main-10: #6366F11A;
    --color-sub: #262626;

    /* base color */
    --color-white: #fff;
    --color-white-30: #ffffff4D;
    --color-black: #000;
    --color-black-rgb: 0,0,0;

    /* state color */
    --color-red: #EF4444;
    --color-green: #34C759;

    /* grayscale */
    --grayscale11: #0A0A0A;
    --grayscale10: #171717;
    --grayscale9: #262626;
    --grayscale8: #404040;
    --grayscale7: #525252;
    --grayscale6: #737373;
    --grayscale5: #A3A3A3;
    --grayscale4: #D4D4D4;
    --grayscale3: #E5E5E5;
    --grayscale2: #F5F5F5;
    --grayscale1: #FAFAFA;

    /* font size */
    --fs-80: clamp(48px, 5.56vw, 80px);
    --fs-64: clamp(40px, 4.44vw, 64px);
    --fs-60: clamp(38px, 4.17vw, 60px);
    --fs-50: clamp(36px, 3.47vw, 50px);
    --fs-48: clamp(34px, 3.33vw, 48px);
    --fs-44: clamp(32px, 3.05vw, 44px);
    --fs-42: clamp(31px, 2.92vw, 42px);
    --fs-40: clamp(30px, 2.78vw, 40px);
    --fs-36: clamp(28px, 2.5vw, 36px);
    --fs-32: clamp(26px, 2.22vw, 32px);
    --fs-30: clamp(25px, 2.08vw, 30px);
    --fs-28: clamp(24px, 1.94vw, 28px);
    --fs-24: clamp(20px, 1.67vw, 24px);
    --fs-20: clamp(18px, 1.39vw, 20px);
    --fs-18: clamp(16px, 1.25vw, 18px);
    --fs-16: clamp(15px, 1.11vw, 16px);
    --fs-14: clamp(12px, 0.97vw, 14px);
    --fs-12: clamp(10px, 0.83vw, 12px);

    /* space */
    --space-160: clamp(80px, 11.11vw, 160px);
    --space-120: clamp(70px, 8.33vw, 120px);
    --space-100: clamp(60px, 6.94vw, 100px);

    /* shadow */
    --sitelo-shadow:0px 0px 30px #0000000D;
}

.w-100 {width: 100%;}
.mt20 {margin-top: var(--fs-20);}

/* 텍스트 */
.hero-tit {word-break: keep-all; font-size:var(--fs-64); font-weight: 700; line-height:1.2; color:var(--grayscale11);}
.section-tit {word-break: keep-all; font-size:var(--fs-36); font-weight: 600; line-height:1.3; color:var(--grayscale11);}
.section-tit2 {font-size:var(--fs-32); font-weight: 600; line-height:1.4; color:var(--grayscale11);}
.card-tit, .hero-sub {font-size:var(--fs-24); font-weight: 500;; line-height:1.5; color:var(--grayscale9);}
.table-txt {font-size:var(--fs-20); font-weight: 500;; line-height:1.5; color:var(--grayscale9);}
.section-sub,
.body-txt {font-size:var(--fs-18); font-weight: 400;; line-height:1.5; color:var(--grayscale7);}
.sub-txt {font-size:var(--fs-16); font-weight: 400;; line-height:1.5; color:var(--grayscale6);}
.card-txt {font-size:var(--fs-14); font-weight: 300; line-height:1.5; color:var(--grayscale8);}
.badge-txt {font-size:var(--fs-14); font-weight: 300; line-height:1.5; color:var(--grayscale6);}
.desc {font-size: var(--fs-16); color: var(--grayscale6);}
.body-large {font-size: var(--fs-18); line-height: 1.5;}
.body-medium {font-size: var(--fs-16); line-height: 1.5;}
.body-small {font-size: var(--fs-14); line-height: 1.5;}

/* 색상 */
.bg-gray {background-color: var(--grayscale1);}

/* 공통요소 */
.s-inner.center > * {text-align: center;}
.thumb-wrap img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.section-tit-wrap {display: flex; flex-direction: column; row-gap: 16px; margin-bottom: 80px;}
.section-tit-wrap.center > * {text-align: center;}
.subpage-section .hero-sub {margin-top: 24px; color: var(--grayscale8);}
.sub-tit {font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.body-tit {font-size: var(--fs-24); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.txt-wrap.center > * {text-align: center;}

/* =========================================================
    COMMON COMPONENT CSS

    포함 컴포넌트
    01. textbox
    02. label + textbox
    03. dropdown button
    04. selectbox
    05. button - s-btn / m-btn / l-btn
    06. badge
    07. toggle
    08. sort
    09. pagination
    10. FAQ

========================================================= */

/* =========================================================
    01. TEXTBOX

    [HTML]
    <input type="text" class="textbox" placeholder="내용을 입력해주세요.">

    <textarea class="textbox textarea" placeholder="내용을 입력해주세요."></textarea>
========================================================= */
.textbox {transition:border-color 0.2s, box-shadow 0.2s; width:100%; height: calc(var(--fs-20) * 3); padding:0 var(--fs-16); border:1px solid var(--grayscale3); border-radius: 8px; background-color:var(--color-white); font-size:var(--fs-18); font-weight: 400;; color:var(--grayscale8);}
.textbox::placeholder {color:var(--grayscale5); opacity:1;}
.textbox:focus {border-color:var(--color-main); border: 1px solid var(--color-main);}
.textbox:disabled {background-color:var(--grayscale2); color:var(--grayscale5); cursor:not-allowed;}
.textbox.textarea {height:auto; min-height:150px; padding:var(--fs-16); line-height:1.5; resize:none; overflow:auto;}

/* =========================================================
    02. LABEL + TEXTBOX

    [HTML]
    <div class="input-item">
        <label for="userName">이름 <span class="required">*</span></label>
        <input type="text" id="userName" class="textbox" placeholder="이름을 입력해주세요.">
        <p class="input-guide">안내 문구가 들어갑니다.</p>
    </div>

    [ERROR]
    <div class="input-item is-error">
        <label for="userEmail">이메일 <span class="required">*</span></label>
        <input type="email" id="userEmail" class="textbox" placeholder="이메일을 입력해주세요.">
        <p class="input-msg">올바른 이메일을 입력해주세요.</p>
    </div>

    [SUCCESS]
    <div class="input-item is-success">
        <label for="userPhone">연락처</label>
        <input type="tel" id="userPhone" class="textbox" placeholder="연락처를 입력해주세요.">
        <p class="input-msg">사용 가능한 연락처입니다.</p>
    </div>
========================================================= */
.input-multi {display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
.input-item {display:flex; flex-direction:column; row-gap:8px;}
.input-item label {font-size: var(--fs-18); color:var(--grayscale9);}
.input-item label .required {color:var(--color-main);}
.input-item .input-guide {font-size:var(--fs-14); font-weight: 400;; color:var(--grayscale5);}
.input-item .desc {color: var(--grayscale7);}
.input-item .input-msg {display:none; font-size:var(--fs-14); font-weight: 400;}
.input-item.is-error .textbox {border-color:var(--color-red);}
.input-item.is-error .input-msg {display:block; color:var(--color-red);}
.input-item.is-success .textbox {border-color:var(--color-green);}
.input-item.is-success .input-msg {display:block; color:var(--color-green);}
.input-item .input-item-btn {display: flex; column-gap: 8px;}

/* =========================================================
    03. DROPDOWN BUTTON

    select 대신 button으로 만드는 드롭다운

    [HTML]
    <div class="dropdown">
        <button type="button" class="dropdown-btn">
            <span>문의 유형을 선택해주세요.</span>
        </button>

        <ul class="dropdown-list">
            <li><button type="button">예약 시스템 문의</button></li>
            <li><button type="button" class="active">결제 연동 문의</button></li>
            <li><button type="button">세팅 문의</button></li>
            <li><button type="button">기타 문의</button></li>
        </ul>
    </div>

    [OPEN]
    <div class="dropdown open">...</div>
========================================================= */
.dropdown {position:relative; width:100%;}
.dropdown-btn {transition:border-color 0.2s, box-shadow 0.2s; position:relative; width:100%; height:60px; display: flex; align-items: center; justify-content: space-between; padding:0 16px; border:1px solid var(--grayscale3); border-radius:8px; background-color:var(--color-white); text-align:left; font-size:var(--fs-18); font-weight: 400;; color:var(--grayscale5);}
.dropdown-btn span {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dropdown-btn svg {transform:rotate(0deg); transition:transform 0.2s;}
/*.dropdown-btn::after {content:''; position:absolute; top:50%; right:23px; width:8px; height:8px; border-right:2px solid var(--grayscale6); border-bottom:2px solid var(--grayscale6); transform:translateY(-65%) rotate(45deg); transition:transform 0.2s;}*/
.dropdown.open .dropdown-btn {border-color:var(--color-main);}
.dropdown.open .dropdown-btn svg {transform:rotate(180deg);}
.dropdown-list {display:none; overflow:hidden; position:absolute; top:calc(100% + 8px); left:0; z-index:50; width:100%; border:1px solid var(--grayscale3); border-radius:12px; background-color:var(--color-white); box-shadow:0 12px 30px rgba(var(--color-black-rgb),0.08);}
.dropdown.open .dropdown-list {display:block;}
.dropdown.selected .dropdown-btn span {color:var(--grayscale8);}
.dropdown-list li button {width:100%; min-height:60px; padding:0 16px; border-radius: 8px; text-align:left; font-size:var(--fs-18); font-weight: 400;; color:var(--grayscale8);}
.dropdown-list li button:hover,
.dropdown-list li button.active {background-color:var(--color-main-strong); color:var(--color-white);}
.dropdown-list li button:disabled {color:var(--grayscale5); cursor:not-allowed;}
.dropdown-list li button:disabled:hover {background-color:var(--color-white);;}

/* =========================================================
04. SELECTBOX

[HTML]
    <div class="selectbox">
        <select>
            <option value="">문의 유형을 선택해주세요.</option>
            <option value="reservation">예약 시스템 문의</option>
            <option value="payment">결제 연동 문의</option>
            <option value="setting">세팅 문의</option>
        </select>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17 9L12.1414 13.8586C12.0633 13.9367 11.9367 13.9367 11.8586 13.8586L7 9" stroke="#737373" stroke-width="2" stroke-linecap="round"/>
        </svg>
    </div>
========================================================= */
.selectbox {position:relative;}
.selectbox select {transition:border-color 0.2s, box-shadow 0.2s; cursor:pointer; width:100%; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 48px 0 16px; border:1px solid var(--grayscale3); border-radius:8px; background-color:var(--color-white); text-align:left; font-size:var(--fs-18); font-weight:400; color:var(--grayscale5);}
.selectbox.selected select {color:var(--grayscale8);}
.selectbox svg {position:absolute; top:50%; right:16px; transform:translate(0,-50%) rotate(0deg); transition:transform 0.3s ease; pointer-events:none;}
.selectbox select:focus {border:1px solid var(--color-main); outline:0;}
.selectbox:focus-within svg {transform:translate(0,-50%) rotate(180deg);}

/* =========================================================
    05. BUTTON

    [HTML]
    <button type="button" class="s-btn primary">작은 버튼</button>
    <button type="button" class="m-btn primary">중간 버튼</button>
    <button type="button" class="l-btn primary">큰 버튼</button>

    [COLOR]
    primary / dark / gray / line / white

    <button type="button" class="m-btn line">취소</button>
========================================================= */
.btn-wrap {display: flex; align-items: center; column-gap: var(--fs-20);}
.btn-wrap.center {justify-content: center;}
.btn-list {display: flex; align-items: center; flex-direction: column; row-gap: 12px;}
.s-btn, .s2-btn, .m-btn, .l-btn, .l2-btn, .input-btn, .ico-btn {transition: box-shadow 0.2s ease; display:inline-flex; align-items:center; justify-content:center; column-gap:6px; border:1px solid transparent; border-radius:12px; font-weight: 500;; white-space:nowrap;}
.s-btn {padding: 10px 24px; font-size:var(--fs-16);}
.s2-btn {padding: 12px 24px; font-size:var(--fs-16);}
.m-btn {padding: 13px 24px; font-size:var(--fs-16);}
.l-btn {padding: 14.5px 24px; font-size:var(--fs-18);}
.l2-btn {padding: 18.5px 24px; font-size:var(--fs-18);}
.input-btn {height: calc(var(--fs-20) * 3); padding: 0 calc(var(--fs-16) * 2); font-size:var(--fs-16);}
.s-btn.w-100, .s2-btn.w-100, .m-btn.w-100, .l-btn.w-100, .l2-btn.w-100 {width: 100%;}
.s-btn:disabled, .s2-btn:disabled, .m-btn:disabled, .l-btn:disabled , .l2-btn:disabled {background-color:var(--grayscale3); border-color:var(--grayscale3); color:var(--grayscale5); cursor:not-allowed;}
.round-btn {transition: box-shadow 0.2s ease; border: 2px solid transparent; font-weight: 600; padding: 9.5px 48px; border-radius: 999px; font-size: var(--fs-32);}
.ico-btn {padding: 10px 12px;}
/* 버튼색 */
.primary-line-btn {background-color:var(--color-white); color:var(--color-main); border-color: var(--color-main);}
.primary-btn {background-color:var(--color-main-strong); color:var(--grayscale1);}
.white-btn {border-color:var(--grayscale3); background-color:var(--color-white); color:var(--grayscale8);}


/* =========================================================
    06. BADGE

    [HTML]
    <span class="badge">기본</span>
========================================================= */
.badge-wrap {display: flex; align-items: center; column-gap: 8px;}
.badge {display:inline-flex; align-items:center; justify-content:center; width:fit-content; min-height:28px; padding:5px 10px; border:1px solid transparent; border-radius:999px; background-color: var(--grayscale2); color: var(--grayscale6); font-size:var(--fs-14); font-weight: 500;; line-height:1;}
.badge.primary {color: var(--color-main);}
.badge.primary-bg {color: var(--color-main); background-color: #6366F133;}
.badge.red-bg {color: var(--color-red); background-color: #FEF2F2;}

/* =========================================================
    07. TOGGLE

    [HTML]
    <div class="toggle-wrap">
        <button class="toggle-btn active">월간 결제</button>
        <button class="toggle-btn">연간 결제</button>
    </div>

========================================================= */
.toggle-wrap {position: relative; width: fit-content; padding: 4px; border-radius: 99px; border: 1px solid var(--grayscale3); background-color: var(--color-white); display: flex; align-items: center;}
.toggle-wrap::after {content: ''; z-index: 0; position: absolute; top: 4px; left: 4px; width: var(--toggle-width, 0px); height: calc(100% - 8px); border-radius: 99px; background-color: var(--color-main); transform: translateX(var(--toggle-left, 0px)); transition: transform 0.25s ease, width 0.25s ease;}
.toggle-wrap .toggle-btn {z-index: 1; position: relative; transition: color 0.2s ease; padding: 8px 30px; border-radius: 99px; font-size: var(--fs-18); background-color: transparent; font-weight: 500; line-height: 1.5; color: var(--grayscale8);}
.toggle-wrap .toggle-btn.active {color: var(--color-white);}
.toggle-wrap .toggle-btn:not(.active):hover {color: var(--color-main);}
.toggle-wrap .toggle-btn[data-plan="yearly"] {position: relative;}
.toggle-wrap .toggle-btn[data-plan="yearly"]::after {content: '2개월 할인'; font-size: var(--fs-14); font-weight: 600; line-height: 1.5; color: #0AA121; background-color: #DAF1DE; padding: 4px 12px; border-radius: 99px; position: absolute; left: 50%; bottom: 50%; transform: translate(-50%,-12px); white-space: nowrap;}

/* =========================================================
    08. SORT

    [HTML]
    <div class="sort">
        <button type="button" class="sort-btn active">최신순</button>
        <button type="button" class="sort-btn">인기순</button>
        <button type="button" class="sort-btn">조회순</button>
    </div>

    [SELECT 형태]
    <div class="sort-select">
        <button type="button">최신순</button>
    </div>
========================================================= */
.sort {display:flex; align-items:center; flex-wrap:wrap;}
.sort-btn {transition: color 0.3s; font-size: var(--fs-14); font-weight: 500; line-height: 1.5; color: var(--grayscale6);}
.sort-btn:hover {color: var(--grayscale9);}
.sort-btn.active {color: var(--color-main);}
.sort-btn+.sort-btn {margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--grayscale3);}

/* =========================================================
    09. PAGINATION

    [HTML]
    <nav class="pagination">
        <a href="#" class="arrow prev disable" aria-label="이전 페이지">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M14 17L9.14142 12.1414C9.06332 12.0633 9.06332 11.9367 9.14142 11.8586L14 7" stroke="#737373" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </a>
        <a href="#">1</a>
        <a href="#" class="active">2</a>
        <a href="#">3</a>
        <span>...</span>
        <a href="#">10</a>
        <a href="#" class="arrow next" aria-label="다음 페이지">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9 7L13.8586 11.8586C13.9367 11.9367 13.9367 12.0633 13.8586 12.1414L9 17" stroke="#737373" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </a>
    </nav>
========================================================= */
.pagination {display:flex; align-items:center; justify-content:center; gap: var(--fs-16); margin-top:calc(var(--fs-20) * 5);}
.pagination a,
.pagination span {transition:background-color 0.2s, border-color 0.2s, color 0.2s; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid transparent; border-radius:99px; font-size:var(--fs-16); font-weight: 500;; color:var(--grayscale6);}
.pagination a:hover {color: var(--grayscale9);}
.pagination a.active {background-color:var(--color-main-strong); color:var(--color-white);}
.pagination a.arrow.disable {pointer-events: none;}
.pagination a.arrow.disable svg path {stroke: var(--grayscale4);}
.pagination a.arrow:hover svg path {stroke: var(--grayscale9);}


/* =========================================================
    10. FAQ

    [HTML]
    <div class="faq-list">
        <div class="faq-item">
            <button type="button" class="faq-question">
                <span class="faq-num">01</span>
                <span class="faq-tit">세팅 기간은 얼마나 걸리나요</span>
            </button>
            <div class="faq-answer">
                <p>약 3~7일 정도 소요되며 세팅 내용과 일정에 따라 상이할 수 있으며,<br>정확한 일정은 상담 후 안내드립니다.</p>
            </div>
        </div>

        <div class="faq-item">
            <button type="button" class="faq-question">
                <span class="faq-num">02</span>
                <span class="faq-tit">자동결제는 어떻게 진행되나요?</span>
            </button>
            <div class="faq-answer">
                <p>자동결제 안내 내용이 들어갑니다.</p>
            </div>
        </div>
    </div>

    [OPEN]
    <div class="faq-item open">...</div>
========================================================= */
.faq-list {}
.faq-item {border-bottom:1px solid var(--grayscale3); padding-block: calc((var(--fs-20) * 2) - 6px);}
.faq-item:first-child {padding-top: 0;}
.faq-item .faq-question {height: calc(var(--fs-24) * 2); position:relative; display:flex; align-items:center; width:100%; text-align:left; column-gap: 12px;}
.faq-item .faq-question .faq-num,
.faq-item .faq-question .faq-tit {font-size:var(--fs-24); font-weight: 500; line-height:1.5; color:var(--grayscale9);}
.faq-item .faq-question::after {content:''; background-image: url(../img/faq-arrow.svg); background-repeat: no-repeat; background-position: center center; position:absolute; top:50%; right:4px; width: var(--fs-36); height: var(--fs-36); transform: translateY(-50%); transition:transform 0.25s ease;}
.faq-item .faq-answer {overflow:hidden; height:0; opacity:0; padding-top: 0; transition:height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;}
.faq-item .faq-answer p {padding-top: var(--fs-36); font-size:var(--fs-18); line-height: 1.5; color:var(--grayscale8);}
.faq-item.open .faq-question::after {transform: translateY(-50%) rotate(180deg);}
.faq-item.open .faq-answer {opacity:1;}




/* =========================================================
    11. Tab

    [HTML]
    <div class="tab swiper">
        <div class="swiper-wrapper">
            <button type="button" class="tab-btn swiper-slide active">탭1</button>
            <button type="button" class="tab-btn swiper-slide">탭2</button>
            <button type="button" class="tab-btn swiper-slide">탭3</button>
        </div>
    </div>

    [ACTIVE]
    <button type="button" class="tab-btn active">전체</button>
========================================================= */
.tab {overflow:hidden; width:100%;}
.tab .swiper-wrapper {display:flex; align-items:center;}
.tab .tab-btn {width:auto; flex-shrink:0; transition:background-color 0.3s, border-color 0.3s, color 0.3s; padding:7.5px 20px; border-radius:99px; border:1px solid var(--grayscale3); background-color:var(--color-white); font-size:var(--fs-14); font-weight:500; line-height:1.5; color:var(--grayscale6);}
.tab .tab-btn:hover {border-color:var(--color-main); color:var(--color-main);}
.tab .tab-btn.active {background-color:var(--color-main-strong); border-color:var(--color-main-strong); color:var(--color-white);}


/* =========================================================
   12. 모달

    <button type="button" data-modal-open="testModal">모달열기</button>

    <div class="modal" id="testModal">
        <div class="modal-tit-wrap">
            <h4 class="modal-tit">모달 제목</h4>
            <button type="button" class="modal-close-btn">닫기</button>
        </div>
        <div class="modal-cont">
            <p>모달 내용입니다.</p>
        </div>
    </div>
    <div class="modal-bg"></div>

========================================================= */
.modal {scrollbar-width: thin; scrollbar-color: rgba(var(--color-black-rgb),0.1) transparent; display: none; width: 90%; max-width: 600px; height: fit-content; max-height: 80vh; overflow-y: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 24px; border-radius: 12px; background-color: var(--color-white); z-index: 999999;}
.modal-bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-black); opacity: 0.5; z-index: 999998;}
.modal.open,
.modal.open+.modal-bg {display: block !important;}
.modal::-webkit-scrollbar {display: none;}
.modal .modal-tit-wrap {display: flex; align-items: center; justify-content: space-between;}
.modal .modal-tit {font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.modal .modal-close-btn {border-radius: 50%; transition: box-shadow 0.2s ease; font-size: 0; width: 32px; height: 32px; background-image: url(../img/modal-close.svg); background-repeat: no-repeat; background-position: center; background-size: contain;}
.modal .modal-cont {margin-top: 20px;}

.price-slider-wrap {display:flex; flex-direction:column; align-items:center;}
.price-slider-wrap .price-wrap {position:relative;}
.price-slider-wrap .price-arrow {display:none;}
.price-slider-wrap > .desc {margin-top:40px;}
.price-slider-wrap .price-slider {width:100%; max-width:1006px; margin-top:60px;}
.price-slider-wrap .price-panel {display:none;}
.price-slider-wrap .price-panel.active {display:block;}
.price-slider-wrap .price-wrap {overflow:visible; width:100%;}
.price-slider-wrap .price-card-list {align-items:stretch;}
.price-slider-wrap .price-card {height:auto; display:flex; flex-direction:column; justify-content: space-between; padding: var(--fs-30); border-radius:8px; border:1px solid var(--grayscale3); background:var(--color-white); box-shadow: var(--sitelo-shadow);}
.price-slider-wrap .price-card.recommend {border-color:var(--color-main);}
.price-slider-wrap .price-card .info-wrap {display:flex; flex-direction:column;}
.price-slider-wrap .price-card .card-head {display:flex; flex-direction:column; align-items:flex-start; min-height:84px;}
.price-slider-wrap .price-card .card-head .card-tit {margin-top: 8px;color:var(--grayscale9);}
.price-slider-wrap .price-card .card-head .card-txt {margin-top:4px; color:var(--grayscale8); word-break:keep-all;}
.price-slider-wrap .price-card .card-badge-wrap {display:flex; align-items:center; gap:6px;}
.price-slider-wrap .price-card .badge.blind {opacity: 0;}
.price-slider-wrap .price-card .recommend-badge,
.price-slider-wrap .price-card .benefit-badge {color:var(--color-white); background:var(--color-main);}
.price-slider-wrap .price-card .benefit-badge {color: #0AA121; background:#DAF1DE;}
.price-slider-wrap .price-card .price-box {margin-top: var(--fs-24); padding-block: var(--fs-28); display: flex; flex-direction: row-reverse; align-items:end; justify-content: space-between; row-gap: 4px; border-top:1px solid var(--grayscale3); border-bottom:1px solid var(--grayscale3);}
.price-slider-wrap .price-card .price-box:has(+ .discount-item) {padding-bottom: 0; border-bottom: 0;}
.price-slider-wrap .price-card .price-column {width: fit-content; min-width:0; display:flex; flex-direction:column; row-gap:4px;}
.price-slider-wrap .price-card .price-column > span {font-size:var(--fs-16); line-height:1.5; color:var(--grayscale7);}
.price-slider-wrap .price-card .price-item {display:flex; align-items:baseline; gap:3px; white-space:nowrap;}
/* .price-slider-wrap .price-card .price-item strong {font-size:var(--fs-32); font-weight:700; line-height:1.3; color:var(--grayscale9);} */
.price-slider-wrap .price-card .price-item strong.price-txt {color:var(--color-main);}
.price-slider-wrap .price-card .price-item > span {font-size: var(--fs-16); font-weight:400; color:var(--grayscale7);}
.price-slider-wrap .price-card .price-plus {padding-bottom: 6px; font-size:var(--fs-24); font-weight:500; font-style:normal; color:var(--grayscale8);}
.price-slider-wrap .price-card .discount-item {padding-bottom: var(--fs-28); border-bottom: 1px solid var(--grayscale3); display:flex; align-items:center; justify-content: flex-end; gap:8px; margin-top: 4px;}
.price-slider-wrap .price-card .discount-item del {font-size:var(--fs-20); font-weight:500; line-height:1.5; color:var(--grayscale5);}
.price-slider-wrap .price-card .discount-item .badge {background-color: #FEF2F2; color: #EF4444;}
.price-slider-wrap .price-card .feature-list {display:grid; grid-template-columns:1fr; gap:12px; margin-top: var(--fs-24); padding-bottom: 0;}
.price-slider-wrap .price-card.recommend .feature-list {grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:24px;}
.price-slider-wrap .price-card .feature-list li {}
.price-slider-wrap .price-card .feature-list li.toss-point {margin-bottom: 12px; grid-column:1 / -1; display:flex; justify-content:center; align-items:center; flex-wrap: wrap; column-gap: 12px; padding-inline: 4px; padding-block: 12px; border-radius:99px; font-size: var(--fs-16); font-weight:600; line-height: 1.5; color:#238143; background:#e2f6e6;}
.price-slider-wrap .price-card .feature-list li.toss-point::after {display: none;}
.price-slider-wrap .price-card .feature-list li.button-li {display:none; margin-top:0;}
.price-slider-wrap .price-card .feature-list li.button-li::before {content:'+';}
.price-slider-wrap .price-card > .s-btn {width:100%; margin-top: var(--fs-30);}

.price-item {flex-wrap: wrap; display:flex; align-items:center; gap:4px;}
.price-item strong {font-size:var(--fs-36); color:var(--grayscale9); font-weight:600; line-height:1.3;}
.price-item span {font-size:var(--fs-16); color:var(--grayscale7);}
.price-item em {font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.price-item b {font-size:var(--fs-24); font-weight:500; line-height:1.5; color:var(--grayscale7);}


.feature-list {display:flex; flex-direction:column; row-gap:12px; padding-bottom: 24px;}
.feature-list li {padding-left: calc(var(--fs-20)*2); font-size:var(--fs-18); color:var(--grayscale8); position:relative;}
.feature-list li::after {width:20px; height:20px; content:''; display:block; background-image:url(../img/list-check.svg); background-repeat:no-repeat; background-position:center center; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.feature-list li.point {font-size:var(--fs-20); color:var(--color-main); font-weight: 500;}
.modal .feature-list {padding-bottom: 0;}

.template-wrap {width: 100%;}
.template-wrap.swiper .template-list {column-gap: unset; flex-wrap: unset;}
.template-wrap.swiper .template-card {box-shadow: unset;}
.template-wrap.swiper .template-card .info-wrap {padding-bottom: 24px;}
.template-list {display: flex; align-items: center; flex-wrap: wrap; column-gap: 24px; row-gap: 48px;}
.template-card {width: calc(100% / 3 - 48px / 3); overflow: hidden; box-shadow: var(--sitelo-shadow);border-radius: 16px; border: 1px solid var(--grayscale3);}
.template-card .thumb-wrap {overflow: hidden; aspect-ratio: 490 / 460; width: 100%; height: auto; border-bottom: 1px solid var(--grayscale3);}
.template-card .thumb-wrap img {transition: transform 0.3s;}
.template-card .info-wrap {padding: 24px; padding-bottom: 42px; display: flex; flex-direction: column; row-gap: 6px;}
.template-card .info-wrap .card-txt {display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.template-card .info-wrap .btn-wrap {column-gap: 8px; margin-top: var(--fs-14);}

/* =========================================================
   13. SEARCH BOX

        <div class="search-box">
            <input type="text" class="textbox" placeholder="텍스트를 입력해주세요.">
            <button type="submit" class="btn-search">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#737373" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </button>
        </div>

========================================================= */
.search-box {position: relative; max-width: 748px; margin: 0 auto;}
.search-box .textbox {padding: 0 56px 0 16px;}
.search-box button {position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}

/* =========================================================
   14. Inquiry form

        <div class="input-form-wrap">
            <form>
                <div class="input-multi">
                    <div class="input-item">
                        <label>이름</label>
                        <input type="text" class="textbox" placeholder="이름">
                    </div>

                    <div class="input-item">
                        <label>연락처</label>
                        <input type="text" class="textbox" placeholder="01012345678">
                    </div>
                </div>
                <div class="input-item">
                    <label>이메일</label>
                    <input type="email" class="textbox" placeholder="example@email.com">
                </div>
                <div class="input-item">
                    <label>문의 유형</label>
                    <div class="dropdown">
                        <button type="button" class="dropdown-btn">
                            <span>문의 유형을 선택해주세요.</span>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17 9L12.1414 13.8586C12.0633 13.9367 11.9367 13.9367 11.8586 13.8586L7 9" stroke="#737373" stroke-width="2" stroke-linecap="round"></path>
                            </svg>
                        </button>

                        <ul class="dropdown-list">
                            <li><button type="button">예약 시스템 문의</button></li>
                            <li><button type="button" class="active">결제 연동 문의</button></li>
                            <li><button type="button">세팅 문의</button></li>
                            <li><button type="button">기타 문의</button></li>
                        </ul>
                    </div>
                </div>
                <div class="input-item">
                    <label>문의 내용</label>
                    <textarea class="textbox textarea" placeholder="문의사항을 입력해주세요."></textarea>
                </div>

                <button type="submit" class="primary-btn l2-btn w-100">
                    문의 접수하기
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.5 12L19.5 12M15 17L19.5 12L15 7" stroke="#FAFAFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    </svg>
                </button>
            </form>
        </div>

========================================================= */

.input-form-wrap {width:100%; max-width:620px; padding:40px; border-radius:16px; background:var(--color-white); box-shadow:var(--sitelo-shadow);}
.input-form-wrap form {display:flex; flex-direction:column; row-gap:30px;}

/* =========================================================
    15. CUSTOM CHECKBOX

    [HTML]
    <div class="custom-chk">
        <input type="checkbox" id="agreeCheck" name="agree_check">
        <label for="agreeCheck">
            <span></span>
            <em>체크박스 텍스트</em>
        </label>
    </div>
========================================================= */
.custom-chk {display:flex; align-items:center; gap:7px; font-size:var(--fs-14); color:var(--grayscale6); font-weight:400;}
.custom-chk input[type="checkbox"] {display:none;}
.custom-chk label {cursor:pointer; display:flex; align-items:center;}
.custom-chk label span {flex-shrink:0; display:inline-block; width:17px; height:17px; margin-right:10px; border:1px solid var(--grayscale5); border-radius:2.5px; background-color:var(--color-white); background-image:url(../img/check-ico.svg); background-size:60%; background-repeat:no-repeat; background-position:center center; transition:all 0.2s ease;}
.custom-chk label em {font-style:normal; font-size:var(--fs-18); font-weight:400; line-height:1.5; color:var(--grayscale8);}
.custom-chk label em b {color:var(--grayscale6);}
.custom-chk input[type="checkbox"]:checked + label span {border-color:var(--color-main); background-color:var(--color-main);}

/* =========================================================
    HOVER
========================================================= */
@media (hover:hover) {
    .primary-line-btn:hover {}
    .primary-btn:hover {}
    .white-btn:hover {}
    .modal .modal-close-btn:hover,
    .round-btn:hover, .s-btn:hover, .s2-btn:hover, .m-btn:hover, .l-btn:hover, .l2-btn:hover, .ico-btn:hover {box-shadow: 0 0 0 5px #ADADAD4D;}
    .template-card:hover .thumb-wrap img {transform: scale(1.1);}
}

/* =========================================================
    RESPONSIVE
========================================================= */
@media screen and (max-width: 1440px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 80px);}
}
@media screen and (max-width: 1280px) {
    .template-list {column-gap: 20px;}
    .template-card {width: calc(100% / 3 - 40px / 3);}
    .template-card .info-wrap {padding: 22px; padding-bottom: 36px;}
    .template-card .thumb-wrap {aspect-ratio: 490 / 360;}
}
@media screen and (max-width: 1024px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 64px);}

    .section-tit-wrap {margin-bottom: 60px;}

    .template-list {column-gap: 16px;}
    .template-card {width: calc(100% / 3 - 32px / 3); border-radius: 14px;}
    .template-card .info-wrap {padding: 20px; padding-bottom: 32px;}

    .price-item strong {font-size: 24px;}
}
@media screen and (max-width:768px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 48px);}
    
    .input-multi {grid-template-columns: repeat(1,1fr);}
    
    .faq-item {padding-block: 24px;}
    .faq-item .faq-question {align-items:flex-start; min-height: fit-content; padding-right:36px;}
    .faq-item .faq-question .faq-num {flex-shrink:0;}
    .faq-item .faq-question .faq-tit {word-break:keep-all;}
    .faq-item .faq-question::after {top:2px; transform:none;}
    .faq-item.open .faq-question::after {transform:rotate(180deg);}
    .faq-item .faq-answer p {padding-top:20px; word-break:keep-all;}
    
    .price-slider-wrap > .desc {margin-top:24px;}
    .price-slider-wrap .price-slider {margin-top:36px;}
    .price-slider-wrap .price-card {padding: 20px 14px;}
    .price-slider-wrap .price-card.recommend .feature-list {grid-template-columns:1fr;}
    .price-slider-wrap .price-card .feature-list li.toss-point {grid-column:auto; flex-direction: column;}
    
    .feature-list {padding-bottom: 20px;}
    .feature-list li.point {font-size: var(--fs-18);}
    .price-slider-wrap .price-card .price-column > span {font-size: 14px;}
    .price-item strong {font-size: 16px; line-height: 46px; letter-spacing: -0.02em;}
    .price-item strong.price-txt {font-size: clamp(24px, 5vw, 36px);}
    .price-slider-wrap .price-card .price-plus {padding-bottom: 0; line-height: 46px;}
    .price-slider-wrap .price-card .price-item > span {line-height: 46px;}

}
@media screen and (max-width:480px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 32px);}

    .section-tit-wrap {margin-bottom: 40px;}

    .template-card .info-wrap {padding: 18px; padding-bottom: 30px;}
    
    .faq-item {padding-block: 20px;}
    .faq-item .faq-question {column-gap:8px; padding-right:32px;}
    .faq-item .faq-question::after {right:0; width:24px; height:24px;}
    .faq-item .faq-answer p {padding-top:16px;}

    .inquiry-wrap {row-gap: 60px;}
    .input-form-wrap {padding: 0; box-shadow: none; border-top: 1px solid var(--grayscale3); padding-top: 60px; border-radius: 0;}

    .textbox,.input-btn {height: 48px;}

    .pagination {gap: calc(var(--fs-24) / 2);}

    .price-item strong.price-txt {font-size: clamp(24px, 6vw, 28px);}
    .price-item strong,
    .price-slider-wrap .price-card .price-plus,
    .price-slider-wrap .price-card .price-item > span {line-height: 32px;}
    .price-slider-wrap .price-card .discount-item {justify-content: flex-start;}
    .price-slider-wrap .price-card .discount-item del {font-size: 16px;}

}
@media screen and (max-width:375px) {
    .l-inner, .m-inner, .s-inner {width: calc(100% - 24px);}

    .pagination {gap: 5px;}

    .price-slider-wrap .price-arrow {z-index:10; position:absolute; top:50%; width:36px; height:36px; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:center; background-size:28px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.2s, visibility 0.2s;}
    .price-slider-wrap .price-arrow.is-visible {display:flex; opacity:1; visibility:visible; pointer-events:auto;}
    .price-slider-wrap .price-arrow-prev {left: 0; background-image:url(../img/swiper-prev.svg);}
    .price-slider-wrap .price-arrow-next {right: 0; background-image:url(../img/swiper-next.svg);}
    .price-slider-wrap .price-arrow-prev.is-visible {animation:priceArrowPrev 1.2s ease-in-out infinite;}
    .price-slider-wrap .price-arrow-next.is-visible {animation:priceArrowNext 1.2s ease-in-out infinite;}
}

@keyframes priceArrowPrev {
    0%, 100% {transform:translate(0, -50%);}
    50% {transform:translate(-5px, -50%);}
}

@keyframes priceArrowNext {
    0%, 100% {transform:translate(0, -50%);}
    50% {transform:translate(5px, -50%);}
}

/*  */
/*  */
/*  */
/*  */
/*  */
/*  */

/* ===== css/layout.css ===== */
@charset "utf-8";
/* 필요한 섹션(ex.스티키가 들어가는 섹션)에만 따로  overflow: unset; 추가하세요 */
#container > section {overflow: hidden; padding-block: 120px; display: flex; flex-direction: column; row-gap: 120px;}

/* header */
.site-header {position: sticky; top: 0; left: 0; width:100%; padding-block: var(--fs-18); border-bottom:1px solid var(--grayscale3); background-color:#fff; z-index:1000;}
.site-header .l-inner {height: 100%; display:flex; align-items:center; justify-content:space-between;}
.site-header .logo {flex:0 0 auto;}
.site-header .logo img {height: 28px;}

.gnb {}
.gnb-list {display:flex; align-items:center; gap: calc(var(--fs-24) + var(--fs-20));}
.gnb-list li a {padding: 10px; display:block; font-size:var(--fs-16); font-weight:500; line-height:1.4; color:var(--grayscale10); transition:color .2s ease;}
.gnb-list li.on a,
.gnb-list li a:hover {color:var(--color-main);}

.header-util {display:flex; align-items:center; gap: 14px;}
.header-util .login-btn {padding: 10px; transition:color .2s ease; font-size:var(--fs-16); color: var(--grayscale9); font-weight: 500;}
.header-util .login-btn:hover {color:var(--color-main);}

.mypage-menu {position:relative;}
.mypage-btn {display:block; font-size:var(--fs-16); font-weight:500; line-height:1.4; color:var(--grayscale10);}
.mypage-dropdown {display:none; min-width:150px; position:absolute; top:calc(100% + 18px); right:0; padding:10px; border:1px solid var(--grayscale3); border-radius:12px; background-color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08);}
.mypage-dropdown li a {display:block; padding:10px 12px; border-radius:8px; font-size:var(--fs-14); font-weight:500; color:var(--grayscale8);}
.mypage-dropdown li.on a,
.mypage-dropdown li a:hover {color:var(--color-main); background-color:var(--grayscale2);}
.mypage-menu.open .mypage-dropdown {display:block;}

.site-header .mobile-menu-btn {display:none; width:36px; height:36px; position:relative;}
.site-header .mobile-menu-btn span,
.site-header .mobile-menu-btn span:before,
.site-header .mobile-menu-btn span:after {display:block; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:var(--grayscale6); transition:all .3s;}
.site-header .mobile-menu-btn span {width:14px; left:10px; top:50%; transform:translate(0,-50%);}
.site-header .mobile-menu-btn span:before,
.site-header .mobile-menu-btn span:after {content:''; transform:translate(0,-50%);}
.site-header .mobile-menu-btn span:before {top:-4px;}
.site-header .mobile-menu-btn span:after {top:6px;}
.site-header .mobile-menu-btn.open span {background:transparent !important;}
.site-header .mobile-menu-btn.open span:before {top:0; transform:translate(0,-50%) rotate(45deg);}
.site-header .mobile-menu-btn.open span:after {top:0; transform:translate(0,-50%) rotate(-45deg);}

html:has(.site-header.open) {overflow-y:hidden;}
.site-header .mobile-menu {padding-bottom: calc(var(--fs-16) * 10); transition:right .3s; z-index:99999; display:flex; flex-direction:column; width: 100%; height:calc(100vh - var(--header-height)); position:fixed; top:var(--header-height); right:-100%; left:auto; overflow-y:auto; border-bottom:0; background-color:var(--color-white);}
.site-header.open .mobile-menu {right:0;}
.site-header .mobile-menu nav {width:100%;}
.site-header .mobile-gnb-list,
.site-header .mobile-mypage ul {display:flex; flex-direction:column;}
.site-header .mobile-gnb-list > li > a,
.site-header .mobile-mypage strong,
.site-header .mobile-mypage li a {width:100%; transition:background-color .2s, color .2s; padding: var(--fs-18) calc(var(--fs-14) * 2); display:flex; align-items:center; border:0; background:transparent; text-align:left; font-size:var(--fs-18); font-weight:500; line-height: 1.5; color:var(--grayscale9);}
.site-header .mobile-gnb-list > li.on > a,
.site-header .mobile-mypage li.on a {color:var(--color-main); background-color:var(--color-main-10);}
.site-header .mobile-gnb-list > li > a:hover,
.site-header .mobile-mypage li a:hover {color:var(--color-main);}
.site-header .mobile-mypage,
.site-header .btn-list {margin-top: calc(var(--fs-36) / 2); padding-top: calc(var(--fs-36) / 2); border-top:1px solid var(--grayscale3);}
.site-header .btn-list {display: none; padding: calc(var(--fs-14) / 2) calc(var(--fs-14) * 2);}
.site-header .btn-list .login-btn {transition: color .2s ease; width: 100%; padding-block: 10px; font-size: var(--fs-18); color: var(--grayscale9); font-weight: 500;}
.site-header .btn-list .join-btn {width: 100%;  font-size: var(--fs-18);}
.site-header .btn-list .login-btn:hover {color:var(--color-main);}
.site-header .mobile-menu .btn-wrap {padding: calc(var(--fs-14) / 2) calc(var(--fs-14) * 2);}
.site-header .mobile-menu .btn-wrap .s-btn {flex: 1;}

/* outro

<section class="outro-section">
    <div class="l-inner">
        <h2 class="hero-tit">
            복잡한 제작보다
            <b>운영에 집중하세요</b>
        </h2>
        <p class="hero-sub">예약•결제•운영까지 빠르게 시작하세요</p>
        버튼
    </div>
</section>

========================================================= */
.outro-section {background-color: var(--grayscale1); padding-block: 100px;}
.outro-section .l-inner {display: flex; flex-direction: column; align-items: center;}
.outro-section .hero-tit {text-align: center; color: var(--grayscale9);}
.outro-section .hero-tit b {color: var(--grayscale10); font-weight: 700;}
.outro-section .hero-sub {margin-top: 20px; color: var(--grayscale8); text-align: center;}
.outro-section .btn-wrap {margin-top: 80px; width: fit-content;}
.outro-section .round-btn {margin-top: 50px;}

/* footer */
.site-footer {padding-block: 80px; background-color:var(--grayscale10); color:#fff; position: relative;}
.site-footer .l-inner {display:flex; flex-direction:column;}
.site-footer .footer-head {display:flex; flex-direction:column; align-items:flex-start;}
.site-footer .footer-logo a {display:inline-flex;}
.site-footer .footer-logo img {height: 28px;}
.site-footer .footer-desc {margin-top:24px; font-size:var(--fs-16); font-weight:400; line-height:1.6; color:rgba(255,255,255,.86);}
.site-footer .footer-info {display:flex; flex-wrap:wrap; gap: 16px; margin-top:40px;}
.site-footer .footer-info p {display:flex; align-items:center; gap:10px; font-size:var(--fs-16); font-weight:400; line-height:1.5; color:var(--grayscale1);}
.site-footer .footer-info p span {color:var(--grayscale4);}
.site-footer .footer-bottom {display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top: 40px;}
.site-footer .copyright {font-size:var(--fs-16); font-weight: 500; line-height:1.5; color:var(--color-white);}
.site-footer .footer-policy {display:flex; align-items:center; gap:20px;}
.site-footer .footer-policy li a {position: relative; display:block; font-size:var(--fs-16); font-weight:500; line-height:1.5; color:var(--grayscale1); transition:color .2s ease, transform .2s ease;}
.site-footer .footer-policy li a::after {content: ''; width: 0; height: 1px; position: absolute; top: calc(100% + 2px); left: 1px; transition: width .2s ease; background-color: var(--color-white);}
.site-footer .footer-policy li a:hover {color: var(--color-white); transform: translateY(-2px);}
.site-footer .footer-policy li a:hover::after {width: 100%;}
.site-footer .footer-service {margin-top:40px;}
.site-footer .footer-service .footer-service-tit {font-size: var(--fs-18); font-weight: 500; margin-bottom: 12px; display: block;}
.site-footer .footer-service ul {display:flex; flex-wrap:wrap; gap: 16px;}
.site-footer .footer-service a {transition: color 0.2s; font-size:var(--fs-16); font-weight:400; line-height:1.5; color:var(--grayscale4);}
.site-footer .footer-service a:hover {color:var(--grayscale1);}

.floating-btn-list.absolute {position: absolute; bottom: calc(100% + 50px);}
.floating-btn-list {position: fixed; right: 50px; bottom: 50px; z-index: 999;}
.floating-btn {padding: 12px; display: flex; align-items: center; column-gap: 10px; border-radius: 12px; box-shadow: var(--sitelo-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; cursor: pointer;}
.floating-btn:hover {transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); filter: brightness(1.05);}
.floating-btn:active {transform: translateY(-1px); filter: brightness(0.97);}
.floating-btn .body-medium {line-height: 1.2; font-weight: 500;}
.floating-btn.kakao-btn {background-color: #FAE100;}
.floating-btn.kakao-btn .body-medium {color: #3C1D1E;}

@media screen and (max-width:1440px) {
    #container > section {padding-block: 120px; row-gap: 120px;}

    .gnb-list {gap: 20px;}

    .floating-btn-list {right: 40px;}
}

@media screen and (max-width:1024px) {
    #container > section {padding-block: 80px; row-gap: 80px;}

    .gnb {display:none;}
    .mobile-menu-btn {display:block;}
    .site-header .gnb {display:none;}
    .site-header .mobile-menu-btn {display:block;}

    .site-footer {padding-block:70px;}
    .site-footer .footer-info {gap:16px 20px;}
    .site-footer .footer-bottom {align-items:flex-start; flex-direction:column;}
    .site-footer .footer-policy {gap:20px;}

    .floating-btn-list {right: 32px;}
}

@media screen and (max-width:768px) {
    #container > section {padding-block: 60px; row-gap: 60px;}

    .site-footer {padding-block:56px;}
    .site-footer .footer-desc {margin-top:18px;}
    .site-footer .footer-info,
    .site-footer .footer-service ul {flex-direction:column; gap:10px; margin-top:36px;}
    .site-footer .footer-info p {align-items:flex-start;}
    .site-footer .footer-info p span {flex:0 0 auto;}
    .site-footer .footer-bottom {gap:22px; margin-top:38px;}
    .site-footer .footer-policy {flex-wrap:wrap; gap:10px 18px;}
    .site-footer .footer-service ul {margin-top: 0;}

    .outro-section .btn-wrap {margin-top: 50px;}

    .floating-btn-list {right: 24px;}
    .floating-btn-list.absolute {position: fixed; bottom: 50px;}
}

@media screen and (max-width:480px) {
    #container > section {padding-block: 40px; row-gap: 40px;}
    
    .site-header .logo img {height: 20px;}
    .header-util .login-btn {background-color: var(--color-main-strong); color: var(--grayscale1); font-size: var(--fs-16); padding: 10px 24px; transition: box-shadow 0.2s ease; display: inline-flex; align-items: center; justify-content: center; column-gap: 6px; border: 1px solid transparent; border-radius: 12px; font-weight: 500; white-space: nowrap;}
    .header-util .login-btn:hover {box-shadow: 0 0 0 5px #ADADAD4D;}
    .header-util .join-btn {display: none;}
    
    .site-header.open .mobile-menu {right:0;}
    .site-header .btn-list {display: flex;}
    
    .outro-section .btn-wrap {width: 100%;}

    .site-footer .footer-info p {flex-direction:column; gap:2px;}
    .site-footer .footer-policy {flex-direction:column; align-items:flex-start;}

    .floating-btn-list {right: 16px;}
    .floating-btn img {width: 40px; height: 40px;}
}

@media screen and (max-width:375px) {
    .floating-btn-list {right: 12px;}
}

/* ===== css/app.css ===== */
@charset "utf-8";

/* =====================================================================
   site2z app.css — 퍼블리싱에 없는 "기능 추가" 요소 전용 (기존 룰 비변경).
   브랜드 토큰(--color-main, --grayscale*, --fs-*)만 사용.
   ===================================================================== */

/* ── 헤더 보유 충전금(알림톡 예치금) 배지 — M14 ── */
.point-badge {white-space: nowrap; display:inline-flex; align-items:center; column-gap:6px; padding:7px 14px; border:1px solid var(--grayscale3); border-radius:999px; background:var(--color-white); transition:border-color .2s, background-color .2s;}
.point-badge:hover {border-color:var(--color-main); background:var(--color-main-10);}
.point-badge .point-label {font-size:var(--fs-13, 13px); font-weight:500; color:var(--grayscale7, #767676);}
.point-badge .point-amount {font-size:var(--fs-14, 14px); font-weight:700; color:var(--color-main); padding: 0 !important;}
.point-badge.mobile {margin:6px 24px 10px; width:fit-content;}

/* ── 마이페이지 셸 (M14 — 시안 기준 1차 구현, 퍼블리셔 후속 보정 예정) ── */
#container > .mypage-section {padding-block: 0; overflow: unset;}
.mypage-layout {display:flex; align-items:flex-start;}
.mypage-side {height: calc(100vh - var(--header-height)); flex-shrink:0; width: 224px; position:sticky; top: var(--header-height); padding: var(--fs-60) var(--fs-30); background-color: var(--grayscale1);}
.mypage-side-tit {display:block; color:var(--grayscale10); padding-bottom: var(--fs-30); border-bottom:1px solid var(--grayscale3); margin-bottom: var(--fs-30);}
.mypage-side-tit.on {color:var(--color-main);}
.mypage-side-menu li a {display:block; padding:12px 2px; font-size:var(--fs-16); font-weight:500; color:var(--grayscale7); transition:color .2s;}
.mypage-side-menu li a:hover {color:var(--grayscale10);}
.mypage-side-menu li.on a {color:var(--color-main); font-weight:600;}
.mypage-side-menu li.logout {margin-top: var(--fs-30); border-top:1px solid var(--grayscale3); padding-top: var(--fs-30);}
.mypage-side-menu li.logout a {color:var(--grayscale5);}
.mypage-content {padding-block: var(--space-120); flex:1; min-width:0;}
.mypage-content .l-inner {display:flex; flex-direction:column; row-gap: var(--space-100);}
.mypage-content-header {display: flex; flex-direction: column; row-gap: var(--fs-40);}
.mypage-content .section-tit-wrap {margin-bottom: 0;}

/* 인사말 + 플랜 요약 스트립 */
.mypage-greeting {font-size:var(--fs-36); font-weight:600; color:var(--grayscale8); line-height:1.3;}
.mypage-greeting .name {color:var(--color-main); font-size: var(--fs-42); font-weight: 700;}
.plan-strip {display:flex; align-items:center; padding: var(--fs-30); border-radius:12px; background: rgb(var(--rgb-main) / 5%);}
.plan-strip .strip-item {flex:1; display:flex; flex-direction:column; row-gap:2px;}
.plan-strip .strip-item:first-child {padding-right: var(--fs-60);}
.plan-strip .strip-item:last-child {row-gap: 6px;}
.plan-strip .strip-item + .strip-item {border-left:1px solid var(--grayscale3); padding-left: var(--fs-60);}
.plan-strip .strip-label {font-size:var(--fs-14); color:var(--grayscale6);}
/* .plan-strip .strip-value {font-size:var(--fs-20); font-weight:700; color:var(--grayscale10);} */
.plan-strip.empty {justify-content:space-between; padding:28px 32px;}

/* 섹션 타이틀 + 정보 박스 */
.mypage-sec {display:flex; flex-direction:column; row-gap: var(--fs-20);}
.mypage-sec-head {display:flex; justify-content:space-between; align-items:center;}
.mypage-sec-tit {color:var(--grayscale10);}
.mypage-sec-more {font-size:var(--fs-16); font-weight:500; line-height: 1.5; color:var(--color-main);}
.mypage-two-col {display:grid; grid-template-columns:1fr 1fr; gap:var(--fs-30); align-items: stretch;}
.info-box {height: stretch; border:1px solid var(--grayscale3); border-radius:12px; background:var(--color-white); padding: var(--fs-28);}
.info-box .info-row, .content-box .info-row {display:flex; justify-content:space-between; align-items:center; column-gap:16px; padding:10px 0;}
.info-box .info-row + .info-row, .content-box .info-row + .info-row {border-top:1px solid var(--grayscale2);}
.info-box .info-row span, .content-box .info-row span {font-size:var(--fs-14); color:var(--grayscale6); flex-shrink:0;}
.info-box .info-row strong, .content-box .info-row strong {font-size:var(--fs-16); font-weight:600; color:var(--grayscale10); text-align:right; word-break:break-all;}
.info-box .box-btn {margin-top:20px;}
.info-box .strip-cols {display:flex; margin-bottom:4px;}
.info-box .strip-cols .strip-item {flex:1; display:flex; flex-direction:column; align-items: center;}
.info-box .strip-cols .strip-item + .strip-item {border-left:1px solid var(--grayscale2);}
.info-box .strip-cols .strip-item .strip-value {margin-top: 8px; font-size: var(--fs-20); line-height: 1.5; font-weight: 500; color: var(--grayscale9);}
.info-box .strip-cols .strip-item .body-large {margin-top: 8px;}
.info-box .strip-cols .strip-item .card-small {margin-top: 2px;}
.info-box .input-wrap {display: flex; align-items: flex-start; column-gap: var(--fs-16);}
.info-box .input-wrap .input-item {flex: 1;}

/* 목록 행 (결제·문의·충전 내역) */
.list-rows {display:flex; flex-direction:column;}
.list-rows .list-row {display:grid; grid-template-columns:1fr auto auto auto; gap:8px 24px; align-items:center; padding:16px 4px;}
.list-rows .list-row + .list-row {border-top:1px solid var(--grayscale2);}
.list-rows .list-row .row-tit {font-size:var(--fs-16); font-weight:600; color:var(--grayscale10);}
.list-rows .list-row .row-sub {grid-column:1; font-size:var(--fs-14); color:var(--grayscale6);}
.list-rows .list-row .row-date {font-size:var(--fs-14); color:var(--grayscale6); white-space:nowrap;}
.list-rows .list-row .row-amount {font-size:var(--fs-16); font-weight:600; color:var(--grayscale10); white-space:nowrap;}
.list-rows .list-row .row-state {font-size:var(--fs-14); font-weight:600; white-space:nowrap;}
.row-state.ok {color:var(--color-main);}
.row-state.bad {color:var(--color-red);}
.row-state.mid {color:var(--grayscale6);}
.list-empty {padding:48px 0; text-align:center; color:var(--grayscale5); font-size:var(--fs-15, 15px);}

/* 상태 pill */
.state-pill {display:inline-flex; align-items:center; justify-content:center; width:fit-content; min-height:28px; padding:5px 10px; border:1px solid transparent; border-radius:999px; background-color: var(--grayscale2); color: var(--grayscale6); font-size:var(--fs-14); font-weight: 500;; line-height:1;}
.state-pill.ok {background:var(--color-main-10); color:var(--color-main);}
.state-pill.mid {background:var(--grayscale2); color:var(--grayscale7);}
.state-pill.bad {background:#FEECEC; color:var(--color-red);}

/* 프로필 폼 */
.input-form-wrap {max-width: unset;}
/* .profile-form {display:flex; flex-direction:column; row-gap:18px; max-width:520px;}
.profile-form .input-item label {display:block; margin-bottom:8px; font-size:var(--fs-14); font-weight:500; color:var(--grayscale8);} */
.profile-form .form-msg {font-size:var(--fs-14);}
.profile-form .form-msg.ok {color:var(--color-main);}
.profile-form .form-msg.bad {color:var(--color-red);}

/* 알림톡 충전 — 프리미엄 충전 UI */
.mypage-lead {font-size:var(--fs-16); color:var(--grayscale6); line-height:1.6;}
.charge-grid {display:grid; grid-template-columns:6fr 5fr; gap:24px; align-items:start;}

.balance-card {position:relative; overflow:hidden; border-radius:16px; padding:32px;
    background:linear-gradient(135deg, #4F46E5 0%, var(--color-main) 45%, #8B8DF8 100%);
    color:var(--color-white); box-shadow:0 12px 32px rgba(99,102,241,.28);}
.balance-card .balance-deco {position:absolute; right:-70px; top:-70px; width:220px; height:220px; border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 65%); pointer-events:none;}
.balance-card .balance-deco::after {content:""; position:absolute; left:-140px; top:150px; width:180px; height:180px; border-radius:50%;
    border:1px solid rgba(255,255,255,.25);}
.balance-card .balance-label {display:inline-block; padding:5px 12px; border-radius:99px; font-size:var(--fs-12); font-weight:600;
    letter-spacing:.02em; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);}
.balance-card .balance-amount {display:block; margin-top:14px; font-size:clamp(2rem, 2.6vw, 2.6rem); font-weight:700; letter-spacing:-0.02em;}
.balance-card .balance-amount small {margin-left:2px; font-size:.55em; font-weight:500; opacity:.85;}
.balance-card .balance-site {margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22);}
.balance-card .balance-site-label {display:block; margin-bottom:8px; font-size:var(--fs-12); opacity:.8;}
.balance-card select {width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.14); color:var(--color-white); font-size:var(--fs-14); cursor:pointer; backdrop-filter:blur(4px);}
.balance-card select:focus {outline:2px solid rgba(255,255,255,.5); outline-offset:1px;}
.balance-card select option {color:var(--grayscale10);}

.charge-panel {margin-top:20px; padding:26px; border:1px solid var(--grayscale3); border-radius:16px; background:var(--color-white);}
.charge-panel-head {display:flex; align-items:baseline; justify-content:space-between; flex-wrap: wrap; row-gap: 4px; column-gap:10px; margin-bottom:16px;}
.charge-panel-tit {font-size:var(--fs-17); font-weight:700; color:var(--grayscale10);}
.charge-panel-sub {font-size:var(--fs-12); color:var(--grayscale6);}
.charge-amount-list {display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
.charge-amount-btn {display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:16px 18px;
    border:1.5px solid var(--grayscale3); border-radius:12px; background:var(--color-white); cursor:pointer;
    transition:border-color .15s ease, box-shadow .15s ease, transform .1s ease; text-align:left;}
.charge-amount-btn strong {font-size:var(--fs-17); font-weight:700; color:var(--grayscale10);}
.charge-amount-btn span {font-size:var(--fs-12); color:var(--grayscale6);}
.charge-amount-btn:hover {border-color:var(--color-main); transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.12);}
.charge-amount-btn.active {border-color:var(--color-main); background:rgba(99,102,241,.06); box-shadow:0 0 0 3px rgba(99,102,241,.14);}
.charge-amount-btn.active strong {color:var(--color-main);}
.charge-notes {margin-top:20px; padding:16px 18px; border-radius:12px; background:var(--grayscale1);}
.charge-notes li {position:relative; padding-left:14px; font-size:var(--fs-13); color:var(--grayscale6); line-height:1.7;}
.charge-notes li::before {content:""; position:absolute; left:2px; top:11px; width:4px; height:4px; border-radius:50%; background:var(--color-main); opacity:.6;}

.charge-pay-card {position:sticky; top:100px; padding:26px; border:1px solid var(--grayscale3); border-radius:16px;
    background:var(--color-white); box-shadow:0 8px 24px rgba(17,17,17,.05);}
.charge-summary {margin:16px 0 18px; padding:16px 18px; border-radius:12px; background:var(--grayscale1);}
.charge-summary .summary-line {display:flex; justify-content:space-between; align-items:center; padding:6px 0; font-size:var(--fs-14); color:var(--grayscale7);}
.charge-summary .summary-line strong {font-weight:600; color:var(--grayscale9);}
.charge-summary .summary-line.total {margin-top:8px; padding-top:14px; border-top:1px solid var(--grayscale3); font-size:var(--fs-15);}
.charge-summary .summary-line.total strong {font-size:var(--fs-20); font-weight:700; color:var(--color-main);}
.charge-pay-card #payment-method {margin:0 -8px;}
.charge-pay-card #chargeError {margin:8px 0 4px;}
.charge-pay-card .box-btn {margin-top:10px;}
.charge-safe {margin-top:12px; font-size:var(--fs-12); color:var(--grayscale5); text-align:center; line-height:1.6;}

/* 결제 내역 — 필터 pill + 접힌 환불 표시 */
/* .filter-pills {display:flex; flex-wrap:wrap;}
.filter-pill {display:inline-flex; align-items:center; padding:8px 16px; border:1px solid var(--grayscale3); border-radius:999px; font-size:1.4rem; font-weight:500; color:var(--grayscale7); background:var(--color-white); transition:border-color .15s ease, background-color .15s ease, color .15s ease;}
.filter-pill:hover {border-color:var(--color-main); color:var(--color-main);}
.filter-pill.active {border-color:var(--color-main-strong); background:var(--color-main-strong); color:var(--color-white); font-weight:600;} */
.filter-pill {margin-right: 12px;}

.row-amount.refund {color:#C0392B;}
.list-rows .list-row .row-refund {grid-column:1 / -1; padding:8px 12px; border-radius:8px; background:var(--grayscale1); font-size:1.3rem; color:var(--grayscale6);}
.list-rows .list-row .row-refund strong {color:#C0392B; font-weight:600;}
.row-receipt {color:var(--color-main); font-weight:500; text-decoration:underline; text-underline-offset:3px;}
.row-receipt:hover {opacity:.8;}

/* ── 템플릿 상세 서식 본문(.view-desc-body) — M-템플릿상세 (HQ 서식 본문 렌더) ── */
.view-desc-body {margin-top:18px; line-height:1.7; color:var(--grayscale7, #333); word-break:keep-all;}
.view-desc-body img {display:block; max-width:100%; height:auto; border-radius:10px; margin:14px 0;}
.view-desc-body h3 {margin:1em 0 .4em; font-size:var(--fs-20, 20px); font-weight:700; color:var(--grayscale9, #111);}
.view-desc-body h4 {margin:1em 0 .4em; font-size:var(--fs-16, 16px); font-weight:700;}
.view-desc-body p {margin:.5em 0;}
.view-desc-body ul, .view-desc-body ol {margin:.5em 0; padding-left:1.4em;}
.view-desc-body ul {list-style:disc;}
.view-desc-body ol {list-style:decimal;}
.view-desc-body li {margin:.2em 0;}
.view-desc-body a {color:var(--color-main, #2b6ef2); text-decoration:underline;}
.view-desc-body strong {font-weight:700;}
.view-desc-body em {font-style:italic;}
.view-desc-body blockquote {margin:.6em 0; padding:2px 0 2px 14px; border-left:3px solid var(--grayscale3, #ddd); color:var(--grayscale6, #666);}


/* ── 자동결제 카드 등록 유도 (완료 페이지·마이페이지) — M-빌링연결 ── */
.billing-cta {margin:26px 0 6px; padding:18px 20px; border:1px solid var(--color-main-30, #bcd2ff); background:var(--color-main-10, #f0f5ff); border-radius:12px; text-align:left;}
.billing-cta b {display:block; font-size:15px; margin-bottom:5px; color:var(--grayscale9, #111);}
.billing-cta p {font-size:13px; line-height:1.6; color:var(--grayscale6, #555); margin:0;}
.mypage-alert {display:flex; align-items:center; gap:14px; padding:14px 18px; border:1px solid #fde68a; background:#fffbeb; border-radius:12px;}
.mypage-alert-txt {flex:1; min-width:0;}
.mypage-alert-txt b {display:block; font-size:16px; color:#92400e;}
.mypage-alert-txt span {font-size:14px; color:#a16207;}
.mypage-alert .primary-btn {flex-shrink:0; white-space:nowrap;}
.mypage-alert.no-site {background-color: var(--color-main-10); border-color: var(--color-main); justify-content: space-between;}
.mypage-alert-txt p {display:block; font-size:16px; color:var(--grayscale10);}
.mypage-alert:has(.form-msg.ok) {background-color: var(--color-main-10);}
.mypage-alert:has(.form-msg.bad) {background-color: #FDECEC;}

/* ── 입금 계좌 박스 + 복사 (M27v2) ── */
.bank-acct-box {border:1px solid var(--grayscale3); border-radius:12px; background:var(--color-white); padding:20px 24px;
    display:flex; flex-direction:column; row-gap:12px;}
.bank-acct-label {font-size:var(--fs-13); font-weight:600; color:var(--grayscale6);}
.bank-acct-main {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.bank-acct-badge {width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center;
    font-size:var(--fs-14); font-weight:800; color:var(--color-white); flex-shrink:0;}
.bank-acct-badge.dark {color:var(--grayscale10);}
.bank-acct-logo {width:34px; height:34px; border-radius:9px; object-fit:contain; flex-shrink:0; background:var(--color-white);
    border:1px solid var(--grayscale2);}
.bank-acct-name {font-size:var(--fs-20); font-weight:800; color:var(--grayscale10);}
.bank-acct-num {font-size:var(--fs-20); font-weight:800; color:var(--grayscale10); letter-spacing:.5px; word-break:break-all;}
.bank-acct-holder {font-size:var(--fs-20); font-weight:700; color:var(--grayscale10);}
.bank-copy-btn {align-self:flex-start; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--grayscale3);
    border-radius:8px; background:var(--color-white); padding:8px 14px; font-size:var(--fs-14); font-weight:600;
    color:var(--grayscale8); cursor:pointer; transition:border-color .15s ease, color .15s ease;}
.bank-copy-btn:hover, .bank-copy-btn.copied {border-color:var(--color-main); color:var(--color-main);}
.bank-copy-btn svg {flex-shrink:0;}

/* ── 결제수단 선택·증빙 폼·약관 모달·알림 (M27) ── */
.pay-method-tabs {display:flex; gap:10px; margin-bottom:16px;}
.pay-method-tab {flex:1; position:relative; display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1.5px solid var(--grayscale3, #ddd); border-radius:12px; cursor:pointer; transition:border-color .15s, background .15s;}
.pay-method-tab input {position:absolute; opacity:0; pointer-events:none;}
.pay-method-tab span {font-size:15px; font-weight:700; color:var(--grayscale9, #111);}
.pay-method-tab em {font-style:normal; font-size:12px; color:var(--grayscale6, #777);}
.pay-method-tab.is-on {border-color:var(--color-main, #2b6ef2); background:var(--color-main-10, #f0f5ff);}
.pay-method-tab.is-on span {color:var(--color-main, #2b6ef2);}
.tax-doc-tabs {display:flex; gap:8px;}
.tax-doc-tabs label {position:relative; flex:1; text-align:center; padding:10px 8px; border:1.5px solid var(--grayscale3, #ddd); border-radius:10px; cursor:pointer; font-size:13px;}
.tax-doc-tabs input {position:absolute; opacity:0; pointer-events:none;}
.tax-doc-tabs label:has(input:checked) {border-color:var(--color-main, #2b6ef2); background:var(--color-main-10, #f0f5ff); font-weight:700; color:var(--color-main, #2b6ef2);}
.mt10 {margin-top:10px;}

/* <dialog> 화면 중앙 고정 — reset.css 의 * {margin:0} 가 브라우저 기본(margin:auto) 센터링을
   지워 열린 대화상자가 좌상단에 붙는다. :where() 로 특이도 0을 유지해 개별 모달 룰을 침범하지 않는다. */
:where(dialog[open]) {position:fixed; inset:0; margin:auto; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);}

dialog.policy-modal {border:0; border-radius:16px; padding:0; width:min(680px, 94vw); max-height:84vh; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.25);}
dialog.policy-modal:not([open]) {display:none;}
dialog.policy-modal::backdrop {background:rgba(17,24,39,.55);}
.policy-modal-h {display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--grayscale2, #eee);}
.policy-modal-h b {font-size:17px;}
.policy-modal-x {width:32px; height:32px; border:0; border-radius:50%; background:var(--grayscale1, #f5f5f5); cursor:pointer; font-size:14px;}
.policy-modal-b {flex:1; overflow-y:auto; padding:18px 22px; font-size:13.5px; line-height:1.7; color:var(--grayscale7, #444);}
.policy-modal-b h4 {margin:18px 0 6px; font-size:14.5px; color:var(--grayscale9, #111);}
.policy-modal-b h4:first-child {margin-top:0;}
.policy-modal-f {padding:14px 22px; border-top:1px solid var(--grayscale2, #eee); text-align:right;}

dialog.pay-alert {border:0; border-radius:16px; padding:28px 30px 24px; width:min(360px, 90vw); text-align:center; box-shadow:0 24px 64px rgba(0,0,0,.25);}
dialog.pay-alert:not([open]) {display:none;}
dialog.pay-alert::backdrop {background:rgba(17,24,39,.55);}
dialog.pay-alert b {display:block; font-size:17px; margin-bottom:8px;}
dialog.pay-alert p {font-size:14px; line-height:1.6; color:var(--grayscale7, #555); margin-bottom:18px;}
/* ── 템플릿 상세 소개(.template-detail-body) — patch38v2 (핵심 기능·미리보기 대체 본문) ── */
.template-detail-body-wrap {padding:60px 0 90px;}
.template-detail-body {max-width:920px; margin:0 auto; line-height:1.8; color:var(--grayscale7, #333); word-break:keep-all; font-size:17px;}
.template-detail-body img {display:block; width:100%; height:auto; border-radius:14px; margin:26px 0;}
.template-detail-body h3, .template-detail-body h4 {margin:34px 0 12px; font-weight:700;}
.template-detail-body p {margin:12px 0;}
.template-detail-body ul, .template-detail-body ol {margin:12px 0 12px 22px;}
@media (max-width: 768px) {.template-detail-body {font-size:15px;} .template-detail-body-wrap {padding:40px 0 60px;}}
/* 템플릿 목록 필터 탭·정렬 링크화(a) 안전 규칙 — patch38v2 */
a.tab-btn, a.sort-btn {text-decoration:none; display:inline-block;}
/* ── FAQ 운영 상담(비회원 전용) 회원 안내 박스 — patch39v3 ── */
.inquiry-member-guide {display:flex; flex-direction:column; align-items:flex-start; gap:22px; justify-content:center; height:100%; min-height:320px; border:1px solid var(--grayscale3, #e5e7eb); border-radius:16px; padding:40px 36px; background:var(--grayscale1, #fafafa);}
.inquiry-member-guide .body-txt {line-height:1.8; color:var(--grayscale7, #444);}
.inquiry-member-guide .primary-btn {display:inline-flex; align-items:center; gap:8px;}
@media (max-width: 768px) {.inquiry-member-guide {min-height:0; padding:28px 22px;}}
/* ── 고객센터 기본 비밀글 — 타인 글 잠금 행(.cs-locked) — patch39v7 ── */
.cs-wrap .cs-list li .cs-locked {display:flex; justify-content:space-between; align-items:center; padding:24px 40px; border:1px solid var(--grayscale3); border-radius:12px; cursor:default; background:var(--grayscale1, #fafafa);}
.cs-wrap .cs-subject.is-locked {color:var(--grayscale6, #888);}
.cs-wrap .cs-subject.is-locked::before {content:"🔒"; margin-right:8px; font-size:0.9em;}
@media all and (max-width:768px) {.cs-wrap .cs-list li .cs-locked {flex-direction:column; row-gap:10px; align-items:flex-start; padding:24px 30px;}}

/* ── 알림톡 충전 — 충전할 사이트 라디오 카드 (H11-5) ─────────────────
   M14 뷰(site-radio 마크업)에 대응하는 CSS 가 누락돼 라디오가 생 텍스트로
   보였다(사용자 보고 2026-08-03: "라디오버튼·호버 다 보이게"). :has() 선택
   패턴은 이 파일의 .tax-doc-tabs 와 동일 — 기존 브라우저 지원 범위 유지. */
.site-radio-list {display:grid; grid-template-columns:repeat(2, 1fr); gap:12px;}
.site-radio {position:relative; display:flex; align-items:center; gap:12px; padding:16px 18px;
    border:1.5px solid var(--grayscale3, #ddd); border-radius:12px; background:var(--color-white); cursor:pointer;
    transition:border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.site-radio:hover {border-color:var(--color-main); transform:translateY(-1px); box-shadow:0 6px 16px rgba(99,102,241,.12);}
.site-radio input {position:absolute; opacity:0; pointer-events:none;}
.site-radio-body {display:flex; flex-direction:column; gap:4px; min-width:0;}
.site-radio-name {font-size:var(--fs-16); font-weight:700; color:var(--grayscale10); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.site-radio-balance {font-size:var(--fs-13); color:var(--grayscale6);}
.site-radio-check {margin-left:auto; flex-shrink:0; position:relative; width:22px; height:22px; border-radius:50%;
    border:2px solid var(--grayscale4, #ccc); background:var(--color-white); transition:border-color .15s, background-color .15s;}
.site-radio-check::after {content:""; position:absolute; left:50%; top:45%; width:5px; height:9px;
    border:solid var(--color-white); border-width:0 2px 2px 0;
    transform:translate(-50%, -50%) rotate(45deg) scale(0); transition:transform .15s;}
.site-radio:has(input:checked) {border-color:var(--color-main); background:rgba(99,102,241,.06); box-shadow:0 0 0 3px rgba(99,102,241,.14);}
.site-radio:has(input:checked) .site-radio-name {color:var(--color-main);}
.site-radio:has(input:checked) .site-radio-check {border-color:var(--color-main); background:var(--color-main);}
.site-radio:has(input:checked) .site-radio-check::after {transform:translate(-50%, -50%) rotate(45deg) scale(1);}
.site-radio:has(input:focus-visible) {outline:2px solid var(--color-main); outline-offset:2px;}
@media (max-width: 768px) {.site-radio-list {grid-template-columns:1fr;}}
/* 잔액 카드의 선택 사이트명 (뷰의 .balance-site-name — 기존 CSS 는 .balance-site 만 정의) */
.balance-card .balance-site-name {display:block; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); font-size:var(--fs-13); opacity:.85;}

/* 추가 css 260803 */
.section-tit-wrap .icon {width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background-color: rgba(99,102,241,0.3); border-radius: 50%; margin: 0 auto 32px auto;}
.card-billing-wrap {max-width: 768px; margin-inline: auto; padding: var(--fs-40); border-radius: var(--fs-16); box-shadow: var(--sitelo-shadow);}
.card-billing-wrap .section-tit-wrap {margin-bottom: var(--fs-60);}


@media (max-width: 1440px) {
    .mypage-two-col, .charge-grid {grid-template-columns:1fr;}}

@media (max-width: 1280px) {
    .plan-strip {flex-direction:column; align-items:stretch; row-gap:16px; padding:24px;}
    .plan-strip .strip-item {padding:0;}
    .plan-strip .strip-item + .strip-item {border-left:0; border-top:1px solid var(--grayscale3); padding-top:16px; padding-left: 0;}
}

@media (max-width: 1024px) {
    .mypage-layout {flex-direction:column; gap:0;}
    .mypage-content {width:100%;}
    .mypage-side {position:static; width:100%; height:fit-content; padding: 20px 32px;}
    .mypage-side-tit {margin-bottom: 6px; padding-bottom: 16px;}
    .mypage-side.swiper {overflow:hidden;}
    .mypage-side-menu.swiper-wrapper {align-items:center;}
    .mypage-side-menu > .swiper-slide {width:auto; flex-shrink:0;}
    .mypage-side-menu li a {transition: color 0.3s; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--grayscale6);}
    .mypage-side-menu li a:hover {color: var(--grayscale9);}
    .mypage-side-menu li + li {margin-left: 12px; padding-left: 12px; position: relative;}
    .mypage-side-menu li.logout {margin:0; border:0; padding:0; margin-left: 12px; padding-left: 12px;}
    .mypage-side-menu li + li::after {content: ''; width: 1px; height: 14px; background-color: var(--grayscale3); position: absolute; top: 50%; left: 0; transform: translate(-50%,-50%);}
    .header-util .point-badge {display:none;}
    .card-billing-wrap {padding: 24px;}
}

@media (max-width: 768px) {
    .mypage-side {position:static; width:100%; height:fit-content; padding: 20px 24px;}
    .mypage-side-tit {margin-bottom: 0; padding-bottom: 10px;}
    .mypage-content {padding-block: 60px;}
    .mypage-content .l-inner {row-gap: 40px;}
    .info-box,.card-billing-wrap, .charge-panel, .charge-pay-card {padding: 20px;}
}

@media (max-width: 600px) {
    .info-box .strip-cols {flex-direction: column;}
    .info-box .strip-cols .strip-item + .strip-item {padding-top: 16px; margin-top: 16px; border-left: 0; border-top: 1px solid var(--grayscale3);}
    .info-box, .card-billing-wrap, .charge-panel, .charge-pay-card{padding: 16px;}
    .list-rows .list-row {display: flex; flex-direction: column; row-gap: 12px; align-items: flex-start;}
    .mypage-alert {flex-direction: column; align-items: flex-start;}
}

@media (max-width: 480px) {
    .mypage-content {padding-block: 40px;}
    .mypage-content .l-inner {row-gap: 28px;}
    .mypage-side {position:static; width:100%; height:fit-content; padding: 14px 16px;}
}

@media (max-width: 375px) {
    .mypage-side {position:static; width:100%; height:fit-content; padding: 10px 12px;}
}
/* ── H11-7: 알림톡 보관 잔액(해지 사이트) 박스 ── */
.stranded-box {
    margin: 0 0 20px;
    padding: 18px 20px;
    border: 1px solid #ffd9a8;
    background: #fff8ef;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.stranded-box.done {
    border-color: #b7e3c0;
    background: #f0faf2;
    gap: 4px;
}
.stranded-box.done strong { color: #1d7a3a; font-size: 15px; }
.stranded-box.done span { color: #4a7d59; font-size: 13px; }
.stranded-head { display: flex; flex-direction: column; gap: 4px; }
.stranded-head strong { font-size: 15px; color: #8a5a00; }
.stranded-head span { font-size: 13px; color: #a07828; }
.stranded-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 10px 12px; list-style: none; background: #fff; border-radius: 8px; border: 1px solid #f3e2c6; }
.stranded-list li { display: flex; justify-content: space-between; font-size: 13px; color: #555; }
.stranded-list li strong { color: #222; }
.stranded-claim { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stranded-claim label { font-size: 13px; color: #666; }
.stranded-claim select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; min-width: 180px; }
.stranded-note { font-size: 13px; color: #8a6d3b; margin: 0; }