@charset "utf-8";

:root{
    --red:#CE181E;
    --red-d:#a81217;
    --ink:#231F20;
    --ink-2:#4a4547;
    --ink-3:#7a7476;
    --line:#e6e3e4;
    --bg:#ffffff;
    --bg-2:#f6f5f5;
    --dark:#17141a;
    --dark-2:#221e25;
    --dark-line:rgba(255,255,255,0.1);
    --font-kr:'Noto Sans KR', '맑은 고딕', dotum, sans-serif;
    --font-en:'Montserrat', 'Noto Sans KR', '맑은 고딕', dotum, sans-serif;
    --hd-h:84px;
    --radius:14px;
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--ink); font-family:var(--font-kr); font-size:16px; line-height:1.6; letter-spacing:-0.02em; word-break:keep-all;}
li{list-style:none;}
a{color:inherit; text-decoration:none;}
button{background:none; border:0; cursor:pointer; font:inherit; color:inherit;}
img{max-width:100%; vertical-align:middle;}
.inner{width:calc(100% - 64px); max-width:1280px; margin:0 auto;}
.en{font-family:var(--font-en);}
.ext:after{content:'↗'; display:inline-block; margin-left:6px; font-family:var(--font-en); font-weight:600; transition:transform 0.2s;}
a:hover .ext:after, a.ext:hover:after{transform:translate(2px, -2px);}

