/* ==========================================================
   TOKENS
========================================================== */
:root{
    --ink:#12151A;
    --ink-soft:#2B2F36;
    --paper:#FFFFFF;
    --paper-deep:#F3F2ED;
    --teal:#e31010;
    --teal-deep:#e31010;
    --slate:#6B7186;
    --line:#E4E2D9;

    --f-display:'Pretendard',-apple-system,sans-serif;
    --f-body:'Pretendard',-apple-system,sans-serif;
    --f-mono:'Pretendard',-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;	 font-size:19px;}
body{
    font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    background:var(--paper);
    color:var(--ink);
    line-height:1.7;						 font-size:19px;
    overflow-x:hidden;				  word-break: keep-all;
    max-width:100%;
}
img{display:block;width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;}

.container{width:min(1320px,90%);margin:auto;}
section{padding:160px 0;position:relative;}


 .sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}






.eyebrow{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:var(--teal-deep);
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}
.eyebrow::before{
    content:"";
    width:26px;height:1px;
    background:var(--teal);
    display:inline-block;
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    margin-bottom:90px;
}
.section-head h2{
    font-family:var(--f-display);
    font-size:90px;
    font-weight:900;
    letter-spacing:-.01em;
    line-height:1.08;
}
.section-head p{
    max-width:500px;
    color:var(--slate);
    font-size:19px;
}

/* ==========================================================
   HEADER — transparent over hero, turns white on scroll
========================================================== */
header{
    position:fixed;
    top:0;left:0;width:100%;
    height:120px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 60px;
    z-index:9999;
    background:transparent;
    transition:.35s;
}
header.scrolled{
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(18px);
    box-shadow:0 10px 34px rgba(18,21,26,.06);
    height:82px;
}
.logo{
    font-family:var(--f-display);
    font-size:20px;
    font-weight:700;
    letter-spacing:.12em;
    color:#fff;
    transition:.35s;	 width:170px;
    height:69px;
    background:url("../image/logo-dark2.png") no-repeat center;
	     background-size:contain;
}	

.logo img{
 max-width:170px;
}




header.scrolled .logo{
    background-image:url("../image/logo-dark.png");
}







.logo span{color:var(--teal);}

header.scrolled .logo{color:var(--ink);}
header.scrolled .logo span{color:var(--teal-deep);}


nav{display:flex;gap:46px;}
nav a{
    position:relative;
    font-size:19px;
    letter-spacing:.06em;
    color:#fff;
    text-transform:uppercase;
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    transition:.35s;
}
header.scrolled nav a{color:var(--ink-soft);}
nav a::after{
    content:"";
    position:absolute;
    left:0;bottom:-8px;
    width:0;height:1px;
    background:currentColor;
    transition:.35s;
}
nav a:hover::after{width:100%;}
/* ==========================================================
   MOBILE NAV — hamburger toggle + slide-in panel
========================================================== */
.nav-toggle{
    display:none;
    position:relative;
    width:32px;height:22px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:10000;
    padding:0;
    flex-direction:column;
    justify-content:space-between;
}
.nav-toggle span{
    display:block;
    width:100%;height:2px;
    background:#fff;
    border-radius:2px;
    transition:.35s cubic-bezier(.4,0,.2,1);
    transform-origin:center;
}
header.scrolled .nav-toggle span{background:var(--ink);}
.nav-toggle.active span{background:#fff;}
.nav-toggle.active span:nth-child(1){transform:translateY(10px) rotate(45deg);}
.nav-toggle.active span:nth-child(2){opacity:0;}
.nav-toggle.active span:nth-child(3){transform:translateY(-10px) rotate(-45deg);}

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(18,21,26,.5);
    z-index:9997;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s;
}
.nav-overlay.show{opacity:1;pointer-events:auto;}
body.nav-lock{overflow:hidden;}

/* ==========================================================
   HERO
========================================================== */
.hero{
    position:relative;
    height:100vh;
    display:flex;
    align-items:flex-end;
    overflow:hidden;
    background:var(--ink);
}
.hero-slides{position:absolute;inset:0;z-index:0;}
.hero-slide{
    position:absolute;inset:0;
    background-size:cover;
    background-position:center;
    filter:grayscale(.3) contrast(1.05);
    opacity:0;
    transform:scale(1.12);
    transition:opacity 1.6s ease, transform 7s ease;
}
.hero-slide.active{
    opacity:1;
    transform:scale(1);
    transition:opacity 1.6s ease, transform 7s linear;
}
.hero::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(18,21,26,.35) 0%, rgba(18,21,26,.75) 65%, rgba(18,21,26,.95) 100%);
    z-index:1;
}
.hero-progress{
    position:absolute;
    left:60px;bottom:56px;
    z-index:6;
    display:flex;
    gap:10px;
}
.hero-progress .bar{
    width:44px;height:16px;
    position:relative;
    cursor:pointer;
    display:flex;
    align-items:center;
    transition:.25s;
}
.hero-progress .bar:hover::before{background:rgba(255,255,255,.5);}
.hero-progress .bar::before{
    content:"";
    position:absolute;left:0;right:0;top:50%;
    height:2px;
    transform:translateY(-50%);
    background:rgba(255,255,255,.28);
    transition:.25s;
}
.hero-progress .bar::after{
    content:"";
    position:absolute;left:0;top:50%;
    height:2px;
    transform:translateY(-50%);
    width:0%;
    background:var(--teal);
    transition:width .2s linear;
}
.hero-progress .bar.done::after{width:100%;transition:none;}
.hero-progress .bar.active::after{width:100%;transition:width 5s linear;}
.hero-count{
    position:absolute;
    left:60px;bottom:78px;
    z-index:6;
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.2em;
    color:rgba(255,255,255,.65);
}
.hero-count b{color:#fff;font-size:14px;}
.hero-inner{
    position:relative;z-index:5;
    width:min(1320px,90%);
    margin:0 auto 100px;
    color:#fff;
}
.hero-eyebrow{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.3em;
    color:var(--teal);
    margin-bottom:26px;
    display:block;
}
.hero h1{
    font-family:var(--f-display);
    font-size:clamp(52px,8vw,116px);
    font-weight:600;
    line-height:.98;
    letter-spacing:-.02em;
    max-width:920px;
}
.hero-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:48px;
    gap:40px;
    flex-wrap:wrap;
}
.hero-text{
    font-size:17px;
    color:#C9CBD3;
    max-width:420px;
}
.hero-btn{
    display:inline-flex;
    align-items:center;
    gap:14px;
    height:58px;
    padding:0 30px;
    border-radius:999px;
    background:var(--teal);
    color:#fff;
    font-weight:600;
    font-size:14px;
}
.hero-btn:hover{background:#fff; color:#000;}

.scroll-rail{
    position:absolute;
    right:34px;
    top:0;
    height:100%;
    display:flex;
    align-items:center;
    z-index:6;
}
.scroll-rail-inner{
    writing-mode:vertical-rl;
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.4em;
    color:rgba(255,255,255,.55);
    display:flex;
    gap:26px;
    animation:railScroll 14s linear infinite;
}
@keyframes railScroll{
    0%{transform:translateY(0);}
    100%{transform:translateY(-50%);}
}

/* ==========================================================
   PRODUCTS / SERVICES
========================================================== */
.products{background:var(--paper);}
.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.product-card{
    background:var(--paper);
    padding:44px 34px 40px;
    transition:.4s;
    position:relative;
}
.product-card .num{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:16px;
    color:var(--slate);
    margin-bottom:70px;
    display:block;
}
.product-card .thumb{
    height:150px;
    border-radius:2px;
    overflow:hidden;
    margin-bottom:26px;
}
.product-card .thumb img{height:100%;object-fit:cover;transition:.6s;}
.product-card:hover .thumb img{transform:scale(1.08);}
.product-card h3{
    font-family:var(--f-display);
    font-size:26px;
    font-weight:600;
    margin-bottom:16px;
}
.product-card ul li{
    font-size:20px;
    color:var(--slate);
    padding:6px 0;
    border-top:1px solid var(--line);
}
.product-card ul li:first-child{border-top:none;}
.product-card .more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:26px;
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.1em;
    color:var(--teal-deep);
}
.product-card:hover{background:#fff;box-shadow:0 24px 60px rgba(18,21,26,.08);}
.product-card:hover .num{color:var(--teal-deep);}

/* ==========================================================
   MANIFESTO — scroll-driven growing background image
========================================================== */
.manifesto{
    position:relative;
    height:100vh;
    padding:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--ink);
}
.manifesto-media{
    position:absolute;inset:0;
    overflow:hidden;
    z-index:0;
}
.manifesto-media img{
    width:100%;height:100%;
    object-fit:cover;
    transform:scale(1);
    filter:grayscale(.25) brightness(.75);
    will-change:transform;
}
.manifesto::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(18,21,26,.25) 0%, rgba(18,21,26,.65) 100%);
    z-index:1;
}
.manifesto-overlay{
    position:relative;z-index:2;
    text-align:center;
    color:#fff;
    padding:0 24px;
}
.manifesto-overlay h2{
    font-family:var(--f-display);
    font-size:clamp(44px,7vw,104px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:-.02em;
    margin-top:18px;
}
.manifesto-overlay p{
    margin:26px auto 0;
    max-width:520px;
    font-size:17px;
    color:#D6D8DE;
}

/* ==========================================================
   STATEMENT
========================================================== */
.statement{
    background:#fff;
    color:var(--ink);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.statement .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:end;
}
.statement h2{
    font-family:var(--f-display);
    font-size:clamp(40px,5.4vw,76px);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.01em;
}
.statement h2 em{
    font-style:normal;
    color:var(--teal-deep);
}
.statement-side p{
    font-size:19px;
    color:var(--slate);
    margin-bottom:34px;
}
.statement-side .more{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:19px;
    letter-spacing:-0.5px;
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:10px;			padding:10px 20px; border:1px solid #ddd; border-radius:50px;		 background:#000; 
}

/* ==========================================================
   VALUES / PROCESS CAROUSEL
========================================================== */
.values{background:var(--paper-deep);}
.values-wrap{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
}
.value-card{
    position:relative;
    height:460px;
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
}
.value-card img{
    position:absolute;inset:0;
    height:100%;object-fit:cover;
    filter:grayscale(.4) brightness(.6);
    transition:.6s;
}
.value-card:hover img{filter:grayscale(0) brightness(.5);transform:scale(1.05);}
.value-card .tag{
    position:absolute;
    top:30px;left:30px;
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.2em;
    color:var(--teal);
    z-index:2;
}
.value-card .cap{
    position:absolute;
    left:30px;right:30px;bottom:30px;
    z-index:2;
    color:#fff;
}
.value-card .cap h3{
    font-family:var(--f-display);
    font-size:26px;
    margin-bottom:12px;
}
.value-card .cap p{
    font-size:14px;
    color:#D6D8DE;
    line-height:1.7;
}

/* ==========================================================
   MARQUEE BAND
========================================================== */
.marquee-band{
    background:var(--teal);
    color:var(--ink);
    padding:38px 0;
    overflow:hidden;
    white-space:nowrap;
}
.marquee-track{
    display:inline-flex;
    animation:marqueeScroll 26s linear infinite;
}
.marquee-track span{
    font-family:var(--f-display);
    font-size:clamp(30px,4vw,52px);
    font-weight:600;
    padding:0 44px;
    letter-spacing:-.01em;
}
.marquee-track span::after{
    content:"◆";
    margin-left:44px;
    font-size:16px;
    vertical-align:middle;
}
@keyframes marqueeScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}

/* ==========================================================
   SPLIT CTA
========================================================== */

