@charset "utf-8";
/* Detail Studio 공통: 리셋·틀·헤더·모바일 메뉴·푸터·토스트 (root.css 다음에 로드) */

/***** 리셋 *****/
*,*::before,*::after{box-sizing:border-box;}
html{font-size:18px;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
body{margin:0;font-family:var(--kor);background:var(--grayBg);color:var(--black);line-height:1.6;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;letter-spacing:var(--letter-spacing-body);}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure{margin:0;padding:0;}
ul,ol{list-style:none;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;vertical-align:top;border:0;}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;}
input,textarea,select{font:inherit;color:inherit;}
table{border-collapse:collapse;}
address{font-style:normal;}
[hidden]{display:none!important;}
:focus-visible{outline:2px solid var(--main);outline-offset:2px;}
.skip_nav{position:absolute;left:12px;top:-60px;z-index:var(--z-modal);background:var(--black);color:var(--white);padding:10px 16px;border-radius:var(--borderR10);font-size:.7778rem;}
.skip_nav:focus{top:12px;}
.wrapper{min-height:100vh;display:flex;flex-direction:column;}
.container{flex:1;outline:0;}
.basic_in{width:90%;max-width:1240px;margin:0 auto;}
.compad{padding:110px 0;}
.compad_b{padding-bottom:110px;}
.basic_pad{padding:40px 0 120px;}

/***** 헤더 *****/
.header{position:sticky;top:0;z-index:var(--z-header);background:rgba(248,248,244,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);transition:box-shadow .3s;}
.header.fixed{box-shadow:0 6px 20px -14px rgba(0,0,0,.35);}
.header_in{width:90%;max-width:1240px;margin:0 auto;height:var(--header-h);display:flex;align-items:center;gap:36px;}
.logo a,.foot_logo{font-weight:900;font-size:1.1667rem;letter-spacing:-.04em;color:var(--black);}
.logo i,.foot_logo i{font-style:normal;color:var(--main);}
.gnb{margin-right:auto;}
.gnb ul{display:flex;gap:26px;}
.gnb a{position:relative;display:block;padding:6px 0;font-size:.7778rem;font-weight:500;color:#444;}
.gnb a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--black);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.gnb a:hover::after,.gnb a.on::after{transform:scaleX(1);}
.gnb a.on{color:var(--black);font-weight:700;}
.header_util{display:flex;align-items:center;gap:18px;}
.util_link{font-size:.7222rem;color:var(--light);}
.util_link:hover{color:var(--black);}
.btn_menu{display:none;width:40px;height:40px;position:relative;border-radius:50%;}
.btn_menu span{position:absolute;left:11px;width:18px;height:2px;background:var(--black);border-radius:2px;transition:transform .3s var(--ease),opacity .2s;}
.btn_menu span:nth-child(1){top:13px;} .btn_menu span:nth-child(2){top:19px;} .btn_menu span:nth-child(3){top:25px;}
.menu-open .btn_menu span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.menu-open .btn_menu span:nth-child(2){opacity:0;}
.menu-open .btn_menu span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/***** 모바일 메뉴 *****/
.mobile_menu{position:fixed;top:var(--header-h);right:0;bottom:0;width:min(360px,86vw);z-index:var(--z-sitemap);background:var(--white);transform:translateX(100%);transition:transform .4s var(--ease);overflow-y:auto;visibility:hidden;}
.mobile_menu.open{transform:none;visibility:visible;}
.mobile_menu_in{padding:26px 24px 60px;}
.mm_member{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--border);font-size:.7778rem;}
.mm_member p{width:100%;font-size:.8889rem;}
.mm_member a:not(.btn){color:var(--light);}
.mm_member .btn{flex:1;}
.mm_list li{padding:18px 0;border-bottom:1px solid var(--border);}
.mm_list b{display:block;font-size:.8889rem;margin-bottom:8px;}
.mm_list a{display:inline-block;margin:4px 14px 4px 0;font-size:.7778rem;color:var(--basic);}
.mm_dim{position:fixed;inset:var(--header-h) 0 0 0;z-index:calc(var(--z-sitemap) - 1);background:rgba(17,18,20,.4);opacity:0;visibility:hidden;transition:opacity .3s;}
.menu-open .mm_dim{opacity:1;visibility:visible;}
.menu-open body{overflow:hidden;}

/***** 서브 공통 틀 *****/
.sub_top{padding:64px 0 0;}
.sub_tit{margin-bottom:8px;}
.sub_desc{margin-top:6px;}
.sub_head{padding-top:4px;}
.sub_tab_wrap{margin-top:26px;border-bottom:1px solid var(--border);}
.sub_tab{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;}
.sub_tab::-webkit-scrollbar{display:none;}
.sub_tab a{position:relative;flex:none;padding:12px 0 14px;font-size:.8333rem;font-weight:500;color:var(--light);}
.sub_tab a.on{color:var(--black);font-weight:700;}
.sub_tab a.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--black);}
[data-ajax-region].is-loading{opacity:.5;transition:opacity .2s;pointer-events:none;}

