@charset "utf-8";
/* Detail Studio — 디자인 변수 (쓰리웨이 제작정의서 v1.1 4장, 기획안 detail-studio.html 색상) */
/***** S:: 변수 *****/
:root{
	/**** !! 코딩시 지우지 말 것 !! ****/
	/* 컬러 */
	--main:#3347ff;          /* 포인트(버튼·활성) */
	--sub:#eef0ff;           /* 포인트 연한 배경 */
	--black:#111214;         /* 제목·잉크 */
	--basic:#55585e;         /* 본문 */
	--light:#6b7280;         /* 날짜·보조 */
	--white:#ffffff;
	--bk000:#000000;
	--border:#e6e6e1;
	--grayBg:#f8f8f4;        /* 사이트 바탕 */
	--footerBg:#f8f8f4;
	--highlight:#ffe23a;     /* 형광 밑줄·배지 */
	--success:#16a34a;
	--successBg:#e8f8ee;
	--danger:#e11d48;
	--placeholder:#e9e9e4;

	/* 폰트 */
	--kor:'Noto Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;
	--eng:'Noto Sans KR',system-ui,-apple-system,'Malgun Gothic',sans-serif;
	--icon:"Material Symbols Outlined";

	/* letter-spacing (em 단위로 통일) */
	--letter-spacing-default:-0.02em;
	--letter-spacing-none:0;
	--letter-spacing-heading:-0.045em;
	--letter-spacing-body:-0.01em;
	--letter-spacing-caption:0;
	--letter-spacing-button:-0.01em;
	--letter-spacing-input:0;
	--letter-spacing-relaxed:0.02em;
	/**** !! 코딩시 지우지 말 것 !! ****/

	--vh:100%;
	--ease:cubic-bezier(.22,.7,.2,1);
	--header-h:64px;
	--z-base:1; --z-dropdown:10; --z-sticky:50; --z-subtop:55; --z-quick:90; --z-sitemap:95; --z-header:100; --z-modal:200; --z-toast:300;
	--borderR10:10px; --borderR14:14px; --borderR20:20px; --borderR24:24px; --borderR100:999px;
	--shadow:0 30px 60px -24px rgba(0,0,0,.35);
	--shadow-sm:0 12px 26px -10px rgba(0,0,0,.45);
	--shadow-card:0 20px 40px -20px rgba(0,0,0,.2);
}
/***** E:: 변수 *****/

/***** S:: fs 유틸 (클래스 숫자 = px, rem = px ÷ 18) *****/
.fs12{font-size:.6667rem; line-height:1.6;  letter-spacing:var(--letter-spacing-caption); color:var(--light);}
.fs13{font-size:.7222rem; line-height:1.65; letter-spacing:var(--letter-spacing-caption); color:var(--light);}
.fs14{font-size:.7778rem; line-height:1.7;  letter-spacing:var(--letter-spacing-body); color:var(--basic);}
.fs16{font-size:.8889rem; line-height:1.7;  letter-spacing:var(--letter-spacing-body); color:var(--basic);}
.fs18{font-size:1rem;     line-height:1.7;  letter-spacing:var(--letter-spacing-body); color:var(--basic);}
.fs20{font-size:1.1111rem;line-height:1.6;  letter-spacing:var(--letter-spacing-default); color:var(--black);}
.fs22{font-size:1.2222rem;line-height:1.5;  letter-spacing:var(--letter-spacing-default); color:var(--black); font-weight:700;}
.fs24{font-size:1.3333rem;line-height:1.45; letter-spacing:var(--letter-spacing-default); color:var(--black); font-weight:700;}
.fs30{font-size:1.6667rem;line-height:1.35; letter-spacing:var(--letter-spacing-heading); color:var(--black); font-weight:900;}
.fs36{font-size:2rem;     line-height:1.3;  letter-spacing:var(--letter-spacing-heading); color:var(--black); font-weight:900;}
.fs40{font-size:2.2222rem;line-height:1.25; letter-spacing:var(--letter-spacing-heading); color:var(--black); font-weight:900;}
.fs50{font-size:2.7778rem;line-height:1.2;  letter-spacing:var(--letter-spacing-heading); color:var(--black); font-weight:900;}
.fs70{font-size:3.8889rem;line-height:1.08; letter-spacing:-0.05em; color:var(--black); font-weight:900;}
.bold{font-weight:700;} .semibold{font-weight:500;} .ls0{letter-spacing:0;}
.blind{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/***** E:: fs 유틸 *****/

/***** S:: 공통 버튼 *****/
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 28px;border-radius:var(--borderR100);background:var(--black);color:var(--white);font-weight:700;font-size:.8333rem;letter-spacing:var(--letter-spacing-button);white-space:nowrap;border:0;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,background .3s;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn.ac{background:var(--main);}
.btn.ghost{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 1.5px var(--black);}
.btn.sm{height:38px;padding:0 18px;font-size:.7222rem;}
.btn.block{width:100%;}
.btn:disabled,.btn.dis{opacity:.45;pointer-events:none;}
/***** E:: 공통 버튼 *****/

@media all and (max-width:1680px){}
@media all and (max-width:1500px){}
@media all and (max-width:1300px){}
@media all and (max-width:980px){
	.fs70{font-size:3.1111rem;}
	.fs50{font-size:2.2222rem;}
	.fs40{font-size:1.8889rem;}
}
@media all and (max-width:680px){
	html{font-size:16px;}
	.fs70{font-size:2.6rem;}
	.fs50{font-size:1.9rem;}
	.fs40{font-size:1.7rem;}
	.fs36{font-size:1.6rem;}
	.btn{height:48px;padding:0 22px;}
}