/* gray/red

.split-cta{
    display:grid;
    grid-template-columns:1fr 1fr;
    height:520px;
}
.split-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:56px;
    overflow:hidden;
    color:#fff;
    transition:background .6s ease;
}
.split-panel-dark{
    background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
}
.split-panel-accent{
    background:linear-gradient(135deg, #2a0d0d 0%, var(--teal-deep) 140%);
}
.split-icon{
    position:absolute;
    right:14px;bottom:-26px;
    width:200px;height:200px;
    color:rgba(255,255,255,.07);
    z-index:1;
    pointer-events:none;
    transition:transform .6s ease;
}
.split-icon svg{width:100%;height:100%;}
.split-panel:hover .split-icon{transform:translateY(-14px) rotate(-4deg);}
.split-panel-dark:hover{background:linear-gradient(135deg, #171a20 0%, #33383f 100%);}
.split-panel-accent:hover{background:linear-gradient(135deg, #350f0f 0%, #ff2222 140%);}
.split-panel .tag{
    position:relative;z-index:2;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.25em;
    color:rgba(255,255,255,.6);
    margin-bottom:18px;
}
.split-panel-accent .tag{color:rgba(255,255,255,.85);}
.split-panel h3{
    position:relative;z-index:2;
    font-family:var(--f-display);
    font-size:clamp(28px,3vw,40px);
    font-weight:600;
    line-height:1.25;
    margin-bottom:20px;
}
.split-panel .more{
    position:relative;z-index:2;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.1em;
    color:#fff;
    display:inline-flex;
    gap:8px;
    align-items:center;
    transition:gap .3s ease;
}
.split-panel:hover .more{gap:14px;}
.split-panel + .split-panel{border-left:1px solid rgba(255,255,255,.15);}

   */

 /*
.split-cta{
    display:grid;
    grid-template-columns:1fr 1fr;
    height:520px;
}
.split-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:56px;
    overflow:hidden;
    color:var(--ink);
    transition:background .6s ease;
}
.split-panel-dark{
    background:linear-gradient(135deg, #F3ECE0 0%, #E9DFCC 100%);
}
.split-panel-accent{
    background:linear-gradient(135deg, #EAF0E2 0%, #D6E2C8 100%);
}
.split-icon{
    position:absolute;
    right:14px;bottom:-26px;
    width:200px;height:200px;
    color:rgba(18,21,26,.06);
    z-index:1;
    pointer-events:none;
    transition:transform .6s ease;
}
.split-icon svg{width:100%;height:100%;}
.split-panel:hover .split-icon{transform:translateY(-14px) rotate(-4deg);}
.split-panel-dark:hover{background:linear-gradient(135deg, #EFE6D5 0%, #E2D5BC 100%);}
.split-panel-accent:hover{background:linear-gradient(135deg, #DFE9D4 0%, #C7D6B7 100%);}
.split-panel .tag{
    position:relative;z-index:2;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.25em;
    color:var(--teal-deep);
    margin-bottom:18px;
}
.split-panel-accent .tag{color:var(--teal-deep);}
.split-panel h3{
    position:relative;z-index:2;
    font-family:var(--f-display);
    font-size:clamp(28px,3vw,40px);
    font-weight:600;
    line-height:1.25;
    margin-bottom:20px;
    color:var(--ink);
}
.split-panel .more{
    position:relative;z-index:2;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.1em;
    color:var(--ink);
    display:inline-flex;
    gap:8px;
    align-items:center;
    transition:gap .3s ease;
}
.split-panel:hover .more{gap:14px;}
.split-panel + .split-panel{border-left:1px solid rgba(18,21,26,.1);}

 */



 .split-cta{
    display:grid;
    grid-template-columns:1fr 1fr;
    height:320px;		
}
.split-panel{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:56px;
    overflow:hidden;
    color:var(--ink);
    background:var(--paper);
    transition:background .5s ease;	 background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
}
.split-panel-dark:hover,
.split-panel-accent:hover{background:var(--paper-deep);}
.split-shape{
    position:absolute;
    z-index:1;
    pointer-events:none;
    transition:transform .6s ease;
}
.split-shape svg{width:100%;height:100%;display:block;}
.shape-circle{
    top:64px;right:-30px;
    width:220px;height:250px;
    color:rgba(255,255,255,.46);		
}
.shape-blob{
       top:44px;right:-30px;
    width:220px;height:320px;
    color:rgba(255,255,255,.26);	
}
.split-panel:hover .split-shape{transform:translateY(-10px);}
.split-panel .tag{
    position:relative;z-index:2;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.25em;
    color:var(--teal-deep);
    margin-bottom:18px;
}
.split-panel h3{
    position:relative;z-index:2;
    font-family:var(--f-display);
    font-size:clamp(28px,3vw,40px);
    font-weight:600;
    line-height:1.25;
    margin-bottom:20px;
    color:#fff;
}
.split-panel .more{
    position:relative;z-index:2;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:32px;
    letter-spacing:.1em;
    color:#fff;
    display:inline-flex;
    gap:8px;
    align-items:center;
    transition:gap .3s ease;
}
.split-panel:hover .more{gap:14px;}
.split-panel + .split-panel{border-left:1px solid var(--line);}


.split-panel:hover h3{
     color:#000;
}
.split-panel:hover .shape-circle{
 
    color:rgba(134,129,105,.46);		
}

.split-panel:hover .shape-blob{
 
    color:rgba(218,215,205,.46);		
}

 .split-panel:hover .more{
     color:#000;
}


/* ==========================================================
   FOOTER
========================================================== */
footer{
    background:#fff;
    color:var(--slate);
    padding:100px 0 0;
    border-top:1px solid var(--line);
}
.footer-top{
    width:min(1320px,90%);
    margin:auto;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:60px;
    padding-bottom:70px;
    border-bottom:1px solid var(--line);
}
.footer-logo{
    font-family:var(--f-display);
    font-size:30px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:16px;
}
.footer-logo span{color:var(--teal-deep);}
.footer-tag{font-size:14px;color:var(--slate);}
.footer-col h4{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.2em;
    color:var(--slate);
    margin-bottom:22px;
    text-transform:uppercase;
}
.footer-col a{
    display:block;
    font-size:15px;
    color:var(--ink-soft);
    margin-bottom:14px;
    transition:.25s;
}
.footer-col a:hover{color:var(--teal-deep);}

.footer-info{
    width:min(1320px,90%);
    margin:34px auto;
    display:flex;
    flex-wrap:wrap;
    gap:0;
    font-size:16px;
    color:var(--slate);
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
}
.footer-info span{
    padding:0 22px;
    border-left:1px solid var(--line);
}
.footer-info span:first-child{border-left:none;padding-left:0;}

.footer-bottom{
    text-align:center;
    padding:26px 0;
    border-top:1px solid var(--line);
    font-size:12px;
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    letter-spacing:.05em;
    color:var(--slate);
    margin-top:10px;
}

/* ==========================================================
   QUICK CONTACT + TOP BUTTON
========================================================== */
.quick-cs{
    position:fixed;
    right:34px;bottom:110px;
    width:58px;height:58px;
    border-radius:50%;
    background:var(--teal);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:'Pretendard', sans-serif;
    font-weight:600;
    font-size:15px;
    line-height:1.1;
    text-align:center;
    z-index:999;
    box-shadow:0 10px 15px rgba(0,0,0,.25);
    transition:transform .25s ease;
}
.quick-cs:hover{ transform:translateY(-3px); }
.top-btn{
    position:fixed;
    right:34px;bottom:36px;
    width:58px;height:58px;
    border-radius:50%;
    background:var(--ink);
    color:#fff;
    display:flex;justify-content:center;align-items:center;
    cursor:pointer;
    opacity:0;pointer-events:none;
    transition:.3s;
    z-index:999;	     box-shadow:0 10px 15px rgba(0,0,0,.25);
}
.top-btn.show{opacity:1;pointer-events:auto;}

/* ==========================================================
   FEATURES — interactive tab list + crossfading visual
========================================================== */
.features{background:var(--paper-deep);}
.feature-wrap{
    display:grid;
    grid-template-columns:1fr minmax(0,440px);
    gap:70px;
    align-items:start;
}
.feature-list{display:flex;flex-direction:column;}
.feature-item{
    display:block;
    width:100%;
    text-align:left;
    background:none;
    border:none;
    border-top:1px solid var(--line);
    padding:26px 10px 26px 20px;
    cursor:pointer;
    position:relative;
    transition:.35s;
}
.feature-item:last-child{border-bottom:1px solid var(--line);}
.feature-item::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;
    width:2px;
    background:var(--teal);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .4s ease;
}
.feature-item .f-num{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:13px;
    letter-spacing:.15em;
    color:var(--slate);
    display:block;
    margin-bottom:10px;
}
.feature-item .f-title{
    font-family:var(--f-display);
    font-size:23px;
    font-weight:600;
    display:block;
    color:var(--ink);
    transition:.3s;
}
.feature-item .f-desc{
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    transition:grid-template-rows .35s linear, opacity .35s linear, margin .35s linear;
}
.feature-item .f-desc-inner{
    overflow:hidden;
    min-height:0;
    font-size:15px;
    line-height:1.7;
    color:#000;
}
.feature-item:hover .f-title{color:var(--teal-deep);}
.feature-item.active{background:rgba(255,255,255,.5);}
.feature-item.active::before{transform:scaleY(1);}
.feature-item.active .f-title{color:var(--teal-deep);}
.feature-item.active .f-desc{grid-template-rows:1fr;opacity:1;margin-top:10px;}

.feature-visual{
    position:sticky;
    top:120px;
    width:100%;
    max-width:440px;
    height:340px;
    margin-left:auto;
    border-radius:22px;
    overflow:hidden;
    background:var(--ink);
    box-shadow:0 26px 54px rgba(18,21,26,.22);
    backface-visibility:hidden;
}
.feature-slide{
    position:absolute;inset:0;
    opacity:0;
    transform:scale(.92);
    transition:opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}
.feature-slide.active{opacity:1;transform:scale(1);}
.feature-slide img{
    width:100%;height:100%;
    object-fit:cover;
    border-radius:22px;
    filter:grayscale(.2) brightness(.82);
}
.feature-slide::after{
    content:"";
    position:absolute;inset:0;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(18,21,26,0) 45%, rgba(18,21,26,.6) 100%);
    z-index:1;
}
.feature-slide .fs-cap{
    position:absolute;left:24px;bottom:20px;z-index:2;
    color:#fff;
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.2em;
}



.subtab {
    margin: 60px auto 0;
}

.subtab ul {
    display: flex;
    justify-content: center; /* 가운데 정렬 */
    gap: 10px;               /* li 사이 간격 */
    padding: 0;
    margin: 0;
    list-style: none;
}

.subtab ul li {
    padding: 7px 20px;
    font-size: 19px;
    font-weight: 400;
    border: 1px solid #ddd;	 border-radius:5px;
}
.subtab ul li.active{
    padding: 7px 20px;
    font-size: 19px;
    font-weight: 400;
    border: 1px solid #666;	 border-radius:5px;
}

