@charset "utf-8";

/* HERO */
.sv-hero{position:relative; overflow:hidden; background:var(--dark); color:#fff; padding:96px 0 104px;}
.sv-hero:before{content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg, transparent, #000 60%); -webkit-mask-image:linear-gradient(90deg, transparent, #000 60%);}
.sv-hero:after{content:''; position:absolute; width:600px; height:600px; right:-120px; top:-220px; border-radius:50%; background:radial-gradient(circle, rgba(206,24,30,0.38), transparent 62%);}
.sv-hero .inner{position:relative; z-index:2;}
.crumb{display:flex; gap:8px; font-size:13px; color:rgba(255,255,255,0.45);}
.crumb a:hover{color:#fff;}
.sv-hero .eyebrow{margin-top:28px;}
.sv-hero h1{margin-top:16px; font-size:52px; font-weight:700; line-height:1.25; letter-spacing:-0.045em;}
.sv-hero .lead{margin-top:22px; font-size:18px; line-height:1.75; color:rgba(255,255,255,0.68); max-width:640px;}
.sv-hero .btns{display:flex; gap:12px; margin-top:38px; flex-wrap:wrap;}
.sv-hero .mark{position:absolute; right:0; bottom:-30px; font-family:var(--font-en); font-size:200px; font-weight:800; line-height:1; letter-spacing:-0.05em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.12); pointer-events:none; user-select:none;}

/* OVERVIEW */
.ov{display:grid; grid-template-columns:320px 1fr; gap:64px;}
.ov-body p{font-size:18px; line-height:1.85; color:var(--ink-2);}
.ov-body p + p{margin-top:18px;}
.ov-body strong{color:var(--ink);}
.ov-points{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:36px;}
.ov-points li{padding:20px 22px; border-radius:12px; background:var(--bg-2);}
.ov-points b{display:block; font-size:13px; font-weight:600; color:var(--ink-3);}
.ov-points span{display:block; margin-top:6px; font-size:17px; font-weight:700; color:var(--ink);}

/* FEATURES */
.feat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;}
.feat{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;}
.feat .no{font-family:var(--font-en); font-size:13px; font-weight:700; color:var(--red);}
.feat h3{margin-top:16px; font-size:19px; font-weight:700; line-height:1.4;}
.feat p{margin-top:10px; font-size:15px; line-height:1.7; color:var(--ink-2);}

/* ADMIN */
.admin-box{display:grid; grid-template-columns:1fr auto; align-items:center; gap:32px; padding:44px 48px; border-radius:18px; background:var(--ink); color:#fff;}
.admin-box .eyebrow{color:#ff6b70;}
.admin-box h2{margin-top:12px; font-size:28px; font-weight:700;}
.admin-box p{margin-top:10px; font-size:16px; color:rgba(255,255,255,0.62); max-width:620px;}
.admin-box .host{display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:8px 14px; border-radius:8px; background:rgba(255,255,255,0.07); font-family:var(--font-en); font-size:14px; color:rgba(255,255,255,0.85);}
.admin-box .host:before{content:''; width:10px; height:12px; border:1.5px solid currentColor; border-radius:2px 2px 3px 3px; box-sizing:border-box; opacity:0.7;}

/* OTHER */
.other{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;}
.other a{display:flex; justify-content:space-between; align-items:center; padding:22px 24px; border:1px solid var(--line); border-radius:12px; font-family:var(--font-en); font-size:18px; font-weight:700; transition:all 0.2s;}
.other a small{display:block; font-family:var(--font-kr); font-size:13px; font-weight:500; color:var(--ink-3); margin-top:2px;}
.other a:after{content:'→'; color:var(--ink-3); transition:transform 0.2s;}
.other a:hover{border-color:var(--ink);}
.other a:hover:after{transform:translateX(4px); color:var(--red);}

@media (max-width:1180px){
    .feat-grid{grid-template-columns:repeat(2, 1fr);}
    .ov{grid-template-columns:1fr; gap:24px;}
    .sv-hero .mark{font-size:140px;}
}
@media (max-width:860px){
    .sv-hero h1{font-size:40px;}
    .admin-box{grid-template-columns:1fr; padding:36px 32px;}
    .other{grid-template-columns:repeat(2, 1fr);}
    .ov-points{grid-template-columns:1fr;}
}
@media (max-width:640px){
    .sv-hero{padding:56px 0 64px;}
    .sv-hero h1{font-size:30px;}
    .sv-hero .lead{font-size:16px;}
    .sv-hero .mark{font-size:90px; bottom:-14px;}
    .ov-body p{font-size:16px;}
    .feat-grid{grid-template-columns:1fr;}
    .admin-box{padding:28px 24px;}
    .admin-box h2{font-size:23px;}
    .other{grid-template-columns:1fr;}
}

/* ───── 확장 컴포넌트 ───── */
/* 흐름도 */
.flow{display:grid; grid-template-columns:repeat(var(--n, 4), 1fr); gap:0; counter-reset:step;}
.flow li{position:relative; padding:28px 24px; background:#fff; border:1px solid var(--line); margin-left:-1px;}
.flow li:first-child{border-radius:var(--radius) 0 0 var(--radius); margin-left:0;}
.flow li:last-child{border-radius:0 var(--radius) var(--radius) 0;}
.flow li:not(:last-child):after{content:''; position:absolute; right:-9px; top:50%; z-index:2; width:16px; height:16px; background:#fff; border-top:1px solid var(--line); border-right:1px solid var(--line); transform:translateY(-50%) rotate(45deg);}
.flow li:before{counter-increment:step; content:'STEP ' counter(step, decimal-leading-zero); display:block; font-family:var(--font-en); font-size:12px; font-weight:700; color:var(--red); letter-spacing:0.08em;}
.flow h3{margin-top:12px; font-size:18px; font-weight:700;}
.flow p{margin-top:8px; font-size:14.5px; line-height:1.65; color:var(--ink-2);}

/* 상품 카드 */
.prod-grid{display:grid; grid-template-columns:repeat(var(--n, 3), 1fr); gap:16px;}
.prod{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px;}
.prod .type{font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:0.1em; color:var(--ink-3); text-transform:uppercase;}
.prod h3{margin-top:10px; font-size:20px; font-weight:700;}
.prod p{margin-top:10px; font-size:15px; line-height:1.7; color:var(--ink-2); flex:1;}
.prod ul.dot{margin-top:12px; font-size:14.5px; color:var(--ink-2); flex:1;}
.prod ul.dot li{position:relative; padding-left:12px; line-height:1.65;}
.prod ul.dot li + li{margin-top:4px;}
.prod ul.dot li:before{content:''; position:absolute; left:0; top:10px; width:4px; height:4px; border-radius:50%; background:var(--ink-3);}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px;}
.tags span{padding:4px 10px; border-radius:6px; background:rgba(206,24,30,0.07); color:var(--red); font-family:var(--font-en); font-size:12.5px; font-weight:700;}
.tags span.g{background:var(--bg-2); color:var(--ink-2); font-family:var(--font-kr); font-weight:500;}

/* 포맷 표 */
.fmt{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); font-size:15px;}
.fmt th, .fmt td{padding:16px 20px; text-align:left; border-bottom:1px solid var(--line);}
.fmt th{background:var(--ink); color:#fff; font-size:13px; font-weight:600; letter-spacing:0.02em;}
.fmt td:first-child{font-family:var(--font-en); font-weight:700; color:var(--ink); white-space:nowrap;}
.fmt td{color:var(--ink-2);}
.fmt tr:last-child td{border-bottom:0;}
.fmt-wrap{overflow-x:auto;}
.fmt-wrap + .fmt-wrap{margin-top:16px;}
.fmt-cap{display:block; margin:32px 0 12px; font-family:var(--font-en); font-size:15px; font-weight:700;}
.fmt-cap:first-child{margin-top:0;}

/* 2단 비교 */
.split{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.split > div{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px;}
.split > div.dark{background:var(--ink); border-color:var(--ink); color:#fff;}
.split h3{display:flex; align-items:center; gap:10px; font-size:20px; font-weight:700;}
.split h3 small{font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:0.08em; color:var(--red);}
.split .dark h3 small{color:#ff6b70;}
.split ul{margin-top:18px;}
.split li{position:relative; padding:12px 0 12px 28px; border-top:1px solid var(--line); font-size:15px; line-height:1.6; color:var(--ink-2);}
.split .dark li{border-color:rgba(255,255,255,0.12); color:rgba(255,255,255,0.75);}
.split li:before{content:'✓'; position:absolute; left:2px; top:12px; color:var(--red); font-weight:700;}
.split .dark li:before{color:#ff6b70;}
.split li b{color:var(--ink); font-weight:700;}
.split .dark li b{color:#fff;}
.note{margin-top:16px; padding:18px 22px; border-radius:12px; background:rgba(206,24,30,0.06); color:var(--ink); font-size:15px; font-weight:500;}

/* 데이터 파트너 */
.data-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;}
.data{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 22px 24px;}
.data .src{font-size:12.5px; font-weight:600; color:var(--red);}
.data h3{margin-top:6px; font-family:var(--font-en); font-size:18px; font-weight:700;}
.data p{margin-top:8px; font-size:14px; line-height:1.65; color:var(--ink-2);}
.data.main{background:var(--ink); border-color:var(--ink); color:#fff;}
.data.main .src{color:#ff6b70;}
.data.main p{color:rgba(255,255,255,0.7);}

/* 칩 리스트 */
.chips{display:flex; flex-wrap:wrap; gap:8px;}
.chips span{padding:9px 16px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:14.5px; font-weight:500; color:var(--ink-2);}
.chips span.on{background:var(--ink); border-color:var(--ink); color:#fff;}

/* 다이어그램 (mx) */
.diagram{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; padding:40px; border-radius:18px; background:var(--dark); color:#fff;}
.diagram .pool h4{font-family:var(--font-en); font-size:12px; font-weight:700; letter-spacing:0.12em; color:rgba(255,255,255,0.5); margin-bottom:14px;}
.diagram .pool .chips span{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.12); color:rgba(255,255,255,0.85);}
.diagram .core{display:flex; flex-direction:column; align-items:center; justify-content:center; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, rgba(206,24,30,0.5), rgba(206,24,30,0.08) 70%); border:1px solid rgba(255,107,112,0.5); text-align:center;}
.diagram .core b{font-family:var(--font-en); font-size:22px; font-weight:800;}
.diagram .core span{margin-top:6px; font-size:13px; color:rgba(255,255,255,0.7);}
.diagram .out{grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:8px;}
.diagram .out div{padding:16px 18px; border-radius:12px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); font-size:14.5px;}
.diagram .out b{display:block; font-family:var(--font-en); font-size:12px; letter-spacing:0.08em; color:#ff6b70; margin-bottom:4px;}

/* 문의 */
.contact{display:flex; align-items:center; gap:10px; margin-top:16px; font-size:14px; color:rgba(255,255,255,0.6);}
.contact a{color:#fff; font-family:var(--font-en); font-weight:600; border-bottom:1px solid rgba(255,255,255,0.3);}
.contact a:hover{border-color:#fff;}
.admin-box .btns{display:flex; flex-direction:column; gap:10px;}

@media (max-width:1180px){
    .data-grid{grid-template-columns:repeat(2, 1fr);}
    .flow{grid-template-columns:repeat(2, 1fr); gap:12px;}
    .flow li, .flow li:first-child, .flow li:last-child{border-radius:var(--radius); margin-left:0;}
    .flow li:after{display:none;}
    .prod-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:860px){
    .split{grid-template-columns:1fr;}
    .diagram{grid-template-columns:1fr; justify-items:center; padding:32px 24px;}
    .diagram .pool{justify-self:stretch;}
    .diagram .out{grid-template-columns:1fr; justify-self:stretch;}
}
@media (max-width:640px){
    .flow, .prod-grid, .data-grid{grid-template-columns:1fr;}
    .fmt{font-size:14px;}
    .fmt th, .fmt td{padding:12px 14px;}
    .split > div{padding:26px 22px;}
    .diagram .core{width:160px; height:160px;}
}