@charset "utf-8";
/* ==========================================================
	케이스스터디 공통 (2026-09-28)
	피그마 "프릭스_가이드&제작사례_260928" > prix_CaseStudy_*
	- 사례 페이지마다 이 파일을 공유한다. 사례별 색은 .cs-area 의 변수만 덮어쓴다.
	- 기준: html 10px (1rem = 디자인 10px)
========================================================== */
#container{max-width:100%; padding:7rem 0 0;}

.cs-area{
	--cs-blue:#0066FF;       /* 강조 텍스트, 주요 버튼 */
	--cs-navy:#142349;       /* 비주얼·수행범위 배경 */
	--cs-dark:#0b132b;       /* DESIGN 섹션 배경 */
	--cs-key:#46f3ff;        /* 비주얼 고객사명 */
	--cs-sub:#c0cdeb;        /* 어두운 배경 보조 텍스트 */
	--cs-eyebrow:#99a2b9;    /* BACKGROUND / SOLUTION ... */
	--cs-line:#d8d8d8;
	--cs-c1:#bc955a;         /* BACKGROUND */
	--cs-c1-t:#996a22;
	--cs-c2:#4475ad;         /* SOLUTION */
	--cs-c2-bg:#e6ecf4;
	--cs-c3:#005b84;         /* FEATURES : 보이는 기능 */
	--cs-c4:#4f8b77;         /* FEATURES : 보이지 않는 기능 */
	--cs-c5:#0d3d84;         /* DESIGN 카드 */
	--cs-c6:#2c66be;         /* RESULT 표 머리 */
	--cs-c6-t:#2d5591;
	font-family:'Pretendard Variable', Pretendard, sans-serif; color:#000; word-break:keep-all;
}
.cs-area *{box-sizing:border-box;}
.cs-area img{max-width:100%; vertical-align:top;}
.cs-area .inConts{max-width:170rem;}
.cs-area [data-aos][data-aos-delay="0"].aos-animate{transition-delay:0s;} /* 공통 delay 200 무효화 */
/* AOS(opacity·transform)와 hover(라인·그림자·배경) 전환을 한 곳에서 관리 — 서로 덮어써 끊기던 문제 해결 */
.cs-area [data-aos][data-aos]{transition-property:opacity, transform, border-color, box-shadow, background-color, color;}
.cs-area [data-aos][data-aos].aos-animate[data-aos-delay="50"]{transition-delay:0.05s, 0.05s, 0s, 0s, 0s, 0s;}
.cs-area [data-aos][data-aos].aos-animate[data-aos-delay="100"]{transition-delay:0.1s, 0.1s, 0s, 0s, 0s, 0s;}
.cs-area [data-aos][data-aos].aos-animate[data-aos-delay="150"]{transition-delay:0.15s, 0.15s, 0s, 0s, 0s, 0s;}
.cs-area [data-aos][data-aos].aos-animate[data-aos-delay="200"]{transition-delay:0.2s, 0.2s, 0s, 0s, 0s, 0s;}