/* ==========================================================
   FLOW — soft blurred blobs, morph/drift driven by scroll
========================================================== */
.flow{
    height:90vh;
    min-height:560px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:var(--ink);
    padding:0;
}
.flow-bg{position:absolute;inset:0;z-index:0;}
.flow-blob{
    position:absolute;
    filter:blur(60px);
    opacity:.75;
    mix-blend-mode:screen;
    animation:blobMorph 10s ease-in-out infinite alternate;
}
.blob-1{
    width:520px;height:520px;
    top:-120px;left:-100px;
    background:radial-gradient(circle at 30% 30%, var(--teal), transparent 75%);
    animation-duration:9s;
}
.blob-2{
    width:460px;height:460px;
    bottom:-150px;right:-90px;
    background:radial-gradient(circle at 60% 40%, #6c7890, transparent 75%);
    animation-duration:12s;
    animation-delay:-3s;
}
.blob-3{
    width:380px;height:380px;
    top:32%;left:52%;
    background:radial-gradient(circle at 50% 50%, #ff3b3b, transparent 75%);
    animation-duration:8s;
    animation-delay:-1.5s;
}
@keyframes blobMorph{
    0%{
        transform:translate(0,0) rotate(0deg) scale(1);
        border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50%{
        transform:translate(220px,-160px) rotate(30deg) scale(1.35);
        border-radius:45% 55% 60% 40% / 40% 55% 45% 60%;
    }
    100%{
        transform:translate(-180px,190px) rotate(-25deg) scale(.75);
        border-radius:55% 45% 40% 60% / 50% 45% 55% 50%;
    }
}
.flow-inner{
    position:relative;z-index:2;
    text-align:center;
    color:#fff;
}
.flow-inner .eyebrow{justify-content:center;color:var(--teal);}
.flow-inner h2{
    font-family:var(--f-display);
    font-size:clamp(40px,6vw,88px);
    font-weight:600;
    line-height:1.05;
    letter-spacing:-.02em;
    margin-top:14px;
}
.flow-inner p{
    margin:26px auto 0;
    max-width:480px;
    font-size:17px;
    color:#C9CBD3;
}


/* ==========================================================
   PORTFOLIO — filterable, linkable grid
========================================================== */
.portfolio{background:var(--paper);}
.portfolio-filter{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:50px;
}
.filter-btn{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:16px;
  
    padding:11px 24px;
    border-radius:999px;
    border:1px solid var(--line);
    background:none;
    color:var(--slate);
    cursor:pointer;
    transition:.3s;
}
.filter-btn:hover{border-color:var(--teal);color:var(--teal-deep);}
.filter-btn.active{background:var(--ink);border-color:var(--ink);color:#fff;}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}
.portfolio-card{
    position:relative;
    display:block;
   /* aspect-ratio:4/3;	  */
   aspect-ratio: 461/434;
    border-radius:5px;
    overflow:hidden;			  max-width:461px;		 	  max-height:434px;
    transition:opacity .4s ease, transform .4s ease;
}
.portfolio-card.hide{
    display:none;
}
.portfolio-thumb{position:absolute;inset:0;}
.portfolio-thumb img{
    width:100%;height:100%; 
    object-fit:cover;			object-position: center top;		
    filter:grayscale(.5) brightness(.72);
    transition:.6s ease;
}
.portfolio-card:hover .portfolio-thumb img{
    transform:scale(1.08);
    filter:grayscale(0) brightness(.55);
}
.portfolio-card::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(18,21,26,.05) 40%, rgba(18,21,26,.85) 100%);
    z-index:1;
}
.portfolio-info{
    position:absolute;left:26px;right:26px;bottom:24px;
    z-index:2;
    color:#fff;
}
.portfolio-info .tag{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:1px !important;
    font-weight:200;
    font-size:12px;  
    color:rgba(255,255,255,0.6);
    display:block;
    margin-bottom:8px;
}
.portfolio-info h3{
    font-family:var(--f-display);
    font-size:22px;
    font-weight:600;
    margin-bottom:12px;
}
.portfolio-info .link{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.05em;
    display:inline-flex;
    align-items:center;
    gap:8px;
    opacity:0;
    transform:translateY(8px);
    transition:.35s ease;
}
.portfolio-card:hover .portfolio-info .link{opacity:1;transform:translateY(0);}




   
  /* info + vision */
.about-info{background:var(--paper-deep);}
.info-wrap{
    display:grid;
  /*  grid-template-columns:1.3fr .7fr;
    gap:40px;	   */
    align-items:stretch;
}
.anniv-strip-vertical{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:repeat(3,1fr);
}
.anniv-strip-vertical .anniv-cell{
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:left;
    padding:30px 34px;
}
.anniv-strip-vertical .anniv-cell b{font-size:46px;}




/* VISION REVEAL — full-bleed scroll-scale image with overlaid content */
.vision-reveal{
    position:relative;
    height:100vh;
    padding:0;
    overflow:hidden;
    display:flex;				
    align-items:center;
    justify-content:center;
    background:var(--ink);
}
.vision-media{
    position:absolute;inset:0;
    overflow:hidden;
    z-index:0;
}
.vision-media img{
    width:100%;height:100%;
    object-fit:cover;
    transform:scale(1);
    filter:grayscale(.25) brightness(.6);
    will-change:transform;
}
.vision-reveal::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(18,21,26,.35) 0%, rgba(18,21,26,.75) 100%);
    z-index:1;
}
.vision-overlay{
    position:relative;z-index:2;
    text-align:center;
    color:#fff;
    padding:0 24px;
    width:min(1200px,92%);
}
.vision-overlay .eyebrow{justify-content:center;color:var(--teal);}
.vision-overlay h2{
    font-family:var(--f-display);
    font-size:clamp(46px,7vw,104px);
    font-weight:700;
    line-height:1.06;
    letter-spacing:-.02em;
    margin-bottom:70px;
}
.vision-pillars{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    border-top:1px solid rgba(255,255,255,.2);
    padding-top:50px;
}
.v-pillar{
    position:relative;
    aspect-ratio:3/4;
    border-radius:8px;
    overflow:hidden;
    text-align:left;
}
.v-pillar-red{background:var(--teal-deep);}
.v-pillar-black{background:var(--ink);}
.vp-media{position:absolute;inset:0;overflow:hidden;}
.vp-media img{
    width:100%;height:100%;
    object-fit:cover;
    opacity:.6;
    mix-blend-mode:luminosity;
    clip-path:inset(34% round 8px);
    transform:scale(1.2);
    will-change:clip-path, transform;
}
.v-pillar-black .vp-media img{mix-blend-mode:normal;filter:grayscale(.3) brightness(.7);}
.vp-box{
    position:absolute;
    left:20px;right:20px;bottom:20px;
    z-index:2;
    background:#fff;
    color:var(--ink);
    padding:26px 26px 28px;
    border-radius:6px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    opacity:0;
    transform:translateY(26px);
}
.vp-box .v-num{
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.15em;
    color:var(--teal-deep);
    display:block;
    margin-bottom:10px;
}
.vp-box h3{
    font-family:var(--f-display);
    font-size:clamp(20px,2vw,26px);
    font-weight:700;
    letter-spacing:-.01em;
    margin-bottom:10px;
    color:var(--ink);
}
.vp-box p{
    font-size:17px;
    line-height:1.6;
    color:var(--slate);
}
.info-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
}
.info-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:22px 28px;
    border-bottom:1px solid var(--line);
}
.info-row:last-child{border-bottom:none;}
.info-row .label{
    font-family:var(--f-mono);
    font-weight:600;
    font-size:17px;
    letter-spacing:0em;
    color:var(--slate);
    text-transform:uppercase;
    flex:0 0 90px;
}
.info-row .value{
    font-size:17px;
    color:var(--ink);
    flex:1;
    line-height:1.6;
}
.info-row .value b{
    font-family:var(--f-display);
    font-size:20px;
    font-weight:700;
}
.copy-btn{
    flex:0 0 auto;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:11px;
    letter-spacing:.05em;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:none;
    color:var(--slate);
    cursor:pointer;
    transition:.25s;
    white-space:nowrap;
}
.copy-btn:hover{border-color:var(--teal);color:var(--teal-deep);}
.copy-btn.copied{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff;}
.tag-list{    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-list li {
    word-break: keep-all;
    overflow-wrap: normal;		  list-style:none;
}
.tag-pill{
    font-size:13px;
    padding:6px 14px;
    border-radius:999px;
    background:var(--paper-deep);
    color:var(--ink-soft);
}

.anniv-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    margin-top:26px;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
}
.anniv-cell{
    background:#fff;
    padding:30px 20px;
    text-align:center;
}
.anniv-cell b{
    display:block;
    font-family:var(--f-display);
    font-size:38px;
    font-weight:700;
    color:var(--teal-deep);
    letter-spacing:-.02em;
}
.anniv-cell span{
    display:block;
    margin-top:8px;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:11px;
    letter-spacing:.12em;
    color:var(--slate);
    text-transform:uppercase;
}

.vision-list h3{
    font-family:var(--f-display);
    font-size:14px;
    font-weight:600;
    letter-spacing:.2em;
    color:var(--slate);
    text-transform:uppercase;
    margin-bottom:24px;
}
.vision-card{
    position:relative;
    border:1px solid var(--line);
    border-radius:6px;
    padding:26px 28px;
    margin-bottom:14px;
    cursor:pointer;
    background:#fff;
    overflow:hidden;
    transition:.35s;
}
.vision-card:last-child{margin-bottom:0;}
.vision-card::before{
    content:"";
    position:absolute;left:0;top:0;bottom:0;
    width:3px;
    background:var(--teal);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .35s ease;
}
.vision-card.open::before{transform:scaleY(1);}
.vision-card .v-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.vision-card .v-num{
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    color:var(--slate);
    letter-spacing:.1em;
}
.vision-card h4{
    font-family:var(--f-display);
    font-size:20px;
    font-weight:600;
    margin-top:6px;
}
.vision-card .v-plus{
    font-family:var(--f-mono);
    font-size:20px;
    color:var(--slate);
    transition:transform .35s ease;
}
.vision-card.open .v-plus{transform:rotate(45deg);color:var(--teal-deep);}
.vision-card .v-body{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
    font-size:15px;
    color:var(--slate);
    line-height:1.7;
}
.vision-card.open .v-body{max-height:120px;opacity:1;margin-top:14px;}