/***** 칩·뒤로가기·빈 화면·페이징 공통 *****/
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:var(--borderR100);background:var(--white);border:1px solid var(--border);font-size:.7222rem;font-weight:700;transition:all .25s var(--ease);}
.chip:hover{border-color:var(--black);}
.chip.on{background:var(--black);color:var(--white);border-color:var(--black);}
.back{display:inline-flex;gap:6px;font-size:.7778rem;font-weight:700;color:#555;margin:34px 0 22px;}
.back:hover{color:var(--black);}
.empty{text-align:center;padding:90px 20px;color:var(--light);font-size:.8333rem;grid-column:1/-1;}
.empty b{display:block;font-size:1.2222rem;color:var(--black);margin-bottom:8px;}
.empty .btn{margin-top:8px;}
.paging{display:flex;justify-content:center;gap:6px;margin-top:40px;}
.paging a{display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border-radius:var(--borderR100);background:var(--white);border:1px solid var(--border);font-size:.7222rem;font-weight:700;}
.paging a.on{background:var(--black);color:var(--white);border-color:var(--black);}
.note{font-size:.6944rem;color:var(--light);line-height:1.7;margin-top:16px;}


/***** 템플릿 카드(메인·목록·관심 공용) *****/
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px 22px;}
.tgrid.col3{grid-template-columns:repeat(3,minmax(0,1fr));}
.tcard{position:relative;animation:up .6s var(--ease) both;}
.tcard_link{display:block;}
.tcard .thumb{position:relative;aspect-ratio:4/5;border-radius:var(--borderR24);overflow:hidden;background:var(--placeholder);border:1px solid var(--border);transition:transform .5s var(--ease),box-shadow .5s;}
.tcard:hover .thumb{transform:translateY(-8px);box-shadow:0 30px 50px -26px rgba(0,0,0,.4);}
.tcard .thumb>img{width:100%;height:100%;object-fit:cover;object-position:top;}
.tcard .thumb .scal{position:absolute;inset:0;overflow:hidden;background:var(--white);}
.tcard .thumb .scal:empty{display:none;}
.tcard .thumb::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(0,0,0,.28));pointer-events:none;}
.tcard .tag{position:absolute;left:14px;top:14px;z-index:3;background:rgba(17,18,20,.9);color:var(--white);font-size:.6667rem;font-weight:700;padding:6px 13px;border-radius:var(--borderR100);}
.tcard .ov{position:absolute;z-index:3;left:50%;bottom:20px;transform:translate(-50%,16px);opacity:0;background:var(--white);color:var(--black);font-weight:700;font-size:.7778rem;padding:11px 22px;border-radius:var(--borderR100);transition:all .4s var(--ease);white-space:nowrap;}
.tcard:hover .ov,.tcard_link:focus-visible .ov{opacity:1;transform:translate(-50%,0);}
.tcard .m{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;gap:10px;}
.tcard .m h3{font-size:1rem;letter-spacing:-.03em;font-weight:700;}
.tcard .price{font-weight:900;font-size:.8889rem;white-space:nowrap;}
.tcard .price del{font-weight:400;color:var(--light);font-size:.7222rem;}
.tcard .price em{font-style:normal;color:var(--danger);}
.tcard .desc{font-size:.75rem;color:var(--light);margin-top:4px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tcard .wish{position:absolute;right:12px;top:12px;z-index:4;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.12);}
.tcard .wish::before{content:'♡';font-size:1rem;line-height:38px;color:var(--black);}
.tcard .wish.on::before{content:'♥';color:var(--danger);}
.soon{aspect-ratio:4/5;border-radius:var(--borderR24);border:2px dashed #cfcfc8;display:grid;place-items:center;text-align:center;color:#9a9a92;font-size:.7778rem;line-height:1.7;padding:20px;}
.soon b{display:block;font-size:1.8889rem;margin-bottom:8px;color:#bdbdb4;}

/***** 푸터 *****/
.footer{margin-top:100px;border-top:1px solid var(--border);background:var(--footerBg);}
.wrapper.plain .footer,.wrapper.mypage .footer{margin-top:80px;}
.footer_in{padding:36px 0 60px;}
.foot_top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.foot_link{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.7222rem;color:var(--basic);}
.foot_link a:hover{color:var(--black);}
.foot_link .bold{color:var(--black);}
.foot_info{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:22px;}
.copyright{margin-top:10px;}

/***** 토스트 *****/
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,30px);z-index:var(--z-toast);background:var(--black);color:var(--white);padding:13px 24px;border-radius:var(--borderR100);font-size:.7778rem;font-weight:500;opacity:0;pointer-events:none;transition:all .4s var(--ease);}
.toast.on{opacity:1;transform:translate(-50%,0);}

@keyframes up{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

@media all and (max-width:1680px){}
@media all and (max-width:1500px){
	.tgrid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media all and (max-width:1300px){}
@media all and (max-width:980px){
	.tgrid,.tgrid.col3{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;}
	.gnb,.util_link{display:none;}
	.btn_menu{display:block;}
	.header_in{gap:12px;justify-content:space-between;}
	.header_util{gap:8px;}
	.sub_top{padding-top:44px;}
	.compad{padding:80px 0;}
	.basic_pad{padding:32px 0 90px;}
}
@media all and (max-width:680px){
	.tgrid,.tgrid.col3{gap:22px 12px;}
	.tcard .m{flex-direction:column;gap:2px;}
	.tcard .ov{display:none;}
	.tcard .tag{left:10px;top:10px;}
	.header_util .btn.sm{height:34px;padding:0 14px;}
	.sub_tab{gap:22px;}
	.footer{margin-top:70px;}
}