/* ───── HEADER ───── */
.hd{position:sticky; top:0; z-index:100; height:var(--hd-h); background:rgba(255,255,255,0.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.hd .inner{display:flex; align-items:center; height:100%; gap:32px;}
.logo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
.logo img{height:30px; width:auto;}
.logo .tag{font-family:var(--font-en); font-size:11px; font-weight:700; letter-spacing:0.12em; color:var(--ink-3); border-left:1px solid var(--line); padding-left:12px; line-height:1.2;}
.logo .tag b{display:block; color:var(--ink); font-size:13px; letter-spacing:0.02em;}

.gnb{display:flex; align-items:center; margin-left:auto; gap:28px; height:100%;}
.gnb > ul{display:flex; height:100%;}
.gnb > ul > li{position:relative; height:100%;}
.gnb-btn{display:flex; align-items:center; gap:7px; height:100%; padding:0 18px; font-family:var(--font-en); font-size:17px; font-weight:600; color:var(--ink); transition:color 0.2s;}
.gnb-btn:after{content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform 0.2s;}
.gnb > ul > li.current .gnb-btn{color:var(--red);}
.gnb > ul > li.current .gnb-btn:before{content:''; position:absolute; left:18px; right:18px; bottom:-1px; height:2px; background:var(--red);}
.sub{position:absolute; top:calc(100% - 8px); left:50%; transform:translate(-50%, 6px); min-width:190px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(35,31,32,0.12); opacity:0; visibility:hidden; transition:all 0.2s;}
.sub a{display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:8px; font-size:15px; font-weight:500; color:var(--ink-2); transition:all 0.15s;}
.sub a:hover{background:var(--bg-2); color:var(--red);}
.gnb > ul > li.open .sub{opacity:1; visibility:visible; transform:translate(-50%, 0);}
.gnb > ul > li.open .gnb-btn{color:var(--red);}
.gnb > ul > li.open .gnb-btn:after{transform:translateY(2px) rotate(-135deg);}
@media (hover:hover) and (min-width:1025px){
    .gnb > ul > li:hover .sub{opacity:1; visibility:visible; transform:translate(-50%, 0);}
    .gnb > ul > li:hover .gnb-btn{color:var(--red);}
    .gnb > ul > li:hover .gnb-btn:after{transform:translateY(2px) rotate(-135deg);}
}
.ai-btn{display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:999px; background:var(--ink); color:#fff; font-family:var(--font-en); font-size:15px; font-weight:600; white-space:nowrap; transition:background 0.2s;}
.ai-btn:hover{background:var(--red);}
.ai-btn .dot{width:7px; height:7px; border-radius:50%; background:#22d3ee; margin-right:9px; box-shadow:0 0 0 3px rgba(34,211,238,0.25);}

.menu-btn{display:none; position:relative; width:40px; height:40px; margin-left:auto;}
.menu-btn span, .menu-btn:before, .menu-btn:after{position:absolute; left:9px; right:9px; height:2px; background:var(--ink); content:''; transition:all 0.25s;}
.menu-btn:before{top:13px;} .menu-btn span{top:19px;} .menu-btn:after{top:25px;}
.hd.nav-open .menu-btn:before{top:19px; transform:rotate(45deg);}
.hd.nav-open .menu-btn:after{top:19px; transform:rotate(-45deg);}
.hd.nav-open .menu-btn span{opacity:0;}

/* ───── COMMON BLOCKS ───── */
.sec{padding:110px 0;}
.sec.gray{background:var(--bg-2);}
.sec.dark{background:var(--dark); color:#fff;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:48px;}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--red);}
.eyebrow:before{content:''; width:8px; height:8px; border-radius:50%; background:currentColor;}
.sec-title{margin-top:14px; font-size:38px; font-weight:700; line-height:1.35; letter-spacing:-0.04em;}
.sec-desc{margin-top:14px; font-size:17px; color:var(--ink-3); max-width:640px;}
.sec.dark .sec-desc{color:rgba(255,255,255,0.6);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 26px; border-radius:10px; font-size:16px; font-weight:600; transition:all 0.2s; white-space:nowrap;}
.btn.red{background:var(--red); color:#fff;}
.btn.red:hover{background:var(--red-d);}
.btn.line{border:1px solid var(--line); background:#fff; color:var(--ink);}
.btn.line:hover{border-color:var(--ink);}
.btn.ghost{border:1px solid rgba(255,255,255,0.3); color:#fff;}
.btn.ghost:hover{background:rgba(255,255,255,0.08); border-color:#fff;}

/* ───── FOOTER ───── */
.ft{background:var(--dark); color:rgba(255,255,255,0.55); font-size:14px; padding:56px 0 40px;}
.ft-top{display:flex; justify-content:space-between; gap:40px; padding-bottom:32px; border-bottom:1px solid var(--dark-line);}
.ft-brand img{height:26px; width:auto;}
.ft-brand p{margin-top:14px; max-width:360px; line-height:1.7;}
.ft-links{display:flex; gap:56px;}
.ft-links h4{font-family:var(--font-en); font-size:13px; font-weight:700; letter-spacing:0.1em; color:#fff; margin-bottom:14px;}
.ft-links li + li{margin-top:8px;}
.ft-links a:hover{color:#fff;}
.ft-links a.strong{color:#fff; font-weight:700;}
.ft-info{padding-top:28px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px;}
.ft-info dl{display:flex; flex-wrap:wrap; gap:4px 18px;}
.ft-info dt{display:none;}
.ft-info dd{position:relative;}
.ft-info .copy{font-family:var(--font-en); font-size:13px; white-space:nowrap;}

/* ───── RESPONSIVE ───── */
@media (max-width:1180px){
    .gnb-btn{padding:0 12px;}
    .gnb{gap:16px;}
}
@media (max-width:1024px){
    :root{--hd-h:70px;}
    .inner{width:calc(100% - 40px);}
    .menu-btn{display:block;}
    .gnb{position:fixed; top:var(--hd-h); left:0; right:0; bottom:0; height:auto; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 32px; background:#fff; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all 0.25s;}
    .hd.nav-open .gnb{opacity:1; visibility:visible; transform:none;}
    .gnb > ul{flex-direction:column; height:auto;}
    .gnb > ul > li{height:auto; border-bottom:1px solid var(--line);}
    .gnb-btn{width:100%; justify-content:space-between; height:60px; padding:0 4px; font-size:19px;}
    .gnb > ul > li.current .gnb-btn:before{display:none;}
    .sub{position:static; transform:none !important; opacity:1; visibility:visible; display:none; min-width:0; border:0; box-shadow:none; padding:0 0 12px; background:none;}
    .gnb > ul > li.open .sub{display:block;}
    .sub a{padding:12px 14px; background:var(--bg-2); margin-top:6px;}
    .ai-btn{margin-top:24px; height:54px; justify-content:center; font-size:16px;}
    body.nav-lock{overflow:hidden;}
    .sec{padding:80px 0;}
    .sec-title{font-size:32px;}
    .ft-top{flex-direction:column;}
    .ft-info{flex-direction:column; align-items:flex-start;}
}
@media (max-width:640px){
    .inner{width:calc(100% - 32px);}
    .logo img{height:24px;}
    .logo .tag{font-size:10px; padding-left:10px;}
    .logo .tag b{font-size:11px;}
    .sec{padding:64px 0;}
    .sec-head{flex-direction:column; align-items:flex-start; margin-bottom:32px;}
    .sec-title{font-size:26px;}
    .sec-desc{font-size:15px;}
    .ft-links{flex-wrap:wrap; gap:32px;}
}