/* 공통 : 섹션 타이틀 */
.cs-sec{padding:15rem 0;}
.cs-head .eyebrow{font-weight:700; font-size:2rem; line-height:1.2; letter-spacing:.4rem; color:var(--cs-eyebrow);}
.cs-head h2{margin-top:2rem; font-weight:800; font-size:5rem; line-height:1.2; color:#000;}
.cs-head h2 strong{font-weight:800; color:var(--cs-blue);}
.cs-head.white h2{color:#fff;}

/* 공통 : 버튼 */
.cs-btns{display:flex; flex-flow:row wrap; gap:1rem;}
.cs-btns a{height:6rem; padding:0 3rem; border:1px solid transparent; border-radius:.5rem; font-weight:700; font-size:1.8rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:all .3s ease-out;}
.cs-btns .btn-blue{background-color:var(--cs-blue); color:#fff;}
.cs-btns .btn-blue:hover{background-color:#0052cc;}
.cs-btns .btn-glass{background-color:rgba(255,255,255,.05); border-color:rgba(255,255,255,.4); color:#fff;}
.cs-btns .btn-glass:hover{background-color:rgba(255,255,255,.15); border-color:#fff;}
.cs-btns .btn-line{background-color:#fff; border-color:#9a9a9a; color:#000;}
.cs-btns .btn-line:hover{border-color:#000;}

/* 공통 : 표 제목 (링 아이콘) */
.cs-t-head{display:flex; align-items:center; gap:1rem;}
.cs-t-head:before{content:""; width:2.4rem; height:2.4rem; background:url('/new/images/casestudy/ic_ring_gold.svg') no-repeat center/contain; flex:none;}
.cs-t-head.blue:before{background-image:url('/new/images/casestudy/ic_ring_blue.svg');}
.cs-t-head h3{font-weight:700; font-size:2.8rem; line-height:3rem; color:#000;}

/* 공통 : 번호 박스 3단 (BACKGROUND / SOLUTION) */
.cs-reason{margin-top:7rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:4rem;}
.cs-reason>li{min-height:38.9rem; padding:5rem; background-color:#fff; border:1px solid var(--cs-line); border-radius:1rem; transition:border-color .3s ease-out, box-shadow .3s ease-out;}
.cs-reason .num{width:6.8rem; height:6.8rem; background-color:var(--c); border-radius:.5rem 2rem .5rem 2rem; font-weight:700; font-size:3rem; line-height:1; color:#fff; display:flex; align-items:center; justify-content:center;}
.cs-reason h3{margin-top:5rem; font-weight:700; font-size:2.6rem; line-height:1.2; color:#000;}
.cs-reason p{margin-top:2rem; font-size:2rem; line-height:3rem; color:#666;}
.cs-reason>li:hover{border-color:var(--c); box-shadow:.5rem .5rem 2rem rgba(0,0,0,.1);}

/* 공통 : 가로 표 */
.cs-table{width:100%; margin-top:3rem; border-collapse:separate; border-spacing:0; table-layout:fixed;}
.cs-table th,
.cs-table td{font-size:2rem; line-height:3rem; text-align:center; vertical-align:middle;}
.cs-table thead th{height:8rem; background-color:var(--c); font-weight:700; color:#fff;}
.cs-table thead th:first-child{border-radius:1rem 0 0 1rem;}
.cs-table thead th:last-child{border-radius:0 1rem 1rem 0;}
.cs-table tbody th,
.cs-table tbody td{padding:2.5rem 1rem; border-bottom:1px solid var(--cs-line);}
.cs-table tbody th{font-weight:700; color:#000;}
.cs-table tbody td{color:#000;}
.cs-table tbody td.pick{font-weight:700; color:var(--ct);}
.cs-table tbody td.note{padding-left:8.2rem; color:#666; text-align:left;}
.cs-table tbody tr{transition:background-color .3s ease-out;}
.cs-table tbody tr:hover{background-color:var(--c-hover, #fbf8f3);}

/* ---------- 01 : 비주얼 ---------- */
.cs-visual{height:88rem; background-color:var(--cs-navy); position:relative; overflow:hidden;}
.cs-visual .bg{width:200rem; height:89.3rem; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); opacity:.2; pointer-events:none;}
.cs-visual .bg img{width:100%; height:100%; object-fit:cover;}
.cs-visual .inConts{height:100%; display:flex; align-items:center; z-index:1;}
.cs-visual .txt{position:relative; z-index:2;}
.cs-visual .cate{padding:.5rem 2rem; border:1px solid rgba(255,255,255,.2); border-radius:999px; font-size:1.8rem; line-height:3rem; color:var(--cs-sub); display:inline-block;}
.cs-visual h2{margin-top:3rem; font-weight:800; font-size:8rem; line-height:1.19; color:#fff;}
.cs-visual h2 span{color:var(--cs-key); display:block;}
.cs-visual .desc{margin-top:2.2rem; font-size:2.4rem; line-height:3.4rem; color:#fff;}
.cs-visual .cs-btns{margin-top:7rem;}

/* 사진 2장 : 아래→위로 올라온 뒤 각도 회전 (피그마 -4° / 5°) */
.cs-visual .imgs{--s:1; width:calc(86.75rem * var(--s)); height:calc(54.1rem * var(--s)); position:absolute; right:.8rem; top:50%; margin-top:calc(-23.5rem * var(--s)); z-index:1;}
.cs-visual .imgs .card{width:calc(73rem * var(--s)); height:calc(47rem * var(--s)); border-radius:1rem; background-color:#fff; box-shadow:2rem 2rem 5rem rgba(0,0,0,.3); overflow:hidden; position:absolute; opacity:0; transform:translateY(60rem);}
.cs-visual .imgs .card img{width:100%; max-width:none;}
.cs-visual .imgs .c1{left:0; top:calc(7.1rem * var(--s)); --r:-4deg; filter:blur(1px);}
.cs-visual .imgs .c2{left:calc(13.75rem * var(--s)); top:0; --r:5deg;}
.cs-visual.is-on .imgs .card{animation:csCardUp 1.5s cubic-bezier(.22,1,.36,1) forwards;}
.cs-visual.is-on .imgs .c2{animation-delay:.15s;}
@keyframes csCardUp{
	0%{opacity:0; transform:translateY(60rem) rotate(0);}
	55%{opacity:1; transform:translateY(0) rotate(0);}
	100%{opacity:1; transform:translateY(0) rotate(var(--r));}
}

/* ---------- 02 : 프로젝트 정보 ---------- */
.cs-info .inConts{display:grid; grid-template-columns:84fr 73fr; gap:7rem; align-items:start;}
.cs-info .info>div{padding:2.3rem 0; border-top:1px solid var(--cs-line); display:flex; font-size:2rem; line-height:2.4rem;}
.cs-info .info>div:first-child{border-top:0;}
.cs-info .info dt{width:20rem; flex:none; font-weight:700; letter-spacing:.4rem; color:#000;}
.cs-info .info dd{color:#000;}
.cs-info .info dd a{color:#000; transition:color .3s ease-out;}
.cs-info .info dd a:hover{color:var(--cs-blue); text-decoration:underline; text-underline-position:under;}
.cs-info .scope{min-height:35rem; padding:5rem; background-color:var(--cs-navy); border-radius:1rem;}
.cs-info .scope h3{font-weight:700; font-size:2.4rem; line-height:3rem; color:#fff;}
.cs-info .scope .tags{margin-top:2rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.2); display:flex; flex-flow:row wrap; gap:1rem;}
.cs-info .scope .tags span{padding:.5rem 2rem; background-color:#fff; border-radius:999px; font-size:1.8rem; line-height:2.1rem; color:var(--cs-navy);}
.cs-info .scope p{margin-top:3rem; font-size:2rem; line-height:3rem; color:var(--cs-sub);}

/* ---------- 03 : BACKGROUND ---------- */
.cs-bg{border-top:1px solid var(--cs-line); --c:var(--cs-c1); --ct:var(--cs-c1-t);}
.cs-bg .cs-t-head{margin-top:10rem;}
.cs-bg .cs-table col.c1{width:18%;}
.cs-bg .cs-table col.c2{width:46%;}

/* ---------- 04 : SOLUTION ---------- */
.cs-sol{background-color:#f7f9fb; --c:var(--cs-c2);}
.cs-sol .cs-t-head{margin-top:10rem;}
.cs-ia{margin-top:3rem; display:grid; grid-template-columns:repeat(6, 1fr); gap:2rem; align-items:start;}
.cs-ia>li{display:flex; flex-flow:column nowrap; gap:1rem;}
.cs-ia strong{height:8rem; background-color:var(--cs-c2); border-radius:1rem; font-weight:700; font-size:2rem; line-height:3rem; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center;}
.cs-ia span{min-height:6rem; padding:1.5rem 3rem; background-color:var(--cs-c2-bg); border-radius:1rem; font-size:2rem; line-height:3rem; color:#000;}
.cs-util{margin-top:7rem; min-height:6rem; background-color:#fff; border:1px solid var(--cs-line); border-radius:999px; display:flex; align-items:stretch; overflow:hidden;}
.cs-util strong{width:20.9rem; flex:none; margin:-1px 0 -1px -1px; background-color:var(--cs-navy); border-radius:999px 0 999px 999px; font-weight:700; font-size:2rem; line-height:3rem; color:#fff; display:flex; align-items:center; justify-content:center;}
.cs-util p{padding:1.5rem 5rem; font-size:2rem; line-height:3rem; color:#666; display:flex; align-items:center;}

/* ---------- 05 : FEATURES ---------- */
.cs-feat .cols{margin-top:7rem; display:grid; grid-template-columns:repeat(2, 1fr); gap:4rem;}
.cs-feat .col.c-a{--c:var(--cs-c3);}
.cs-feat .col.c-b{--c:var(--cs-c4);}
.cs-feat .col h3{font-weight:700; font-size:2rem; line-height:3rem; color:var(--c); display:flex; align-items:center; justify-content:center; gap:1rem;}
.cs-feat .col h3:before,
.cs-feat .col h3:after{content:""; width:4rem; height:1px; background-color:var(--c);}
.cs-feat .col ul{margin-top:3rem; display:flex; flex-flow:column nowrap; gap:2rem;}
.cs-feat .col li{min-height:21rem; padding:5rem 7rem; background-color:#fff; border:1px solid var(--cs-line); border-radius:1rem; position:relative; transition:border-color .3s ease-out, box-shadow .3s ease-out;}
.cs-feat .col li .num{width:4rem; height:4rem; background-color:var(--c); border-radius:1rem 0 1rem 0; font-weight:700; font-size:1.6rem; line-height:1; color:#fff; display:flex; align-items:center; justify-content:center; position:absolute; left:-1px; top:-1px;}
.cs-feat .col li h4{font-weight:700; font-size:2.4rem; line-height:3rem; color:#000;}
.cs-feat .col li p{margin-top:2rem; font-size:2rem; line-height:3rem; color:#666;}
.cs-feat .col li:hover{border-color:var(--c); box-shadow:.5rem .5rem 2rem rgba(0,0,0,.1);}

/* ---------- 06 : DESIGN + 주요 화면 ---------- */
.cs-design{background-color:var(--cs-dark);}
.cs-design .con1{display:grid; grid-template-columns:56rem 1fr; align-items:center;}
.cs-design .con1 .cs-head p{margin-top:2rem; font-size:2rem; line-height:3rem; color:var(--cs-sub);}
.cs-design .cards{display:grid; grid-template-columns:repeat(2, 1fr); gap:4rem;}
.cs-design .cards li{min-height:24rem; padding:5rem 7rem; background-color:#fff; border-radius:1rem;}
.cs-design .cards h3{padding-left:3.4rem; font-weight:700; font-size:2.4rem; line-height:3rem; color:var(--cs-c5); position:relative;}
.cs-design .cards h3:before{content:""; width:2.4rem; height:2.4rem; background:url('/new/images/casestudy/ic_check_box.svg') no-repeat center/contain; position:absolute; left:0; top:.3rem;}
.cs-design .cards p{margin-top:2rem; font-size:2rem; line-height:3rem; color:#666;}
.cs-design .line{height:1px; margin:15rem 0; background-color:rgba(255,255,255,.2);}
.cs-design .con2 h3{font-weight:800; font-size:3.4rem; line-height:1.2; color:#fff;}
.cs-screens{margin-top:7rem; display:grid; grid-template-columns:repeat(3, 1fr); gap:4rem;}
.cs-screens li{aspect-ratio:520 / 860; background-color:#fff; border-radius:1rem; overflow:hidden; cursor:pointer;}
.cs-screens img{width:100%; max-width:none; transition:transform var(--d, 3s) linear; /* --d : 길이÷속도 (casestudy.js) */}
.cs-screens li.long:hover img{transform:translateY(var(--y, 0));}

/* ---------- 07 : RESULT + CTA ---------- */
.cs-result{--c:var(--cs-c6); --ct:var(--cs-c6-t); --c-hover:#f5f8fd;}
.cs-result .cs-table{margin-top:7rem;}
.cs-result .cs-table col.c1{width:13.1%;}
.cs-result .cs-table col.c2{width:26.1%;}
.cs-result .cs-table col.c3{width:21.6%;}
.cs-cta{margin-top:15rem; text-align:center;}
.cs-cta h2{font-weight:800; font-size:5rem; line-height:1.2; color:#000;}
.cs-cta p{margin-top:2rem; font-size:2rem; line-height:3rem; color:#000;}
.cs-cta .cs-btns{margin-top:7rem; justify-content:center;}

/* ================= 반응형 ================= */
@media only screen and (max-width : 1680px){
	.cs-visual .imgs{--s:.85; right:3rem;}
}
@media only screen and (max-width : 1600px){
	.cs-visual .imgs{--s:.78;}
}
@media only screen and (max-width : 1480px){
	.cs-visual .imgs{--s:.72;}
	.cs-visual h2{font-size:7rem;}
	.cs-ia{grid-template-columns:repeat(3, 1fr); row-gap:3rem;}
	.cs-design .con1{grid-template-columns:1fr; gap:5rem;}
}
@media only screen and (max-width : 1280px){
	/* 비주얼 : 텍스트 위, 사진 아래 */
	.cs-visual{height:auto; padding:12rem 0 0;}
	.cs-visual .inConts{height:auto; flex-flow:column nowrap; align-items:flex-start;}
	.cs-visual .imgs{--s:.9; position:relative; right:auto; top:auto; margin:8rem auto 10rem;}
	.cs-info .inConts{grid-template-columns:1fr; gap:5rem;}
	.cs-reason{grid-template-columns:1fr; gap:2rem;}
	.cs-reason>li{min-height:0; display:grid; grid-template-columns:auto 1fr; column-gap:4rem;}
	.cs-reason .num{grid-row:1 / span 2;}
	.cs-reason h3{margin-top:0;}
	.cs-feat .cols{grid-template-columns:1fr; gap:7rem;}
	.cs-feat .col li{min-height:0;}
}
@media only screen and (max-width : 1024px){
	.cs-visual .imgs{--s:.8;}
	.cs-screens{gap:2rem;}
	.cs-design .cards li{padding:4rem;}
	.cs-util{border-radius:2rem; flex-flow:column nowrap;}
	.cs-util strong{width:auto; min-height:6rem; margin:-1px -1px 0; border-radius:2rem 2rem 0 0;}
	.cs-util p{padding:2.5rem 3rem;}
}
@media only screen and (max-width : 840px){
	/* html 6.5px 구간 : 본문 크기 보정 */
	.cs-sec{padding:12rem 0;}
	.cs-head h2,
	.cs-cta h2{font-size:4.4rem;}
	.cs-visual h2{font-size:6.6rem;}
	.cs-visual .desc{font-size:2.6rem; line-height:3.8rem;}
	.cs-visual .desc br,
	.cs-cta p br{display:none;}
	.cs-visual .cs-btns{margin-top:5rem;}
	.cs-visual .imgs{--s:.95;}
	.cs-reason p,
	.cs-feat .col li p,
	.cs-design .cards p,
	.cs-design .con1 .cs-head p,
	.cs-info .scope p,
	.cs-util p,
	.cs-cta p{font-size:2.2rem; line-height:3.4rem;}
	.cs-reason>li{padding:4rem; display:block;}
	.cs-reason h3{margin-top:3rem;}
	.cs-feat .col li{padding:7rem 4rem 4rem;}
	.cs-feat .col li .num{width:5rem; height:5rem; font-size:2rem;}
	.cs-design .cards{grid-template-columns:1fr; gap:2rem;}
	.cs-design .cards li{min-height:0;}
	.cs-design .line{margin:10rem 0;}
	.cs-screens{margin-top:5rem; grid-template-columns:1fr; gap:3rem;}
	.cs-screens li{aspect-ratio:auto; max-height:120rem;}
	.cs-screens li.long:hover img{transform:none;}
	.cs-ia{grid-template-columns:repeat(2, 1fr);}
	.cs-ia strong{height:7rem; font-size:2.2rem;}
	.cs-ia span{padding:1.5rem 2.4rem; font-size:2.2rem;}

	/* 가로 표 → 카드형 */
	.cs-table,
	.cs-table tbody,
	.cs-table tr,
	.cs-table th,
	.cs-table td{display:block; width:100%;}
	.cs-table colgroup,
	.cs-table thead{display:none;}
	.cs-table tbody tr{margin-top:2rem; background-color:#fff; border:1px solid var(--cs-line); border-radius:1rem; overflow:hidden; display:grid; grid-template-columns:1fr 1fr;}
	.cs-table tbody tr:hover{background-color:#fff;}
	.cs-table tbody th{grid-column:1 / -1; padding:1.8rem 2rem; background-color:var(--c); border:0; font-size:2.4rem; color:#fff;}
	.cs-table tbody td{padding:2.5rem 2rem; border:0; font-size:2.2rem; line-height:3.2rem;}
	.cs-table tbody td:before{content:attr(data-label); margin-bottom:.8rem; font-weight:400; font-size:1.9rem; line-height:1.2; color:#999; display:block;}
	.cs-table tbody td.pick{background-color:var(--c-hover, #fbf8f3); border-left:1px solid var(--cs-line);}
	.cs-table tbody td.note{grid-column:1 / -1; padding-left:2rem; border-top:1px solid var(--cs-line); text-align:left;}
	.cs-table tbody td.note:before{text-align:left;}
}
@media only screen and (max-width : 640px){
	.cs-visual .imgs{--s:.75;}
	.cs-info .info>div{flex-flow:column nowrap; gap:1rem;}
}
@media only screen and (max-width : 480px){
	/* html 5.5px 구간 */
	.cs-visual .imgs{--s:.64; margin:6rem auto 9rem;}
	.cs-visual h2{font-size:6.4rem;}
	.cs-visual .cate{font-size:2.4rem; line-height:3.6rem;}
	.cs-visual .desc{font-size:2.8rem; line-height:4.2rem;}
	.cs-btns a{height:8rem; padding:0 3.6rem; font-size:2.6rem;}
	.cs-head .eyebrow{font-size:2.4rem;}
	.cs-head h2,
	.cs-cta h2{font-size:4.8rem;}
	.cs-t-head h3{font-size:3.2rem; line-height:4rem;}
	.cs-info .info>div{font-size:2.6rem; line-height:3.4rem;}
	.cs-info .scope{padding:4rem 3rem;}
	.cs-info .scope h3{font-size:3rem; line-height:4rem;}
	.cs-info .scope .tags span{font-size:2.4rem; line-height:3rem;}
	.cs-reason p,
	.cs-feat .col li p,
	.cs-design .cards p,
	.cs-design .con1 .cs-head p,
	.cs-info .scope p,
	.cs-util p,
	.cs-cta p{font-size:2.6rem; line-height:4rem;}
	.cs-reason .num{width:8rem; height:8rem; font-size:3.4rem;}
	.cs-reason h3,
	.cs-design .con2 h3{font-size:3.2rem;}
	.cs-feat .col h3{font-size:2.6rem;}
	.cs-feat .col li{padding:8rem 3rem 4rem;}
	.cs-feat .col li .num{width:6rem; height:6rem; font-size:2.4rem;}
	.cs-feat .col li h4,
	.cs-design .cards h3{font-size:3rem; line-height:4rem;}
	.cs-design .cards h3{padding-left:4rem;}
	.cs-design .cards h3:before{width:2.8rem; height:2.8rem; top:.6rem;}
	.cs-design .cards li{padding:4rem 3rem;}
	.cs-ia{grid-template-columns:1fr 1fr; gap:2rem 1.5rem;}
	.cs-ia strong{height:8rem; font-size:2.6rem;}
	.cs-ia span{padding:1.8rem 2rem; font-size:2.4rem; line-height:3.4rem;}
	.cs-util strong{font-size:2.6rem;}
	.cs-table tbody tr{grid-template-columns:1fr;}
	.cs-table tbody th{font-size:2.8rem;}
	.cs-table tbody td{font-size:2.6rem; line-height:3.8rem;}
	.cs-table tbody td:before{font-size:2.2rem;}
	.cs-table tbody td.pick{border-left:0; border-top:1px solid var(--cs-line);}
}
@media (prefers-reduced-motion: reduce){
	.cs-area *{transition:none !important;}
	.cs-visual .imgs .card{animation:none !important; opacity:1; transform:rotate(var(--r));}
}