/* map / contact */
.about-map{background:#fff;}
.map-wrap{
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
}
.map-frame{
    width:100%;
    min-height:400px;
    background:var(--paper-deep);
}
.map-fallback{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    padding:20px 26px;
    border-top:1px solid var(--line);
}
.map-fallback span{font-size:14px;color:var(--slate);}
.map-fallback a{
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.05em;
    color:var(--teal-deep);
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* copy toast */
.copy-toast{
    position:fixed;
    left:50%;bottom:40px;
    transform:translate(-50%,20px);
    background:var(--ink);
    color:#fff;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:13px;
    padding:14px 24px;
    border-radius:999px;
    opacity:0;
    pointer-events:none;
    transition:.3s ease;
    z-index:1000;
}
.copy-toast.show{opacity:1;transform:translate(-50%,0);}














/* ==========================================================
   RESPONSIVE
========================================================== */
@media (max-width:1024px){
    header{padding:0 24px;}

    .nav-toggle{display:flex;}

    nav{
        position:fixed;
        top:-30px;right:0;
        width:min(320px,80vw);
        height:100vh;
        background:rgba(0,0,0,0.8);
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        gap:0;
        padding:0px 40px 40px;
        transform:translateX(100%);
        transition:transform .4s cubic-bezier(.4,0,.2,1);
        z-index:9998;
        box-shadow:-10px 0 40px rgba(18,21,26,.12);
    }
    nav.open{transform:translateX(0);}
    nav a{
        color:#fff;
        font-size:19px;
        width:100%;
        padding:12px 0;
        border-bottom:1px solid var(--line);
    }

	 nav a::after{
    content:"";
    position:absolute;
    left:0;bottom:0px;
    width:0;height:1px;
    background:currentColor;
    transition:.35s;
}
nav a:hover::after{width:100%;}


.nav-toggle.active span{color:#fff;background:#fff !important;}

    header.scrolled nav a{color:#fff;}

    .product-grid{grid-template-columns:repeat(2,1fr);}
    .statement .container{grid-template-columns:1fr;}
    .values-wrap{grid-template-columns:1fr;}
    .split-cta{grid-template-columns:1fr;height:auto;}
    .split-panel{height:340px;}
    .split-panel + .split-panel{border-left:none;border-top:1px solid rgba(255,255,255,.15);}
    .footer-top{grid-template-columns:1fr;}
    .scroll-rail{display:none;}
    section{padding:100px 0;}
    .section-head{flex-direction:column;align-items:flex-start;gap:20px;}

    .feature-wrap{grid-template-columns:1fr;gap:36px;}
    .feature-visual{position:static;max-width:100%;height:260px;margin-left:0;order:-1;}
    .feature-item .f-title{font-size:19px;}

    .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:16px;}

    .flow{height:70vh;min-height:440px;}
    .blob-1{width:320px;height:320px;}
    .blob-2{width:280px;height:280px;}
    .blob-3{width:230px;height:230px;}

  

    .info-wrap{grid-template-columns:1fr;gap:24px;}
    .anniv-strip{grid-template-columns:1fr;}
    .anniv-strip-vertical{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;}
    .anniv-strip-vertical .anniv-cell{text-align:center;padding:24px 16px;}
    .info-row{flex-wrap:wrap;}
    .vision-reveal{height:auto;padding:100px 0;}
    .vision-pillars{grid-template-columns:1fr;gap:34px;}

}


.pcver{display:block;}
.mover{display:none}

@media (max-width:640px){
  /*  .portfolio-grid{grid-template-columns:1fr;}		 */
  .section-head h2{

    font-size:50px;

}

.pcver{display:none}
.mover{display:block}


    .portfolio-filter{gap:10px;}


   .portfolio-info h3{
    font-size:17px;
}




    .filter-btn{padding:9px 18px;font-size:15px;}
	.col2nd{margin-top:-60px !important;}

.footer-info span{
    padding:0 20px 0 0;
    border-left:0px solid var(--line);
}


  .product-card h3{		
    font-size:20px;
    font-weight:600;
    margin-bottom:16px;
}
.product-card ul li{
    font-size:0.8rem;
}


 .quick-cs{
display:none;
}


 .map-frame{
    min-height:250px !important;	     height:250px;
}

.map-fallback{  
    gap:0px;	  
    padding:10px 26px;
}




}






/* ==========================================================
   SUBPAGE — simple top banner
========================================================== */
.sub-hero{
    position:relative;
    height:400px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:var(--ink);
}
.sub-hero-bg{
    position:absolute;inset:0;
    background:url("../image/subbg.jpg") center/cover;
    filter:grayscale(.35) contrast(1.05);
}
.sub-hero::before{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(18,21,26,.55) 0%, rgba(18,21,26,.8) 100%);
}
.sub-hero-inner{
    position:relative;z-index:2;
    width:min(1320px,90%);
    margin:auto;
    color:#fff;
}
.sub-hero-inner .eyebrow{color:var(--teal);}
.sub-hero-inner h1{
    font-family:var(--f-display);
    font-size:clamp(38px,5vw,58px);
    font-weight:600;					padding-top:40px;
    letter-spacing:-.01em;		 text-align:center;
}
.breadcrumb{
    margin-top:22px;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.1em;
    color:rgba(255,255,255,.6);
    display:flex;
    align-items:center;
    gap:10px;
}
.breadcrumb a{color:rgba(255,255,255,.8);}
.breadcrumb a:hover{color:var(--teal);}

/* about intro */
.about-intro{background:#fff;}
.about-intro .container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}
.about-intro h2{
    font-family:var(--f-display);
    font-size:clamp(40px,5.4vw,76px);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.01em;
}
.about-intro h2 em{font-style:normal;color:var(--teal-deep);}
.about-intro p{
    font-size:17px;
    color:var(--slate);
    margin-bottom:22px;
}


@media (max-width:640px){
  .about-intro .container{
    display:block;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:start;
}
  .about-intro h2{
margin-bottom:40px;
}

.tag-list li {
    word-break: keep-all;	 	  margin: 0 !important;           /* 또는 1px 0 */
    padding: 0 !important;     
    line-height: 1.2;    /* 필요하면 추가 */
    overflow-wrap: normal;		  list-style:none;
}
   .value-card{

    height:220px;

}











 }

/* stats */
.about-stats{background:var(--paper-deep);}
.stats-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.stat-cell{
    background:var(--paper-deep);
    padding:56px 30px;
    text-align:center;
}
.stat-cell b{
    display:block;
    font-family:var(--f-display);
    font-size:52px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:-.02em;
}
.stat-cell span{
    display:block;
    margin-top:10px;
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    letter-spacing:.15em;
    color:var(--slate);
    text-transform:uppercase;
}

/* feature cards (reuses product-card visual language) */
.about-features{background:#fff;}
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    background:var(--line);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.feature-cell{
    background:#fff;
    padding:50px 40px;
    transition:.35s;
}
.feature-cell:hover{background:var(--paper-deep);}
.feature-cell .num{
    font-family:var(--f-mono);
    font-weight:600;
    font-size:12px;
    color:var(--slate);
    display:block;
    margin-bottom:40px;
}
.feature-cell h3{
    font-family:var(--f-display);
    font-size:24px;
    font-weight:600;
    margin-bottom:14px;
}
.feature-cell p{font-size:17px;color:var(--slate);}





.hp-dark{ background:#0a0a0c; }

/* --- 고스트 워터마크 로고 텍스트 --- */
.hp-ghost{
    position:absolute;
    top:0; left:0; width:100%;
    text-align:center;
    font-weight:800;
    font-size: clamp(60px, 12vw, 180px);
    line-height:0.9;
    letter-spacing:.02em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.08);
    pointer-events:none;
    user-select:none;
    z-index:0;
    white-space:nowrap;
}
.hp-ghost.small{
    position:static;
    font-size: clamp(28px, 4vw, 48px);
    -webkit-text-stroke: 1px rgba(255,255,255,.15);
    margin-bottom: 18px;
}

/* --- HERO --- */
.hp-hero{
    position:relative;
    min-height: 100vh;
    background:#0a0a0c;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding: 140px 0 100px;
}
.hp-hero-top{
    position:relative;
    z-index:2;
    padding: 0 6vw;
    margin-bottom: 60px;
}
.hp-hero-top h1{
    font-size: clamp(34px, 5vw, 58px);
    color:#fff;
    font-weight:800;
    letter-spacing:.01em;
}
.hp-hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    gap: 6vw;
    padding: 0 6vw;
}
.hp-hero-media{
    position:relative;
    flex: 0 0 auto;
    width: min(48vw, 620px);
    aspect-ratio: 16/10;
    border-radius: 10px;
    overflow:hidden;
    filter: saturate(1.15);
}
.hp-hero-media img{
    width:100%; height:100%; object-fit:cover;
    transform: scale(1.15);
}
.hp-hero-copy{
    position:relative;
    z-index:2;
    flex:1;
    min-width:280px;
}
.hp-gradient-title{
    font-size: clamp(38px, 6.4vw, 88px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:.01em;
    background: linear-gradient(100deg, #35c6ff 0%, #6f7bff 35%, #e14bd0 65%, #ff5f8e 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    margin-bottom: 6px;
}
.hp-hero-copy p{
    font-size: clamp(15px,1.4vw,18px);
    line-height:1.85;
    color: rgba(255,255,255,.72);
    margin-top: 26px;
    max-width: 480px;
}
.hp-hero-copy p + p{ margin-top:16px; }




/* --- PRICE --- */


/* price black 배경
.hp-price-section{
    padding: 130px 0 130px;
background:#0a0a0c;	 
    text-align:center;
}
.hp-price-title{
    font-size: clamp(30px,3.6vw,46px);
    color:#fff;
    font-weight:800;
    margin-bottom: 56px;
}
.hp-price-title em{ color: var(--accent,#e31010); font-style:normal; }
.hp-price-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1800px;
    margin: 0 auto 0px;
    padding: 0 6vw;
}
.hp-price-card{
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    padding: 34px 24px 28px;
    text-align:left;
    color:#fff;
    transform: translateY(0);
    transition: transform .4s ease, border-color .3s ease, background .3s ease;
}
.hp-price-card:hover{
    transform: translateY(-10px);
    border-color: rgba(227,16,16,.45);
    background: rgba(255,255,255,.065);
}
.hp-price-card .plan{
    text-align:center;
    font-size:18px;
    letter-spacing:.14em;
    color: rgba(255,255,255,.5);
    margin-bottom: 10px;
}
.hp-price-card .amount{
    text-align:center;
    font-size: 40px;
    font-weight:800;
    margin-bottom: 22px;
}
.hp-price-card ul{ list-style:none; padding:0; margin:0; }
.hp-price-card li{
    display:flex;
    justify-content:space-between;
    font-size:17px;
    color: rgba(255,255,255,.68);
    padding: 7px 0;
    border-top: 1px dashed rgba(255,255,255,.08);
}
.hp-price-card li:first-child{ border-top:none; }
.hp-price-card li span:first-child{ color: rgba(255,255,255,.42); }

	*/


/* --- PRICE 섹션 : 밝은 배경 반전 (about-info 와 같은 방식) --- */

.hp-price-section{
    padding: 130px 0 130px;
    background: var(--paper-deep);
    text-align:center;
}
.hp-price-title{
    font-size: clamp(30px,3.6vw,46px);
    color: var(--ink, #14161b);
    font-weight:800;
    margin-bottom: 56px;
}
.hp-price-title em{ color: var(--accent,#e31010); font-style:normal; }
.hp-price-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1800px;
    margin: 0 auto 0px;
    padding: 0 6vw;
}
.hp-price-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 34px 24px 28px;
    text-align:left;
    color: var(--ink, #14161b);
    box-shadow: 0 14px 34px rgba(0,0,0,.06);
    transform: translateY(0);
    transition: transform .4s ease, border-color .3s ease, box-shadow .3s ease;
}
.hp-price-card:hover{
    transform: translateY(-10px);
    border-color: rgba(227,16,16,.45);
    background: #fff;
    box-shadow: 0 22px 44px rgba(0,0,0,.1);
}
.hp-price-card .plan{
    text-align:center;
    font-size:18px;
    letter-spacing:.14em;
    color: rgba(0,0,0,.45);
    margin-bottom: 10px;
}
.hp-price-card .amount{
    text-align:center;
    font-size: 40px;
    font-weight:800;
    color: var(--ink, #14161b);
    margin-bottom: 22px;
}
.hp-price-card ul{ list-style:none; padding:0; margin:0; }
.hp-price-card li{
    display:flex;
    justify-content:space-between;
    font-size:17px;
    color: rgba(0,0,0,.68);
    padding: 7px 0;
    border-top: 1px dashed rgba(0,0,0,.08);
}
.hp-price-card li:first-child{ border-top:none; }
.hp-price-card li span:first-child{ color: rgba(0,0,0,.4); }




/* --- FREE : 무료로 제공해드립니다 --- */
.hp-free-section{
    padding: 100px 0 50px;
    background: #fff;
}
.hp-free-title{
    font-size: clamp(26px,3vw,34px);
    font-weight:600;
    color:#000;
    text-align:left;
    line-height:1.3;
    margin-bottom: 46px;
}
.hp-free-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.hp-free-item{
    background:#f3f3f3;
    border:1px solid rgba(0,0,0,0);
    border-radius: 14px;
    padding: 30px;
    text-align:left;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.hp-free-item:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.35);
}
.hp-free-icon{
    width: 50px;
    height: 48px;
    margin: 0 0 20px;
    display:flex;
    align-items:center;
 justify-content: flex-start;
}
.hp-free-icon img{
    width:100%;		   max-width:100%;
    height:100%;		   
    object-fit:contain;
}
.hp-free-item h3{
    font-size: 22px;
    font-weight:700;
    color:#111;
    margin-bottom: 10px;
}
.hp-free-item p{
    font-size:16px;
    line-height:1.6;
    color: rgba(0,0,0,.55);
}
.hp-free-notes{
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(0,0,0,.1);
}
.hp-free-notes p{
    font-size:12.5px;
    line-height:1.8;
    color: rgba(0,0,0,.45);
}

@media (max-width: 1100px){
    .hp-free-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px){
    .hp-free-grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
    .hp-free-item{ padding: 24px 16px 22px; }
	.hp-free-item h3{
    font-size: 20px;
    font-weight:700;
    color:#111;
    margin-bottom: 10px;
}
.hp-free-item p{
    font-size:15px;
    line-height:1.6;
    color: rgba(0,0,0,.55);
}
}












.sm-price-section{
    padding: 130px 0 130px;
    background: var(--paper-deep);
    text-align:center;
}
.sm-price-title{
    font-size: clamp(30px,3.6vw,46px);
    color: var(--ink, #14161b);
    font-weight:800;
    margin-bottom: 56px;
}
.sm-price-title em{ color: var(--accent,#e31010); font-style:normal; }
.sm-price-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1800px;
    margin: 0 auto 0px;
    padding: 0 6vw;
}
.sm-price-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: 34px 24px 28px;
    text-align:left;
    color: var(--ink, #14161b);
    box-shadow: 0 14px 34px rgba(0,0,0,.06);
    transform: translateY(0);
    transition: transform .4s ease, border-color .3s ease, box-shadow .3s ease;
}
.sm-price-card:hover{
    transform: translateY(-10px);
    border-color: rgba(227,16,16,.45);
    background: #fff;
    box-shadow: 0 22px 44px rgba(0,0,0,.1);
}
.sm-price-card .plan{
    text-align:center;
    font-size:18px;
    letter-spacing:.14em;
    color: rgba(0,0,0,.45);
    margin-bottom: 10px;
}
.sm-price-card .amount{
    text-align:center;
    font-size: 40px;
    font-weight:800;
    color: var(--ink, #14161b);
    margin-bottom: 22px;
}
.sm-price-card ul{ list-style:none; padding:0; margin:0; }
.sm-price-card li{
    display:flex;
    justify-content:space-between;
    font-size:17px;
    color: rgba(0,0,0,.68);
    padding: 7px 0;
    border-top: 1px dashed rgba(0,0,0,.08);
}
.sm-price-card li:first-child{ border-top:none; }
.sm-price-card li span:first-child{ color: rgba(0,0,0,.4); }














.hp-quote-btn{
    display:inline-block;
    background:transparent;
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    font-size:14px;
    letter-spacing:.04em;
    padding: 13px 34px;
    border-radius:4px;
    cursor:pointer;
    transition: background .3s ease, border-color .3s ease;
}
.hp-quote-btn:hover{ background: var(--accent,#e31010); border-color: var(--accent,#e31010); }

/* --- OUR SERVICE (alternating rows) --- */
.hp-service-section{ background:#0a0a0c; padding-bottom: 20px; }
.hp-service-head{ text-align:center; padding: 20px 0 60px; }
.hp-service-head h2{
    font-size: clamp(30px,3.6vw,46px);
    color:#fff; font-weight:800;
}
.hp-service-head h2 em{ color: var(--accent,#e31010); font-style:normal; }
.hp-service-row{
    display:grid;
    grid-template-columns: 1fr 1fr;
    min-height: 380px;
}
.hp-service-row.reverse .hp-s-media{ order:2; }
.hp-service-row.reverse .hp-s-text{ order:1; }
.hp-s-media{ position:relative; overflow:hidden; }
.hp-s-media img{
    width:100%; height:100%; object-fit:cover;
    display:block;
    transform: scale(1.08);
}
.hp-s-text{
    display:flex; flex-direction:column; justify-content:center;
    padding: 50px clamp(28px,5vw,80px);
    color:#fff;
}
.hp-s-text h3{ font-size: clamp(22px,2.2vw,30px); margin-bottom: 18px; font-weight:800; }
.hp-s-text p{ font-size:14.5px; line-height:1.85; color: rgba(255,255,255,.65); max-width:480px; }
.hp-s-media.blue{ background:#0d63d8; }







  /* --- hp-sample --- */
    .hp-sample {
  margin:100px auto 100px;
}

  .hp-sample h2{
   font-family:'Pretendard', sans-serif; 		  letter-spacing:-0.5px;
    font-weight:600;
    font-size:36px;  text-align:center;				 margin:70px auto;
}



.hp-sample-row{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1800px;
    margin: 0 auto 20px;
    padding: 0 6vw;			   text-align:center;
}
 .hp-sample-row img{
border:1px solid #ddd; border-radius:10px;	margin-bottom:20px;		 text-align:center;
}






/* --- DESIGN MAUM 워터마크 + 배지 --- */
.hp-brand-section{
    position:relative;
    background:#0a0a0c;
    padding: 0px 0 0px;
    overflow:hidden;
    text-align:center;
}
.hp-brand-wm{
    font-size: clamp(54px, 11vw, 150px);
    font-weight:800;
    line-height:0.95;
    letter-spacing:.01em;
    color:#fff;
}
.hp-brand-wm span{ display:block; }
.hp-brand-wm .accent{ color: var(--accent,#e31010); }
.hp-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap: 18px;
    margin-bottom: 100px;
    padding: 0 6vw;
}
.hp-badge{
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 18px 36px;
    color:#fff;
    font-size:20px;
    font-weight:600;
    letter-spacing:.01em;
}

/* --- 유형별 벤 다이어그램 --- */
.hp-types-section{
    background:#0a0a0c;
    padding: 90px 0 140px;
    text-align:center;
}
.hp-types-section .section-head p{ color: rgba(255,255,255,.55); }
.hp-types-section h2{ color:#fff; font-size: 36px; font-weight:700; margin-bottom:10px; }
.hp-venn{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top: 100px;
    height: 260px;
}
.hp-venn-circle{
    position:relative;
    width: 330px; height:330px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#fff;
    margin: 0 -30px;
}
.hp-venn-circle b{ font-size:30px; margin-bottom:6px; }
.hp-venn-circle span{ font-size:17px; color:rgba(255,255,255,.75); letter-spacing:.03em; }
.hp-venn-circle.c1{ background: radial-gradient(circle at 35% 30%, #4fb6ff, #0d6fd8); z-index:1; }
.hp-venn-circle.c2{ background: radial-gradient(circle at 35% 30%, #1a3a63, #0a1e33); z-index:2; }
.hp-venn-circle.c3{ background: radial-gradient(circle at 35% 30%, #c7cdd6, #8b93a0); color:#12141a; z-index:1; }
.hp-venn-circle.c3 span{ color:#3a3f47; }
.hp-venn-dot{
    position:absolute;
    width:10px; height:10px;
    border-radius:50%;
    background: rgba(255,255,255,.6);
    bottom: -4px;
    z-index:3;
}



/* --- 줄 단위 마스크 리빌 타이틀 --- */
.hp-split-title .line-mask{
    overflow:hidden;
    display:block;
}
.hp-split-title .line-inner{
    display:block;
    transform: translateY(110%);
    will-change: transform;
}

/* --- 무한 스크롤 마퀴 --- */
.hp-marquee{
    position:relative;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding: 26px 0;
    background: var(--ink, #0c0c0e);
}
.hp-marquee-track{
    display:flex;
    width:max-content;
    gap: 48px;
    animation: hp-marquee-scroll 22s linear infinite;
}
.hp-marquee-track span{
    font-size: clamp(20px, 3vw, 34px);
    font-weight: 700;
    color: rgba(255,255,255,.9);
    white-space:nowrap;
    letter-spacing:-0.02em;
}
.hp-marquee-track span em{
    font-style:normal;
    color: var(--accent, #e31010);
    margin: 0 22px 0 0;
}
@keyframes hp-marquee-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
.hp-marquee:hover .hp-marquee-track{ animation-play-state: paused; }

/* --- 가로 스크롤 핀 프로세스 --- */
.hp-process-pin{
    position:relative;
    height:100vh;
    overflow:hidden;
    background: var(--ink, #0c0c0e);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.hp-process-pin .container{
    width:100%;
    max-width:none;
    padding:0 0 0 6vw;
}
.hp-process-head{
    padding: 0 0 32px 0;
    max-width: 640px;
}
.hp-process-head .eyebrow{ color: var(--accent,#e31010); }
.hp-process-head h2{
    font-size: clamp(28px, 3.4vw, 46px);
    color:#fff;
    line-height:1.25;
}
.hp-process-track{
    display:flex;
    gap: 28px;
    will-change: transform;
    padding-right: 6vw;
}
.hp-step-card{
    flex: 0 0 auto;
    width: min(70vw, 420px);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    padding: 40px 34px;
    color:#fff;
}
.hp-step-card .step-num{
    font-size: 15px;
    font-weight:700;
    color: var(--accent,#e31010);
    letter-spacing:.08em;
}
.hp-step-card h3{
    font-size: clamp(20px,2vw,26px);
    margin: 18px 0 14px;
}
.hp-step-card p{
    font-size:15px;
    line-height:1.7;
    color: rgba(255,255,255,.65);
}
.hp-progress-rail{
    position:absolute;
    left:6vw; right:6vw; bottom: 48px;
    height:2px;
    background: rgba(255,255,255,.12);
}
.hp-progress-fill{
    height:100%;
    width:0%;
    background: var(--accent,#e31010);
    transform-origin:left;
}

/* --- 스티키 스택 카드 --- */
.hp-stack-section{
    position:relative;
}
.hp-stack-head{
    padding-bottom: 8px;
}
.hp-stack-wrap{
    position:relative;
}
.stack-card{
    position:sticky;
    top: 90px;
    margin: 0 auto 24px;
    max-width: 980px; width:90%;
    min-height: 340px;
    border-radius: 22px;
    padding: 52px clamp(24px,4vw,64px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:#fff;
    box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.stack-card:nth-child(1){ background: linear-gradient(135deg,#181818,#2b2b2b); }
.stack-card:nth-child(2){ background: linear-gradient(135deg,#e31010,#a30d0d); }
.stack-card:nth-child(3){ background: linear-gradient(135deg,#181818,#2b2b2b); }
.stack-card:nth-child(4){ background: linear-gradient(135deg,#232323,#111); }
.stack-card .stack-num{
    font-size:14px; letter-spacing:.1em; font-weight:700;
    color: rgba(255,255,255,.55);
    margin-bottom: 18px;
}
.stack-card h3{
    font-size: clamp(24px,3vw,38px);
    margin-bottom: 16px;
    line-height:1.3;
}
.stack-card p{
    font-size:16px;
    line-height:1.75;
    color: rgba(255,255,255,.75);
    max-width: 560px;
}

/* --- 유형 카드 (틸트 호버) --- */
.hp-types-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.hp-type-card{
    position:relative;
    border-radius: 18px;
    padding: 36px 28px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    color:#fff;
    overflow:hidden;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
    transform-style: preserve-3d;
}
.hp-type-card:hover{
    border-color: rgba(227,16,16,.5);
}
.hp-type-card .tag{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    letter-spacing:.06em;
    color: var(--accent,#e31010);
    border:1px solid rgba(227,16,16,.4);
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 20px;
}
.hp-type-card h3{
    font-size: 22px;
    margin-bottom: 12px;
}
.hp-type-card p{
    font-size:14px;
    line-height:1.7;
    color: rgba(255,255,255,.6);
    min-height: 66px;
}
.hp-type-card .price{
    margin-top: 22px;
    font-size: 20px;
    font-weight:700;
    color:#fff;
}
.hp-type-card .price span{
    font-size:13px;
    font-weight:400;
    color: rgba(255,255,255,.5);
    margin-left:6px;
}





@media (max-width: 900px){
    .hp-price-grid{ grid-template-columns: repeat(2,1fr); }
    .hp-hero-visual{ flex-direction:column; }
    .hp-hero-media{ width:88vw; }
    .hp-service-row{ grid-template-columns:1fr; }
    .hp-service-row .hp-s-media{ order:1 !important; height:260px; }
    .hp-service-row .hp-s-text{ order:2 !important; }
    .hp-venn{ height:auto; flex-direction:column; }
    .hp-venn-circle{ margin: -25px 0; }


	    .hp-types-grid{ grid-template-columns: 1fr; }
    .stack-card{ padding: 40px 26px; min-height: 300px; }
    .hp-process-pin .container{ padding-left: 24px; }
    .hp-progress-rail{ left:24px; right:24px; }

    /* PROCESS — 모바일에서는 핀 스크롤 대신 손가락으로 드래그하는 가로 스크롤 */
    .hp-process-pin{
        height:auto;
        padding: 100px 0 70px;
    }
    .hp-process-track{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x proximity;
        cursor:grab;
        padding-bottom: 20px;
        transform:none !important;
    }
    .hp-process-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
    .hp-process-track::-webkit-scrollbar{ height:5px; }
    .hp-process-track::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:4px; }
    .hp-step-card{ scroll-snap-align:start; }
    .hp-progress-rail{ display:none; }

}

@media (max-width: 640px){
    .hp-price-grid{ grid-template-columns: repeat(1,1fr); }

  .feature-grid{

    grid-template-columns:repeat(1,1fr);
}

 

.hp-sample-row{

    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

}







 }
 
/* ---------- HERO ---------- */
.sm-hero{
    position:relative;
    background:var(--ink);
    overflow:hidden;
    padding:190px 0 120px;
}
.sm-hero-shape{
    position:absolute;
    top:150px; right:-12%;
    width:64%; height:230px;
    background:linear-gradient(120deg,#5c0c30 0%, #b81c58 55%, #e31010 100%);
    transform:skewY(-5deg) scaleX(1);
    transform-origin:right center;
    z-index:1;
    opacity:.92;
    will-change:transform;
}
.sm-hero .container{position:relative;z-index:2;}
.sm-hero .eyebrow{color:var(--teal);}
.sm-hero h1{
    font-family:var(--f-display);
    font-size:clamp(46px,7vw,96px);
    font-weight:800;
    letter-spacing:-.02em;
    color:#fff;
}
.sm-breadcrumb{
    margin-top:22px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.1em;
    color:rgba(255,255,255,.55);
    display:flex; align-items:center; gap:10px;
}
.sm-breadcrumb a{color:rgba(255,255,255,.8);}
.sm-breadcrumb a:hover{color:var(--teal);}

/* ---------- BANNER (ONLINE SHOP) ---------- */
.sm-banner{
    position:relative;
    background:var(--ink);
    padding:20px 0 150px;
    overflow:hidden;
}
.sm-banner .container{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:70px;
    align-items:center;
}
.sm-banner-media{
    position:relative;
    border-radius:12px;
    overflow:hidden;
    aspect-ratio:16/11;
    background:
        radial-gradient(circle at 15% 20%, rgba(255,120,190,.55), transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(255,60,120,.35), transparent 50%),
        linear-gradient(135deg,#4a1fb8 0%, #8b2fd1 45%, #c23bd6 75%, #ff5f8e 100%);
}
.sm-banner-media img{
    position:absolute; inset:0;
    width:100%; height:100%; object-fit:cover;
    mix-blend-mode:luminosity;
    opacity:.5;
}
.sm-banner-media .deco{
    position:absolute;
    border-radius:30%;
    background:rgba(255,255,255,.14);
    filter:blur(2px);
}
.sm-banner-media .deco.d1{width:120px;height:120px;top:8%;left:6%;transform:rotate(18deg);}
.sm-banner-media .deco.d2{width:70px;height:70px;bottom:14%;right:10%;border-radius:50%;background:rgba(255,255,255,.22);}
.sm-banner-media .deco.d3{width:44px;height:44px;top:44%;right:20%;background:rgba(255,255,255,.18);border-radius:50%;}

.sm-banner-copy{color:#fff;}
.sm-banner-copy .eyebrow-thin{
    display:block;
    font-size:15px;
    font-weight:300;
    letter-spacing:.15em;
    color:rgba(255,255,255,.7);
    text-transform:uppercase;
    margin-bottom:6px;
}
.sm-banner-copy h2{
    font-family:var(--f-display);
    font-size:clamp(42px,5.4vw,68px);
    font-weight:800;
    line-height:1.02;
}
.sm-banner-copy p{
    margin-top:28px;
    font-size:18px;
    line-height:1.85;
    color:rgba(255,255,255,.68);
    max-width:400px;
}
.sm-accent-bar{
    width:56px; height:8px;
    background:var(--teal);
    margin-top:38px;
    transform-origin:left;
}

/* ---------- INFO + BADGES ---------- */
.sm-info{
    background:var(--ink);
    padding:130px 0 130px;
    text-align:center;
    color:#fff;
}
.sm-info-logo{
    font-weight:800;
    font-size:14px;
    letter-spacing:.2em;
    color:rgba(255,255,255,.4);
    margin-bottom:26px;
}
.sm-info h3{
    font-family:var(--f-display);
    font-size:clamp(22px,2.6vw,32px);
    font-weight:700;
    line-height:1.7;
}
.sm-info p.sub{
    margin-top:20px;
    color:rgba(255,255,255,.5);
    font-size:15px;
}
.sm-badge-grid{
    margin-top:64px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}
.sm-badge{
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:44px 22px 36px;
    transition:transform .4s ease, border-color .3s ease, background .3s ease;
}
.sm-badge:hover{
    transform:translateY(-10px);
    border-color:rgba(227,16,16,.5);
    background:rgba(227,16,16,.08);
}
.sm-badge .icon{
    width:46px; height:46px;
    margin:0 auto 22px;
    color:var(--teal);
    transition:transform .4s ease;
}
.sm-badge:hover .icon{transform:scale(1.15) rotate(-6deg);}
.sm-badge p{
    font-size:16px;
    font-weight:600;
    line-height:1.55;
    color:#fff;
}

 /* ---------- PROCESS (arrows) ---------- */
.sm-process{
    background:#0a0a0c;
    padding:130px 0 130px;
    text-align:center;
}
.sm-process-title{
    font-family:var(--f-display);
    font-size:clamp(30px,3.6vw,46px);
    color:#fff;
    font-weight:800;
}
.sm-process-title em{color:var(--teal);font-style:normal;}
.sm-arrow-row{
    display:flex;
    justify-content:center;
    margin:60px auto 60px;
    max-width:1400px;
    padding:0 6vw;
}
.sm-arrow{
    flex:1;
    position:relative;
    height:150px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    clip-path:polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%, 16% 50%);
    margin-left:-34px;
    opacity:0;
    transform:translateX(-40px);
}
.sm-arrow:first-child{
    clip-path:polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
    margin-left:0;
}
.sm-arrow .icon-wrap{
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
}
.sm-arrow .icon-wrap svg{width:100%;height:100%;}
.sm-arrow .step-label{
    color:#fff;
    font-weight:800;
    font-size:16px;
    letter-spacing:.05em;
}
.sm-arrow.c1{background:linear-gradient(120deg,#7bc142,#a9d84c);}
.sm-arrow.c2{background:linear-gradient(120deg,#2fb88a,#3fd0a3);}
.sm-arrow.c3{background:linear-gradient(120deg,#28b8d8,#4fd4ee);}
.sm-arrow.c4{background:linear-gradient(120deg,#2a6fe0,#3b8bff);}

.sm-step-info{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
    max-width:1400px;
    margin:0 auto;
    padding:0 6vw;
}
.sm-step-info div{color:rgba(255,255,255,.65);}
.sm-step-info h4{
    color:#fff;
    font-size:24px;
    font-weight:700;
    margin-bottom:14px;
}
.sm-step-info p{
    font-size:17px;
    line-height:1.8;
}

/* ---------- SAMPLE GALLERY ---------- */
.sm-sample{
    background:#0a0a0c;
    padding:20px 0 170px;
    text-align:center;
}
.sm-sample-title{
    font-family:var(--f-display);
    font-size:clamp(30px,3.6vw,46px);
    color:#fff;
    font-weight:800;
    margin-bottom:66px;
}
.sm-sample-title em{color:var(--teal);font-style:normal;}
.sm-sample-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    max-width:1440px;
    margin:0 auto;
    padding:0 6vw;
}
.sm-sample-col{display:flex;flex-direction:column;gap:18px;}
.sm-sample-col:nth-child(2){transform:translateY(40px);}
.sm-sample-col:nth-child(4){transform:translateY(-24px);}
.sm-sample-item{
    position:relative;
    border-radius:10px;
    overflow:hidden;
    aspect-ratio:3/4;
    cursor:pointer;
}
.sm-sample-item img{
    width:100%; height:100%; object-fit:cover;		object-position: center top;
    filter:grayscale(.25) brightness(.9);
    transition:transform .7s ease, filter .5s ease;
}
.sm-sample-item::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,12,0) 55%, rgba(10,10,12,.85) 100%);
    opacity:0;
    transition:opacity .4s ease;
}
.sm-sample-item .tag{
    position:absolute; left:16px; bottom:14px;
    color:#fff; font-size:12px; font-weight:700;
    letter-spacing:.05em;
    opacity:0; transform:translateY(8px);
    transition:.35s ease;
    z-index:2;
}
.sm-sample-item:hover img{transform:scale(1.1);filter:grayscale(0) brightness(1);}
.sm-sample-item:hover::after{opacity:1;}
.sm-sample-item:hover .tag{opacity:1;transform:translateY(0);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
    .sm-banner .container{grid-template-columns:1fr;gap:40px;}
    .sm-badge-grid{grid-template-columns:repeat(2,1fr);}
    .sm-price-grid{grid-template-columns:1fr;max-width:460px;}
    .sm-step-info{grid-template-columns:repeat(2,1fr);gap:34px;text-align:left;}
    .sm-arrow-row{flex-wrap:wrap;}
    .sm-sample-grid{grid-template-columns:repeat(2,1fr);}
    .sm-sample-col:nth-child(2),
    .sm-sample-col:nth-child(4){transform:none;}
    .sm-hero-shape{width:90%;right:-20%;}
}
@media (max-width:640px){
    .sm-badge-grid{grid-template-columns:1fr;}
    .sm-step-info{grid-template-columns:1fr;}
    .sm-sample-grid{grid-template-columns:1fr;}
}



/* ==========================================================
   ETC PAGE — bright theme, page-scoped styles (etc- prefix)
========================================================== */

.etc-page{ background:var(--paper-deep); }

/* ---- section head : dash + label ---- */
.etc-head{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:18px;
}
.etc-head .dash{
    width:44px; height:2px;
    background:var(--teal-deep);
    transform-origin:left;
}
.etc-head h2{
    font-family:var(--f-display);
    font-size:clamp(24px,2.6vw,32px);
    font-weight:700;
    color:var(--ink);
    letter-spacing:-.01em;
    display:flex;
}
.etc-head h2 .ch{ display:inline-block; }
.etc-desc{
    font-size:17px;
    color:var(--slate);
    margin-bottom:44px;
}
.etc-desc::before{ content:"- "; }

/* ---- generic reveal image wrap (curtain clip-path) ---- */
.etc-reveal{ position:relative; overflow:hidden; border-radius:8px; }
.etc-reveal img{
    width:100%; height:100%; object-fit:cover; display:block;
    transform:scale(1.12);
    transition:transform .8s ease;
}
.etc-reveal:hover img{ transform:scale(1.0); }
.etc-reveal .curtain{
    position:absolute; inset:0;
    background:var(--ink);
    transform-origin:right;
    z-index:2;
}

/* ---- CI·BI ---- */
.etc-cibi{ padding:0px 0 90px; }
.etc-cibi-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px;
    margin-bottom:90px;
}
.etc-cibi-grid .etc-reveal{ aspect-ratio:16/10; box-shadow:0 20px 46px rgba(18,21,26,.1); }

.etc-logo-title{
    text-align:center;
    font-family:var(--f-display);
    font-size:32px;
    font-weight:700;
    color:var(--ink);
    margin-bottom:36px;
}
.etc-logo-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
}
.etc-logo-card{
    position:relative;
    aspect-ratio:1/1;
    border-radius:8px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 26px rgba(18,21,26,.08);
    cursor:pointer;
}
.etc-logo-card img{
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(1) contrast(1.02);
    transition:filter .5s ease, transform .5s ease;
}
.etc-logo-card:hover img{ filter:grayscale(0); transform:scale(1.06) rotate(-1deg); }

/* ---- 명함디자인 (full bleed split) ---- */
.etc-card-section{ padding:0 0 100px; }
.etc-card-banner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 26px 60px rgba(18,21,26,.12);
}
.etc-card-banner .etc-reveal{ aspect-ratio:16/12; border-radius:0; }


/* ---- VIDEO PRODUCTION (dark island) ---- */
/* ---- VIDEO PRODUCTION (dark island) ---- */
.etc-video{
    background:var(--ink);
    border-radius:20px;
    padding:100px clamp(20px,5vw,70px) 100px;
    margin:0 6vw 130px;
    text-align:center;
    position:relative;
    overflow:hidden;
}
.etc-video-title{
    font-family:var(--f-display);
    font-weight:800;
    line-height:1.05;
    color:#fff;
    font-size:clamp(30px,4vw,54px);
    margin-bottom:50px;
}
.etc-video-title span{ display:block; }
.etc-video-title span:last-child{ color:var(--teal); }
.etc-video-desc{
    font-size:15px;
    color:rgba(255,255,255,.55);
    max-width:520px;
    margin:0 auto 56px;
}
.etc-video-desc::before{ content:"- "; }

/* carousel viewport / track — smooth continuous sliding */
.etc-carousel-viewport{
    position:relative;
    max-width:1300px;
    margin:0 auto 44px;
    overflow:hidden;
    padding:34px 0;
}
.etc-carousel-track{
    display:flex;
    align-items:center;
    gap:26px;
    will-change:transform;
}
.etc-vcard{
    position:relative;
    flex:0 0 420px;
    width:420px;
    aspect-ratio:4/3;
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    transform:scale(.82);
    opacity:.5;
    box-shadow:0 10px 24px rgba(0,0,0,0);
    will-change:transform, opacity;
}
.etc-vcard.active{
    box-shadow:0 30px 70px rgba(0,0,0,0);
}
.etc-vcard img{
    width:100%; height:100%; object-fit:cover;
    filter:brightness(.6);
    transition:filter .4s ease;
}
.etc-vcard.active img{ filter:brightness(.72); }
.etc-vcard .play{
    position:absolute; left:50%; top:50%;
    width:56px; height:56px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.5);
    display:flex; align-items:center; justify-content:center;
    z-index:2;
    backdrop-filter:blur(2px);
}
.etc-vcard .play svg{ width:17px; height:17px; fill:#fff; margin-left:2px; }
.etc-vcard .cap{
    position:absolute; left:20px; right:20px; bottom:18px;
    z-index:2; color:#fff; font-size:17px; font-weight:700;
    line-height:1.5; text-align:left;
}
.etc-vcard::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,10,12,0) 45%, rgba(10,10,12,.75) 100%);
    z-index:1;
}
.etc-vnav{
    display:flex; justify-content:center; gap:14px;
}
.etc-vnav button{
    width:46px; height:46px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    background:transparent;
    color:#fff;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:.3s;
}
.etc-vnav button:hover{ background:var(--teal); border-color:var(--teal); }
.etc-vnav svg{ width:18px; height:18px; }

/* ---- VIDEO LIGHTBOX LAYER ---- */
.etc-lightbox{
    position:fixed; inset:0;
    background:rgba(6,7,9,.92);
    z-index:10000;
    display:flex; align-items:center; justify-content:center;
    padding:24px;
    opacity:0;
    pointer-events:none;
    transition:opacity .35s ease;
}
.etc-lightbox.show{ opacity:1; pointer-events:auto;visibility:visible; }
.etc-lightbox-inner{
    position:relative;
    width:min(920px,92vw);
}
.etc-lightbox-frame{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    border-radius:14px;
    overflow:hidden;
    background:#000;
    box-shadow:0 50px 100px rgba(0,0,0,.55);
}
.etc-lightbox-frame iframe{
    position:absolute; inset:0;
    width:100%; height:100%;
    border:0;
}
.etc-lightbox-cap{
    margin-top:16px;
    text-align:center;
    color:rgba(255,255,255,.7);
    font-size:14px;
    letter-spacing:.02em;
}
.etc-lightbox-close{
    position:absolute;
    top:-48px; right:0;
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:.3s;
}
.etc-lightbox-close:hover{ background:var(--teal); border-color:var(--teal); }

/* ---- 그래픽 디자인 ---- */
.etc-graphic{ padding:0 0 110px; }
.etc-graphic-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}
.etc-graphic-grid .etc-reveal{ aspect-ratio:4/4; box-shadow:0 0px 0px rgba(18,21,26,.1); background:#fff; }
.etc-graphic-grid .etc-reveal img{ object-fit:contain; padding:0; background:#fff; }
.etc-graphic-grid .etc-reveal:nth-child(3) img{ } /* object-fit:cover; */

/* ---- 블로그 / SNS 디자인 ---- */
.etc-blog{ padding:0 0 170px; }
.etc-blog-wrap{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:60px;
    align-items:center;
}
.etc-blog-copy h3{
    font-family:var(--f-display);
    font-size:clamp(28px,3.4vw,40px);
    font-weight:800;
    color:var(--ink);
    line-height:1.35;
    margin-top:10px;
}
.etc-blog-media{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    aspect-ratio:16/10;
    box-shadow:0 30px 60px rgba(18,21,26,.14);
}
.etc-blog-media img{ width:100%; height:100%; object-fit:cover; }
.etc-bubble{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.05) 70%);
    pointer-events:none;
    z-index:2;
}

@media (max-width:1024px){
    .etc-cibi-grid{ grid-template-columns:1fr; }
    .etc-logo-grid{ grid-template-columns:repeat(3,1fr); }
    .etc-card-banner{ grid-template-columns:1fr; }
    .etc-graphic-grid{ grid-template-columns:1fr; }
    .etc-blog-wrap{ grid-template-columns:1fr; }
    .etc-vcard{ width:240px; }
}
@media (max-width:640px){
    .etc-logo-grid{ grid-template-columns:repeat(2,1fr); }
    .etc-carousel{ gap:12px; }
    .etc-vcard{ width:180px; }
}







/* ============================================
   PORTFOLIO 서브페이지 전용 스타일
   공통 클래스(container, footer 등)는 style.css 를
   그대로 사용하고 이 페이지 전용 신규 컴포넌트만
   여기에 정의합니다. 모던하고 미니멀한 3열 그리드.
   ============================================ */

.pf-hero{
    background:#0a0a0c;
    padding: 150px 0 50px;
}
.pf-hero h1{
    font-size: clamp(38px, 5.6vw, 64px);
    color:#fff;
    font-weight:800;
}

/* --- 필터 칩 --- */
.pf-filter-bar{
    background:#0a0a0c;
    padding: 0 0 60px;
    position: sticky;
    top: 0;
    z-index: 30;
}
.pf-filter-inner{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    padding: 18px 6vw 18px;
    background: rgba(10,10,12,.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.pf-chip{
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.65);
    font-size: 13.5px;
    letter-spacing:.02em;
    padding: 9px 20px;
    border-radius: 999px;
    cursor:pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
    white-space:nowrap;
}
.pf-chip:hover{ border-color: rgba(255,255,255,.4); color:#fff; }
.pf-chip.active{
    background: var(--accent,#e31010);
    border-color: var(--accent,#e31010);
    color:#fff;
}

/* --- 그리드 --- */
.pf-grid-section{
    background:#fff;
    padding: 140px 0 140px;
}
.pf-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 26px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 6vw;
}
.pf-item{
    opacity:0;
    cursor: pointer;
}
.pf-media{
    position:relative;
    aspect-ratio: 1 / 1;
    overflow:hidden;
    border-radius: 17px;
    background:#fff;
    margin-bottom: 16px;
}
.pf-media img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.001);
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.pf-item:hover .pf-media img{ transform: scale(1.08); }
.pf-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
    opacity:0;
    transition: opacity .4s ease;
}
.pf-item:hover .pf-overlay{ opacity:1; }
.pf-view{
    position:absolute;
    top: 16px; right: 16px;
    width: 38px; height: 38px;
    border-radius:50%;
    background: rgba(255,255,255,.92);
    color:#111;
    display:flex; align-items:center; justify-content:center;
    transform: scale(.5) rotate(-30deg);
    opacity:0;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.pf-item:hover .pf-view{ transform: scale(1) rotate(0deg); opacity:1; }
.pf-view svg{ width:16px; height:16px; }

.pf-cat{
    font-size: 16px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: rgba(0,0,0,.42);
    margin-bottom: 6px;
}
.pf-title{
    font-size: 19px;
    font-weight:700;
    color:#000;
    line-height:1.4;
}

@media (max-width: 980px){
    .pf-grid{ grid-template-columns: repeat(2, 1fr); gap: 26px 18px; }
}
@media (max-width: 560px){
  /*  .pf-grid{ grid-template-columns: 1fr; }	   */
    .pf-filter-inner{ overflow-x:auto; flex-wrap:nowrap; }
}








/* --- WHEN 섹션 (이럴때 디자인마음) --- */
.mn-when-section{
    background:#0a0a0c;
    padding: 120px 0 120px;
    text-align:center;
}
.mn-when-title{
    font-size: clamp(26px,3vw,38px);
    color:#fff;
    font-weight:800;
    margin-bottom: 70px;
}
.mn-when-title .hl{ color:#f5d400; }
.mn-hex-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6vw;
}
.mn-hex-item{ color:#fff; }
.mn-hex-item svg{
    width: 92px; height:92px;
    margin: 0 auto 22px;
    display:block;
}
.mn-hex-item p{
    font-size:19px;
    line-height:1.7;
    color: rgba(255,255,255,.75);
}
.mn-hex-item .draw{
    fill:none;
    stroke:#fff;
    stroke-width:1.6;
}

/* --- 장기유지보수 표 --- */
.mn-table-section{
    background:#0a0a0c;
    padding: 20px 0 120px;
}
.mn-table-title{
    text-align:center;
    font-size: clamp(26px,3vw,38px);
    color:#fff; font-weight:800;
    margin-bottom: 46px;
}
.mn-table-wrap{
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6vw;
    overflow-x:auto;
}
table.mn-table{
    width:100%;
    border-collapse: collapse;
    min-width: 720px;
}
.mn-table thead th{
    background: rgba(255,255,255,.08);
    color:#fff;
    font-size:17px;
    font-weight:700;
    padding: 18px 16px;
    text-align:center;
}
.mn-table thead th:first-child{ border-radius: 8px 0 0 0; }
.mn-table thead th:last-child{ border-radius: 0 8px 0 0; }
.mn-table tbody td{
    text-align:center;
    padding: 16px;
    font-size:17px;
    color: rgba(255,255,255,.78);
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .25s ease, color .25s ease;
}
.mn-table tbody td:first-child{
    color:#fff;
    font-weight:600;
    text-align:left;
    padding-left: 22px;
}
.mn-table tbody tr:hover td{
    background: rgba(227,16,16,.08);
}
.mn-table tbody td.x-mark{ color: rgba(255,255,255,.28); }
.mn-table tbody tr.mn-fee-row td{ font-weight:800; color:#fff; font-size:16px; }

/* --- CONTACT 섹션 --- */
.mn-contact-section{
    background:#fff;
    padding: 100px 0 100px;
}
.mn-contact-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 6vw;
    align-items:center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 6vw;
}
.mn-contact-media{
    position:relative;
    border-radius: 10px;
    overflow:hidden;
}
.mn-contact-media img{
    width:100%; display:block;
    filter: brightness(.75);
}
.mn-mail-badge{
    position:absolute;
    width: 58px; height:58px;
    border-radius: 12px;
    background: rgba(255,255,255,.9);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 12px 26px rgba(0,0,0,.3);
}
.mn-mail-badge svg{ width:28px; height:28px; color:#333; }
.mn-mail-badge .count{
    position:absolute;
    top:-8px; right:-8px;
    width:20px; height:20px;
    border-radius:50%;
    background: var(--accent,#e31010);
    color:#fff;
    font-size:11px;
    font-weight:800;
    display:flex; align-items:center; justify-content:center;
}
.mn-mail-badge.b1{ top: 28%; left: 12%; }
.mn-mail-badge.b2{ top: 46%; left: 30%; width:76px; height:76px; }
.mn-mail-badge.b3{ top: 60%; left: 46%; width:52px; height:52px; opacity:.85; }

.mn-contact-copy{ color:#000; }
.mn-contact-copy h2{
    display:block;
    font-size:26px;
    color: #000;
    margin-bottom: 12px;
}
.mn-email{
    position:relative;
    display:inline-block;
    font-size: clamp(26px,3.4vw,40px);
    font-weight:800;
    cursor:pointer;
    margin-bottom: 22px;
}
.mn-email .copy-flag{
    position:absolute;
    left:0; top:-30px;
    font-size:12.5px;
    font-weight:600;
    color: var(--accent,#e31010);
    opacity:0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events:none;
}
.mn-email.copied .copy-flag{ opacity:1; transform: translateY(0); }
.mn-underline{
    width:46px; height:6px;
    background:#ff0000;
    margin-bottom: 30px;
    transform-origin:left;
    transform: scaleX(0);
}
.mn-check-list{ list-style:none; padding:0; margin:0; }
.mn-check-list li{
    display:flex;
    gap: 10px;
    align-items:flex-start;
    font-size:17px;
    line-height:1.8;
    color: #000;
    margin-bottom: 16px;
}
.mn-check-list li svg{
    flex:0 0 auto;
    width:16px; height:16px;
    margin-top:5px;
    color: var(--accent,#e31010);
}

@media (max-width: 900px){
    .mn-hero-grid{ grid-template-columns:1fr; }
    .mn-hex-grid{ grid-template-columns: repeat(2,1fr); }
    .mn-contact-grid{ grid-template-columns:1fr; }
    .mn-contact-media{ height:280px; }
}

@media (max-width: 640px){
table.mn-table{
    width:100%;
    border-collapse: collapse;
    min-width: 300px;		  	 overflow-x:hidden;
}
.mn-table thead th{
    background: rgba(255,255,255,.08);
    color:#fff;
    font-size:15px;
    font-weight:700;
    padding: 18px 5px;
    text-align:center;
}
.mn-table tbody td{
    text-align:center;
    padding: 16px 5px;
    font-size:15px;
    color: rgba(255,255,255,.78);
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .25s ease, color .25s ease;
}
}


/* ---------- MOBILE QUICK BAR (홈 + TOP, 모바일 전용) ---------- */
.mobile-quickbar{
    display:none;               /* 데스크탑에선 숨김 */
    position:fixed;
    left:50%;
    bottom:32px;
    transform:translateX(-50%);
    z-index:9999;
    align-items:center;
    gap:2px;
    padding:10px;	 /*  padding:610px;*/
    background:rgba(10,10,12,.92);   /* 불투명 다크 */
    border-radius:999px;
    box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.mqb-btn{
    width:44px;height:44px;
    border-radius:50%;
    background:transparent;
    border:none;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:background .25s ease;
}
.mqb-btn:active{ background:rgba(255,255,255,.12); }
.mqb-btn svg{ width:26px; height:26px; }	/*width:19px; height:19px;*/
.mqb-divider{
    width:1px;
    height:20px;
    background:rgba(255,255,255,.18);
}

@media (max-width:640px){
    .mobile-quickbar{ display:flex; }
    .top-btn{ display:none; }   /* 기존 top-btn과 중복되므로 모바일에서 숨김 */
}



/* 햄버거(3줄) 버튼 — 기존 nav-toggle과 같은 형태로 */
.mqb-menu{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
}
.mqb-menu span{
    display:block;
    width:18px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:.3s ease;
}
/* 메뉴가 열려 있을 때 X자로 변신 (navToggle.active와 동일한 연출) */
.mqb-menu.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mqb-menu.active span:nth-child(2){ opacity:0; }
.mqb-menu.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }






/* ==========================================================
   CONTACT CTA (다음 프로젝트, 디자인마음과 함께하세요)
========================================================== */
.dm-contact{ background:#0a0a0c; padding:150px 0 150px; }
.dm-contact-wrap{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:70px;
    align-items:start;
}
.dm-contact-left .eyebrow{ color:var(--teal); }
.dm-contact-left h2{
    font-family:var(--f-display);
    font-size:clamp(32px,4.4vw,54px);
    font-weight:800;
    line-height:1.35;
    display:inline;
    color:#fff;
    /*background-color:#3a0c0c;		  */
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    padding:4px 12px;
    margin:22px 0 30px;
}
.dm-contact-desc{
    font-size:17px;
    line-height:1.85;
    color:rgba(255,255,255,.55);
    max-width:480px;
    margin-top:30px;
}
.dm-contact-btns{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-top:38px;
}
.dm-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:56px;
    padding:0 32px;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    transition:.3s ease;
}
.dm-btn-fill{ background:var(--teal); color:#fff; }
.dm-btn-fill:hover{ background:#ff2c2c; }
.dm-btn-outline{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
}
.dm-btn-outline:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.dm-contact-card{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.09);
    border-radius:16px;
    padding:36px 38px;
}
.dm-info-row{
    display:flex;
    gap:16px;
    align-items:flex-start;
    padding:14px 0;
}
.dm-info-icon{
    flex:0 0 auto;
    width:38px; height:38px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center;
    color:#fff;
}
.dm-info-icon svg{ width:17px; height:17px; }
.dm-info-label{
    display:block;
    font-size:12px;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    margin-bottom:4px;
}
.dm-info-value{
    display:block;
    font-size:16px;
    font-weight:600;
    color:#fff;
    line-height:1.5;
}
.dm-contact-divider{
    height:1px;
    background:rgba(255,255,255,.1);
    margin:24px 0 24px;
}
.dm-social-row{
    display:flex;
    gap:10px;
}
.dm-social-btn{
    flex:1;
    text-align:center;
    padding:13px 0;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:.3s ease;
}
.dm-social-btn:hover{ background:var(--teal); border-color:var(--teal); }

@media (max-width:1024px){
    .dm-contact{ padding:110px 0; }
    .dm-contact-wrap{ grid-template-columns:1fr; gap:50px; }
}
@media (max-width:640px){
    .dm-contact-left h2{ padding:3px 8px; margin:18px 0 24px; }
    .dm-contact-btns{ flex-direction:column; }
    .dm-btn{ width:100%; }
    .dm-contact-card{ padding:28px 26px; }
}






/* ==========================================================
   NAV QUICK LINKS — 모바일 슬라이드 메뉴 하단 (전화/카카오톡/블로그)
========================================================== */
.nav-quick-links{
    display:none;   /* 데스크탑 가로 메뉴에는 표시 안 함 */
}

@media (max-width:1024px){
    .nav-quick-links{
        display:flex;
        width:100%;
        gap:12px;
        margin-top:10px;
        padding-top:10px;	margin-bottom:30px;
       
    }
    .nav-quick-btn{
        flex:1;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:8px;
        padding:16px 4px 14px;
        border-radius:14px;
        background:rgba(255,255,255,.05);
        border-bottom:none !important;   /* 기존 nav a 밑줄 스타일 제거 */
        transition:background .25s ease, transform .25s ease;
    }
    .nav-quick-btn:hover{
        background:rgba(227,16,16,.18);
        transform:translateY(-2px);
    }
    .nav-quick-btn::after{ display:none; }  /* 기존 nav a 밑줄 애니메이션 제거 */

    .nav-quick-icon{
        width:44px; height:44px;
        border-radius:50%;
        background:rgba(255,255,255,.08);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        transition:.25s ease;
    }
    .nav-quick-icon svg{ width:19px; height:19px; }
    .nav-quick-kakao .nav-quick-icon{
        background:#FEE500;
        color:#191600;
    }
    .nav-quick-label{
        font-size:11.5px;
        font-weight:600;
        letter-spacing:0;
        color:rgba(255,255,255,.72);
    }
}





/* ==========================================================
   FAQ SECTION
========================================================== */
.dm-faq{ background:#0a0a0c; }
.dm-faq .section-head h2{ color:#fff; }
.dm-faq .section-head p{ color:rgba(255,255,255,.55); }

.dm-faq-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 60px; /* 세로 16px, 가로 60px 간격 */
}
.dm-faq-item{
    border-bottom:1px solid rgba(255,255,255,.12);
}
/*
.dm-faq-item:first-child{ border-top:1px solid rgba(255,255,255,.12); }
  */
.dm-faq-q{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:none;
    border:none;
    padding:28px 6px;
    cursor:pointer;
    text-align:left;
    color:#fff;
    font-size:19px;
    font-weight:600;
}
.dm-faq-plus{
    flex:0 0 auto;
    font-size:24px;
    font-weight:300;
    color:var(--teal);
    transition:transform .3s ease;
}
.dm-faq-item.open .dm-faq-plus{ transform:rotate(45deg); }

.dm-faq-a{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .35s ease, opacity .35s ease, margin .35s ease;
    padding:0 6px;
}
.dm-faq-item.open .dm-faq-a{
    max-height:200px;
    opacity:1;
    margin-bottom:26px;
}
.dm-faq-a p{
    font-size:16px;
    line-height:1.8;
    color:rgba(255,255,255,.62);
    max-width:760px;
}
 @media (max-width: 768px) {
 .dm-faq-list {
 margin-top:-40px;
        grid-template-columns: 1fr;
        gap: 16px 0;
    }
}
@media (max-width:640px){
    .dm-faq-q{ font-size:17px; padding:15px 4px; }
    .dm-faq-a p{ font-size:15px; }
}



/* ==========================================================
   AI SEO/GEO CTA — 어두운 배경 + 그라데이션 (AI 느낌)
========================================================== */
.ai-seo-cta{
    position:relative;
    background:#0a0a0c;
    overflow:hidden;
    padding:150px 0;
    text-align:center;
}
.ai-seo-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    opacity:.45;
    pointer-events:none;
    z-index:0;
}
.ai-seo-glow.g1{
    width:560px;height:560px;
    top:-180px;left:-140px;
    background:radial-gradient(circle, #35c6ff, transparent 70%);
}
.ai-seo-glow.g2{
    width:520px;height:520px;
    bottom:-200px;right:-120px;
    background:radial-gradient(circle, #e14bd0, transparent 70%);
}
.ai-seo-glow.g3{
    width:340px;height:340px;
    top:40%;left:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle, #6f7bff, transparent 70%);
    opacity:.3;
}
.ai-seo-inner{
    position:relative;
    z-index:2;
    max-width:720px;
    margin:0 auto;
}
.ai-seo-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    font-size:12px;
    letter-spacing:.28em;
    text-transform:uppercase;
    color:#9fb4ff;
    margin-bottom:26px;
}
.ai-seo-eyebrow::before{
    content:"";
    width:8px;height:8px;
    border-radius:50%;
    background:linear-gradient(100deg,#35c6ff,#e14bd0);
    display:inline-block;
}
.ai-seo-inner h2{
    font-family:var(--f-display);
    font-size:clamp(30px,4.2vw,50px);
    font-weight:800;
    line-height:1.42;
    color:#fff;
    margin-bottom:28px;
    letter-spacing:-.01em;
}
.ai-seo-grad{
    background:linear-gradient(100deg, #35c6ff 0%, #6f7bff 35%, #e14bd0 65%, #ff5f8e 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
.ai-seo-inner p{
    font-size:17px;
    line-height:1.9;
    color:rgba(255,255,255,.6);
    margin-bottom:42px;
}
.ai-seo-inner .dm-btn{ display:inline-flex; }
 
@media (max-width:640px){
    .ai-seo-cta{ padding:110px 0; }
    .ai-seo-inner p{ font-size:15.5px; }
}