@charset "UTF-8";

*{box-sizing:border-box}
html,body{height:100%;width:100%;max-width:100%;overflow-x:hidden}
:root{
  --webbg:#464660;
  --bg:#F5F5F9;
  --text:#000;
  --primary:#00C4B9;
  --gray:#CECED9;
  --surface:#EBEBEC;
  --gray-text:#565660;
  --gray30:#898990;
  --gray50:#333340;
  --gray60:#24242D;
  --gray70:#1F1F27;
  --gray80:#0A0A0D;
  --muted:#667085;
  --primary-2:#6e8cff;
  --ring:#d8defa;
  --darkblue:#0e1b4d;
  --shadow:0 10px 24px rgba(20,40,160,.08);
  --radius:16px;
}


body{font-family:'Pretendard Variable','Pretendard','NotoSansKR', Roboto, sans-serif;color:var(--text);line-height:150%;background:var(--bg);}

* {font-family:'Pretendard Variable','Pretendard','NotoSansKR', Roboto, sans-serif;}
a,a:hover,a:visited,a:focus,a:active,p,span,input,textarea,button{font-family:'Pretendard Variable','Pretendard','NotoSansKR', Roboto, sans-serif;}

#wrap{position:relative;margin:0 auto;max-width:500px;height:100svh;background:var(--bg);box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;}



::placeholder{color:#CECED9;}
.btn-wrap{display:flex;align-items:center;justify-content:space-between;gap:8px;}
a.btn-full, button.btn-full{display:block;width:100%;height:53px;line-height:53px;text-align:center;color:#fff;font-size:18px;font-weight:600;background:var(--primary);border:none;border-radius:16px;}
a.btn-full.gray, button.btn-full.gray{background:var(--gray);color:var(--gray-text)}



.fixed-header{position:fixed;top:0;left:0;width:100%;z-index:9999;} 

#container{height:calc(100svh - 98px);overflow-y:auto;}
#container.full{height:100vh;}
#container.fixed{padding-top:56px;}
.page-title{position:relative;display:flex;align-items:center;justify-content:center;height:56px;background:#fff;}
.page-title.bg{background:var(--bg);}
.page-title h2{font-size:18px;font-weight:600;}
.page-title .btn-close{position:absolute;right:20px;top:16px;display:block;width:24px;height:24px;font-size:0;background:url(/resources/img/common/btn_close.svg) no-repeat center center;border:none;}
.page-title .btn-box{position:absolute;right:20px;top:16px;display:block;width:24px;height:24px;font-size:0;background:url(/resources/img/common/icn_chatroom.svg) no-repeat center center;border:none;}
.page-title .btn-back{position:absolute;left:20px;top:16px;display:block;width:24px;height:24px;font-size:0;background:url(/resources/img/common/btn_back.svg) no-repeat center center;border:none;}
.home-title{position:relative;display:flex;flex-direction:column;background:#fff;}
.home-title h2{font-size:24px;font-weight:600;padding:16px 16px 10px;}
.home-title .btn-wrap{padding:12px 16px;}

#footer{position:fixed;bottom:0;left:0;width:100%;height:98px;display:flex;background:#fff;z-index:9999}
#footer a{display:block;width:25%}
#footer a span{display:block;width:100%;padding-top:42px;;text-align:center;font-weight:600;background:no-repeat center 12px;}
#footer a span.home{background-image:url(/resources/img/common/nav_home.svg);}
#footer a span.finder{background-image:url(/resources/img/common/nav_finder.svg);}
#footer a span.chat{background-image:url(/resources/img/common/nav_chat.svg);}
#footer a span.trend{background-image:url(/resources/img/common/nav_trend.svg);}
#footer a span.my{background-image:url(/resources/img/common/nav_my.svg);}
#footer a.active span{color:var(--primary)}
#footer a.active span.home{background-image:url(/resources/img/common/nav_home_on.svg);}
#footer a.active span.finder{background-image:url(/resources/img/common/nav_finder_on.svg);}
#footer a.active span.chat{background-image:url(/resources/img/common/nav_chat_on.svg);}
#footer a.active span.trend{background-image:url(/resources/img/common/nav_trend_on.svg);}
#footer a.active span.my{background-image:url(/resources/img/common/nav_my_on.svg);}


@media all and (min-width:500px) {
  body{background:var(--webbg);}
  #footer{position:absolute;}
  .fixed-header{position:absolute;}
}


.modal-page{display:block;position:fixed;bottom:0;left:0;width:100%;height:100%;background:var(--bg);z-index:9999;transform:translateY(100%);transition:transform 0.3s ease-out;opacity:0;pointer-events:none;}
.modal-page.active{transform:translateY(0);opacity:1;pointer-events:auto;}
.modal-page .page-content{height:calc(100% - 56px);overflow-y:auto;}
.modal-page .page-content .term-content{padding:16px 12px;background:#fff;}
.modal-page .page-content .term-content h4{margin-bottom:10px;font-size:24px;font-weight:600;color:var(--gray80);}
.modal-page .page-content .term-content h5{margin-bottom:10px;font-size:20px;font-weight:600;color:var(--gray80);margin-bottom:16px;}
.modal-page .page-content .term-content p{margin-bottom:10px;font-size:14px;color:var(--gray80);margin-bottom:16px;}
.modal-page .page-content .term-content ul{padding-left:20px;margin-bottom:16px;}
.modal-page .page-content .term-content ul li{font-size:14px;color:var(--gray80);margin-bottom:16px;}

/*로그인*/
.checkbox-list{padding-top:8px;}
.input-check{position:relative;display:flex;align-items:center;padding:8px;gap:8px;border-radius:8px;}
.input-check input[type=checkbox]{display:none}
.input-check label{padding-left:32px;font-size:18px;color:var(--gray30);background:url(/resources/img/common/icn_checkbox.svg) no-repeat left center;background-size:contain;}
.input-check input[type=checkbox]:checked + label{background-image:url(/resources/img/common/icn_checkbox_on.svg);}
.radio-list{padding-top:8px;}
.input-radio{position:relative;display:flex;align-items:center;padding:8px;gap:8px;border-radius:8px;}
.input-radio input[type=radio]{display:none}
.input-radio label{padding-left:32px;font-size:18px;color:var(--gray30);background:url(/resources/img/common/icn_radio.svg) no-repeat left center;background-size:contain;}
.input-radio input[type=radio]:checked + label{background-image:url(/resources/img/common/icn_radio_on.svg);}
.form-section .form-list{display:flex;flex-direction:column;gap:20px;margin-bottom:44px;}
.form-section dl{margin-bottom:8px;padding:12px;min-height:72px;background:#fff;border-radius:12px;}
.form-section dl dt{font-size:14px;font-weight:600;}
.form-section dl dt.req:after{content:'*';color:#FF3134;margin-left:4px;}
.form-section dl.input-only{min-height:auto;}
.form-section dl.input-only dt{display:none;}
.form-section dl dd{position:relative;}
.form-section dl dd .input-item{width:100%;padding:0;font-size:18px;line-height:150%;background:none;border:none;}
.form-section dl dd .valid-btn{position:absolute;right:0;bottom:0;}
.form-section dl dd .valid-btn button{display:block;padding:0 12px;height:26px;line-height:26px;font-size:12px;color:#fff;font-weight:500;border:none;background:var(--gray30);border-radius:16px;}
.form-section .term-list{padding-top:8px;}
.form-section .term-check{position:relative;display:flex;align-items:center;padding:8px;gap:8px;border-radius:8px;}
.form-section .term-check input[type=checkbox]{display:none}
.form-section .term-check label{padding-left:32px;font-size:14px;background:url(/resources/img/common/icn_checkbox.svg) no-repeat left center;background-size:contain;}
.form-section .term-check input[type=checkbox]:checked + label{background-image:url(/resources/img/common/icn_checkbox_on.svg);}
.form-section .term-check.all{padding:8px;gap:8px;border-radius:8px;background:var(--bg);}
.form-section .term-check .btn-open{position:absolute;right:0;top:8px;padding:0;width:24px;height:24px;line-height:24px;font-size:0;border:none;background:url(/resources/img/common/btn_next.svg) no-repeat center center;background-size:contain;}
.form-section p.error-text,
.form-section p.validate-text{display:none;color:#FF3134;font-size:16px;line-height:160%;}
.form-section p.validate-text.done{color:var(--primary);}
.form-section dl.error{border:1px solid #FF3134;border-radius:12px;}
.form-section dl.done{border:1px solid var(--primary);border-radius:12px;}
.form-section .valid-list{display:flex;align-items:center;width:100%;padding-top:8px;gap:2px;}
.form-section .valid-check{display:block;padding-left:26px;height:26px;line-height:26px;font-size:14px;color:var(--gray30);background:url(/resources/img/common/icn_valid.svg) no-repeat 0 center;background-size:contain}
.form-section .valid-check.check{color:var(--primary);background-image:url(/resources/img/common/icn_valid_on.svg)}
.form-section .profile-img{display:flex;flex-direction:column;gap:4px;justify-content: center;align-items:center;}
.form-section .profile-img em{display:block;width:72px;height:72px;background:url(/resources/img/common/icn_photo.svg) no-repeat center center #D9D9D9;border-radius:50%;}
.form-section .profile-img p{font-size:18px;color:var(--gray);}
.form-section .profile-img.uploaded em{background-size:cover;}
.form-section .profile-img.uploaded p{display:none;}

#loginSection{display:flex;align-items:center;width:100%;min-height:calc(100vh - 154px);padding:0 16px;box-sizing:border-box;}
#loginSection >.inner-section{width:100%;}
#loginSection .logo{margin-bottom:20px;font-size:0;}
#loginSection .logo a{display:block;width:120px;height:32px;background:url(/resources/img/common/logo.svg) no-repeat center center;}
#loginSection .login-form p.error-text{display:none;color:#FF3134;font-size:16px;line-height:160%;}
#loginSection .login-form.error p.error-text{display:block;}
#loginSection .login-form.error dl{border:1px solid #FF3134;border-radius:12px;}
#loginSection .btn-wrap{display:block;padding-top:16px;}
#loginSection .btn-wrap .signup-text{padding-top:12px;text-align:center;font-size:16px;line-height:160%;color:var(--gray30);}
#loginSection .btn-wrap .signup-text .link{color:#000;font-weight:600;text-decoration:underline;}


#signupSection{width:100%;padding:0 16px 24px;box-sizing:border-box;}
#signupSection .term-section{padding:16px 12px;}
#signupSection .step-section{margin-bottom:20px;padding:8px 4px;}
#signupSection .step-section ol{display:flex;align-items:center;}
#signupSection .step-section ol li{display:flex;align-items:center;justify-content:center;}
#signupSection .step-section ol li:before{content:'';display:block;width:4px;height:2px;background:var(--gray);}
#signupSection .step-section ol li:after{content:'';display:block;width:4px;height:2px;background:var(--gray);}
#signupSection .step-section ol li:first-child:before{display:none;}
#signupSection .step-section ol li:last-child:after{display:none;}
#signupSection .step-section ol li em{display:block;width:28px;height:28px;line-height:28px;font-size:16px;color:#fff;text-align:center;background:var(--gray);border-radius: 50%;}
#signupSection .step-section ol li.active em{background:var(--primary);}
#signupSection .step-section ol li.active:before{background:var(--primary);}
#signupSection .step-section ol li.active:after{background:var(--primary);}
#signupSection h3{margin-bottom:20px;font-size:24px;font-weight:700;color:var(--gray80);}
#signupDoneSection{display:flex;align-items:center;flex-direction:column;justify-content:center;height:100vh;width:100%;}
#signupDoneSection >.inner-section{width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 16px;}
#signupDoneSection dl{padding-top:108px;text-align:center;background:url(/resources/img/common/icn_round_check.svg) no-repeat center top;}
#signupDoneSection dl dt{margin-bottom:4px;font-size:24px;font-weight:600;color:var(--gray50);}
#signupDoneSection dl dd{font-size:16px;line-height:160%;color:var(--gray30);}
#signupDoneSection .btn-wrap{padding:16px 16px 24px;width:100%;}


/*공통 타이틀*/
.section-title{margin-bottom:16px; }
.section-title h2{font-size:24px;font-weight:600;line-height:150%;}
.section-title h2 a{display:block;width:100%;padding-right:36px;background:url(/resources/img/common/icn_link24.svg) no-repeat right center;background-size:contain;}
.section-title p{font-size:16px;line-height:160%;color:var(--gray-text);}

/* 공통 : 제품카드 */
.product-card{background:#fff;border-radius:12px;overflow:hidden;}
.product-card .thumb{display:block;width:100%;height:168px;font-size:0;background:no-repeat center center;background-size:cover;}
.product-card.side .thumb{height:auto !important;}
.product-card .info{padding:4px 8px;background:#fff;}
.product-card .info .name dt{font-size:12px;font-weight:600}
.product-card .info .name dd{height:48px;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;}
.product-card .info .util{position:relative;padding-top:20px;display:flex;align-items:center;justify-content:space-between;}
.product-card .info .util .progress-bar{position:absolute;left:0;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;}
.product-card .info .util .progress-bar .bar{position:relative;width:calc(100% - 40px);flex-shrink:1;height:8px;border-radius:4px;overflow:hidden;background:var(--gray);}
.product-card .info .util .progress-bar .bar em{position:absolute;left:0;top:0;display:block;height:8px;border-radius:4px;background:var(--primary);}
.product-card .info .util .progress-bar .percent{font-size:12px;font-weight:600;text-align:right;}
.product-card .info .util .left{display:flex;align-items:center;gap:8px;height:24px;}
.product-card .info .util .left button{display:block;width:16px;height:16px;background:no-repeat center center;border:none;font-size:0;background:contain;}
.product-card .info .util .left button.like{background:url(/resources/img/common/icn_heart.svg) center/contain no-repeat;}
.product-card .info .util .left button.like.active{background-image:url(/resources/img/common/icn_heart_on.svg);}
.product-card .info .util .left button.share{background:url(/resources/img/common/icn_share.svg) center/contain no-repeat;}
.product-card .info .util .right{font-size:12px;}
.product-card:hover{box-shadow: 0px 0px 10px 0px var(--gray);}

.product-card.side{overflow:hidden;position:relative;}
.product-card.side .thumb{float:left;width:114px;position:absolute;left:0;top:0;bottom:0;background-size:cover;background-position:center;}
.product-card.side .info{margin-left:114px;padding:4px 8px;}
.product-card.side .info .name dd{font-size:16px;}
.product-card.side .info .desc{font-size:12px;color:var(--gray-text)}
.product-card.side .info .util{padding-top:0;justify-content: end;}

/* MD's PICK 스와이퍼 */
.mdPickSwiper{position:relative;padding:20px 0;overflow:visible;}
.mdPickSwiper .swiper-pagination{position:relative;margin-top:16px;text-align:center;}
.mdPickSwiper .swiper-pagination-bullet{width:8px;height:8px;background:#ccc;opacity:1;margin:0 4px !important;}
.mdPickSwiper .swiper-pagination-bullet-active{background:#000;width:20px;border-radius:4px;}


.product-pager{padding:20px 0;display:flex;align-items:center;justify-content:center;gap:32px;}
.product-pager button{width:24px;height:24px;border:none;background:no-repeat center center;font-size:0;cursor:pointer;}
.product-pager button.prod-prev{background-image:url(/resources/img/common/btn_prev.svg)}
.product-pager button.prod-next{background-image:url(/resources/img/common/btn_next.svg)}
.product-pager .num{display:flex;align-items:center;justify-content:center;gap:4px;font-size:16px;color:var(--gray30);}
.product-pager .prod-current{color:#000;}



.trend-card{padding:16px;border-radius:12px;background:#fff;box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);}
.trend-card dl{margin-bottom:12px;text-align:center;}
.trend-card dl dt{font-size:16px;line-height:160%;font-weight:600;}
.trend-card dl dd{font-size:12px;color:var(--gray-text);}
.trend-card dl dd em{font-style:normal;font-weight:600;}
.trend-card .quiz-list li:first-child{margin-bottom:8px}
.trend-card .trend-item input[type=radio]{display:none}
.trend-card .trend-item label{display:block;height:53px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;width:100%;background:var(--bg);border-radius:8px;cursor:pointer;transition:all 0.2s;border:2px solid transparent;}
.trend-card .trend-item label .text{font-size:14px;color:var(--gray50);}
.trend-card .trend-item label .result{font-size:14px;font-weight:600;color:var(--gray50);display:none;}
/* 답변 전 hover */
.trend-card .quiz-list:not(.answered) .trend-item label:hover{background:#e8f8f7;}
/* 답변 후 - 선택한 항목 */
.trend-card .quiz-list.answered .trend-item.selected.correct label{background:#7BE6DC;}
.trend-card .quiz-list.answered .trend-item.selected.correct label .result{display:block;}
.trend-card .quiz-list.answered .trend-item.selected.incorrect label{background:#FF9EA0;}
.trend-card .quiz-list.answered .trend-item.selected.incorrect label .result{display:block;}
/* 답변 후 - 선택하지 않은 항목 */
.trend-card .quiz-list.answered .trend-item:not(.selected) label{cursor:default;}
.trend-card .quiz-list.answered .trend-item:not(.selected) label .result{display:block;}



/*HOME*/
.main_top{padding:20px 16px;}
.main_top h1.logo{margin-bottom:27px;}
.main_top h1.logo em{display:block;width:120px;height:32px;font-size:0;background:url(/resources/img/common/logo.svg) no-repeat center center;}
.main_top .greet{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px;}
.main_top .greet p{font-size:20px;font-weight:700;}
.main_top .greet p a{font-weight:400;text-decoration:underline}
.main_top .greet .profile{display:block;width:78px;height:78px;font-size:0;background:url(/resources/img/common/none_profile.jpg) no-repeat center center;background-size:cover;border-radius:50%;}
.main_top .chatbot{padding:20px;background:#fff;border-radius:12px;}
.main_top .chatbot .link{margin-bottom:10px;font-size:12px;padding-right:22px;background:url(/resources/img/common/icn_link.svg) no-repeat right 5px center;}
.main_top .chatbot .flex{display:flex;justify-content:space-between;aling-items:center;}
.main_top .chatbot dl dt{margin-bottom:4px;font-size:14px;}
.main_top .chatbot dl dd{font-size:20px;font-weight:700;}
.main_top .chatbot .chat-img{display:block;width:49px;height:49px;font-size:0;background:url(/resources/img/common/chatbot_profile.svg) no-repeat center center;background-size:cover;border-radius:50%;}

/* 트렌드 헤더/페이지 */
.main-trend { padding: 20px 0; }
.main-trend .section-title{padding:0 16px;}
.trendSwiper { position: relative; padding: 20px 0; overflow: visible; }
.trendSwiper .swiper-wrapper { align-items: center; height:307px; gap:10px;}
.trendSwiper .swiper-slide { width: 216px; height: 307px; border-radius: 12px; overflow: hidden; transition: transform 0.4s ease, opacity 0.4s ease; }
.trendSwiper .swiper-slide-active { transform: scale(1) !important; z-index: 2; }
.trendSwiper .swiper-slide-prev,.trendSwiper .swiper-slide-next { opacity: 0.8; transform: scale(0.95) !important; }
.trendSwiper .swiper-slide-active .trend-item p{font-size:22px;}
.trendSwiper .swiper-pagination { position: relative; margin-top: 16px; text-align: center; }
.trendSwiper .swiper-pagination-bullet { width: 8px; height: 8px; background: #ccc; opacity: 1; margin: 0 4px !important; }
.trendSwiper .swiper-pagination-bullet-active { background: #000; width: 20px; border-radius: 4px; }
.trendSwiper .trend-card-link{display:block;width:100%;height:100%;text-decoration:none;color:inherit;}
.trendSwiper .trend-item{position:relative;display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;padding:12px;background:no-repeat center center #ddd;background-size:cover;border-radius:12px;color:var(--gray50);}
.trendSwiper .trend-item p{font-size:20px;font-weight:700;line-height:150%;}
.trendSwiper .trend-item .btn-heart{position:absolute;top:12px;right:12px;width:20px;height:20px;background:url(/resources/img/common/icn_heart.svg) no-repeat center;background-size:contain;border:none;cursor:pointer;padding:0;z-index:10;}
.trendSwiper .trend-item .btn-heart.active{background-image:url(/resources/img/common/icn_heart_on.svg) !important;opacity:1 !important;}
.trendSwiper .trend-item .trend-item-content{position:relative;z-index:1;}
.trendSwiper .trend-item .trend-item-text{font-size:14px;font-weight:500;line-height:150%;color:#fff;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
.trendSwiper .trend-item .trend-item-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--gray50);}
.trendSwiper .trend-item .trend-item-meta .trend-item-like,.trendSwiper .trend-item .trend-item-meta .trend-item-view{display:flex;align-items:center;gap:4px;}
.trendSwiper .trend-item .trend-item-meta .like-icon{display:inline-block;width:14px;height:14px;background:url(/resources/img/common/icn_heart.svg) no-repeat center;background-size:contain;}
.trendSwiper .trend-item .trend-item-meta .view-icon{display:inline-block;width:14px;height:14px;background:url(/resources/img/common/icn_view.svg) no-repeat center;background-size:contain;}
.trendSwiper .trend-item .like-count,.trendSwiper .trend-item .view-count{font-size:12px;font-weight:500;}
.trend-bullets { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.trend-bullets button { width: 6px; height: 6px; border-radius: 50%; border: none; background: #d7d7d7; padding: 0; }
.trend-bullets button.is-active { background: #111; }

/* 카드뉴스 스와이퍼 */
.cardnewsSwiper { position: relative; padding: 20px 0; overflow: visible; }
.cardnewsSwiper .swiper-wrapper { align-items: center; }
.cardnewsSwiper .swiper-slide { width: 318px; height: 404px; border-radius: 12px; overflow: hidden; }
.cardnewsSwiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cardnewsSwiper .swiper-pagination { position: relative; margin-top: 16px; text-align: center; }
.cardnewsSwiper .swiper-pagination-bullet { width: 8px; height: 8px; background: #ccc; opacity: 1; margin: 0 4px !important; }
.cardnewsSwiper .swiper-pagination-bullet-active { background: #000; width: 20px; border-radius: 4px; }

/* 제품 헤더/페이지 */
.main-product { padding: 20px 16px; }
.main-product .category-scroll{margin-bottom:16px;display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:100%;white-space:nowrap;scrollbar-width:none;touch-action:pan-x;}
.main-product .category-scroll::-webkit-scrollbar{display:none;}
.main-product .category-scroll .category-rail{display:inline-flex;gap:8px;flex-wrap:nowrap;white-space:nowrap;min-width:100%;}
.main-product .category-scroll .category{display:inline-block;flex:0 0 auto;min-width:124px;height:29px;line-height:29px;border:1px solid var(--gray) ;background:#fff;padding:0 12px;border-radius:12px;font-size:14px;white-space:nowrap;transition:background .2s,color .2s;}
.main-product .category-scroll .category.active{background:var(--primary);color:#fff;border-color:var(--primary);}
.main-product .product-viewport{position:relative;overflow:hidden;}
.main-product .product-swiper{width:100%;}
.main-product .product-swiper.is-hidden{display:none;}
.main-product .swiper-slide{display: grid; grid-template-rows: repeat(2, auto); gap: 7px; box-sizing: border-box;}
.main-product .card-group{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-rows:repeat(2, auto);gap:7px;}
.main-product .card-group > a{display:block;}

.trend-insight{padding: 20px 16px; }



/*챗봇*/
.chat-section{display:flex;height:calc(100vh - 224px);flex-direction:column;overflow-x:hidden;overflow-y:auto;}
.chat-section.roomlist{height:calc(100vh - 154px);}
.chat-section .message-section{flex:1;padding:26px 16px;}
.chat-section .message{position:relative;width:100%;display:flex;gap:8px;align-items:flex-start;margin-bottom:16px;}
.chat-section .message .avatar{width:52px;height:52px;flex-shrink:0;background:no-repeat center center;background-size:cover;border-radius:50%;}
.chat-section .message .bubble-section{max-width: calc(100% - 60px);display:flex;flex-direction:column;gap:8px;}
.chat-section .message .bubble-section .bubble{padding: 10px;background:#fff;border-radius: 2px 16px 16px 16px;}
.chat-section .message.bot{align-self:flex-start;}
.chat-section .message.bot .avatar{background-image:url(/resources/img/common/icn_avatar.svg)}
.chat-section .message.user{align-self:flex-end;flex-direction:row-reverse;}
.chat-section .message.user .bubble{border-radius: 16px 2px 16px 16px;color:#fff;background:var(--primary)}
.chat-section .message.user .avatar{display:none;}
.chat-section .message .card-section{width: 100% !important;display:flex;flex-direction: column;}
.chat-section .message .card-scroll{max-width:100%;display:flex;flex-direction: row;flex-wrap: nowrap;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;}
.chat-section .message .card-scroll::-webkit-scrollbar {display:none;}
.chat-section .message .card-scroll.bg{padding:12px;background:#fff;border-radius:12px;}
.chat-section .message .card-scroll .product-card{flex:0 0 168px;width:168px;scroll-snap-align:start;overflow:hidden;transition:transform .2s ease;}
.chat-section .message .card-scroll .photo-card{flex:0 0 108px;width:108px;scroll-snap-align:start;overflow:hidden;transition:transform .2s ease;}
.chat-section .message .card-scroll .photo-card dl{width:100%;height:155px;border-radius:8px;overflow:hidden;}
.chat-section .message .card-scroll .photo-card dl dt{width:100%;height:127px;background:url(/resources/img/common/sample_product.jpg) no-repeat center center;background-size:cover;}
.chat-section .message .card-scroll .photo-card dl dd{padding:8px 0;text-align:center;color:var(--gray50);font-size:14px;}
.chat-section .message .select-section{width:100%;padding:16px;background:#fff;border-radius: 16px;}
.chat-section .message .select-section p{margin-bottom:7px;font-size:12px;font-weight:500;color:var(--gray-text);}
.chat-section .message .select-section .select-list{width:100%;display:flex;flex-direction:column;gap:7px;}
.chat-section .message .select-section .select-list li button{display:block;padding:8px;width:100%;font-size:14px;color:var(--gray-text);text-align:center;border:none;background:var(--bg);border-radius:8px;}
.chat-section .wide-list{display:flex;flex-direction:column;gap:16px;}
.chat-section .wide-section{width:100%;background:#fff;border-radius: 12px;}
.chat-section .wide-section.product{padding:20px 12px;}
.chat-section .wide-section.product .product-info{width:100%;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.chat-section .wide-section.product .product-info .thumb{display:block;width:70px;height:70px;backgorund:no-repeat center center;background-size:cover;border-radius:8px;}
.chat-section .wide-section.product .product-info dl{flex:1;}
.chat-section .wide-section.product .product-info dl dt{font-size:14px;font-weight:600;color:var(--gray70);}
.chat-section .wide-section.product .product-info dl dd{font-size:16px;line-height:160%;color:var(--gray80);}
.chat-section .wide-section.product .detail-list{display:flex;flex-direction:column;gap:8px;}
.chat-section .wide-section.product .detail-list li{width:100%;display:flex;align-items:center;min-height:80px;padding:4px 8px;border-radius: 8px;background:var(--bg);}
.chat-section .wide-section.product .detail-list dl dt{font-size:14px;font-weight:700;color:var(--gray50);}
.chat-section .wide-section.product .detail-list dl dd{font-size:14px;color:var(--gray80);}
.chat-section .wide-section.guide{padding:12px;}
.chat-section .wide-section.guide h3{padding-bottom:8px;margin-bottom:8px;font-size:16px;font-weight:600;color:var(--gray80);border-bottom:1px solid var(--gray)}
.chat-section .wide-section.guide .detail-list{display:flex;flex-direction:column;gap:8px;}
.chat-section .wide-section.guide .detail-list dt{display:inline-block;margin-bottom:4px;padding:0 10px;font-size:12px;height:22px;line-height:22px;color:#fff;background:var(--gray50);border-radius:11px;}
.chat-section .wide-section.guide .detail-list dd{font-size:14px;color:var(--gray50);}
.chat-section .room-section .total-count{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#fff;}
.chat-section .room-section .total-count p{font-size:18px;font-weight:600;color:var(--gray-text);}
.chat-section .room-section .total-count p span{color:var(--primary);}
.chat-section .room-section .total-count button{width:auto;height:auto;padding:0;border:none;font-weight:600;font-size:18px;background:none;color:var(--gray50);cursor:pointer;}
.chat-section .room-section .total-count .input-check{padding:0;}
.chat-section .room-section .room-list{display:flex;flex-direction:column;gap:16px;padding:20px 16px;background:var(--bg);}
.chat-section .room-section .room-list li{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 12px;min-height:80px;border-radius: 8px;background:#fff;position:relative;}
.chat-section .room-section .room-list dl{flex:1;}
.chat-section .room-section .room-list dl dt{font-size:16px;font-weight:600;color:var(--gray50);}
.chat-section .room-section .room-list dl dd{font-size:14px;color:var(--gray30);}
.chat-section .room-section .room-list .btn-move{width:28px;height:28px;padding:0;border:none;font-weight:600;font-size:0;background:url(/resources/img/common/btn_next.svg) no-repeat center center;cursor:pointer;}
.chat-section .room-section .room-list .input-check label{font-size:0;}
.chat-section .room-section .btn-wrap{padding:16px;}
.chat-section .typing-indicator{padding-left:60px;display:none;align-items:center;justify-content:center;margin:8px 0;}
.chat-section .typing-indicator .typing-dots{display:flex;gap:4px;}
.chat-section .typing-indicator .typing-dots span{width:8px;height:8px;background:var(--gray);border-radius:50%;animation:blink 1s infinite;}
.chat-section .chat-input{position:absolute;left:0;bottom:98px;width:100%;display:flex;align-items:center;padding:16px;gap:19px;background:#fff;}
.chat-section .chat-input input{flex:1;border:none;height:38px;color:var(--gray-text);background:var(--bg);border-radius:12px;padding:8px 12px;}
.chat-section .chat-input button{width:24px;height:24px;font-size:0;border:none;background:url(/resources/img/common/icn_send.svg) no-repeat center center;background-size:contain;}
.chat-section .routine-list .step-section{display:flex;align-items:center;gap:8px;}
.chat-section .routine-list .step-section em{padding:0 8px;height:26px;line-height:26px;background:var(--gray-text);color:#fff;font-size:12px;font-weight:600;border-radius:13px;}
.chat-section .routine-list .step-section p{font-size:16px;font-weight:600;line-height:26px;color:var(--gray50);}

/* Finder */
#finderSection .inner-section{padding:24px 16px;}
#finderSection .product-list{display:flex;flex-wrap: wrap;gap:16px;}
#finderSection .product-list > a {flex: 0 0 calc(50% - 8px);max-width:calc(50% - 8px);}
#finderSection .category-scroll{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:100%;white-space:nowrap;scrollbar-width:none;touch-action:pan-x;}
#finderSection .category-scroll::-webkit-scrollbar{display:none;}
#finderSection .category-scroll .category-rail{padding:0 16px;display:inline-flex;gap:16px;flex-wrap:nowrap;white-space:nowrap;min-width:100%;background:#fff;}
#finderSection .category-scroll .category-rail a{display:inline-block;flex:0 0 auto;padding:8px 0 ;font-size:16px;font-weight:600;color:var(--gray30);text-align:center;transition:background .2s,color .2s;}
#finderSection .category-scroll .category-rail a.active{color:var(--gray80);font-weight:600;border-bottom:2px solid var(--gray80);}
#finderSection .section-title{display:flex;align-items:center;justify-content:space-between;}
#finderSection .section-title h2{font-size:24px;font-weight:700;}
#finderSection .section-title .order-select{display:flex;align-items:center;justify-content:flex-end;}
#finderSection .section-title .order-select select{width:100%;height:40px;border:1px solid var(--gray);border-radius:8px;padding:0 12px;font-size:14px;color:var(--gray-text);}
#finderSection .section-title .order-select select option{font-size:14px;color:var(--gray-text);}
#finderSection .section-title .order-select select option:checked{background:var(--primary);color:#fff;}
#finderSection .section-title .order-select select option:hover{background:var(--primary);color:#fff;}
#finderSection .section-title .order-select select option:active{background:var(--primary);color:#fff;}

/* Chemistry Finder */
#chemistrySection .inner-section{padding:24px 16px;}
#chemistrySection .inner-section.routine-section{padding-top:0;}

/* 케미 메뉴 카드 */
#chemistrySection .chemistry-menu{display:flex;gap:12px;margin-bottom:20px;}
#chemistrySection .chemistry-menu .menu-card{display:flex;flex-direction:column;align-items:start;justify-content:center;flex:1;padding:20px 8px;background:#fff;border-radius:12px;border:1px solid #EBEBEC;transition:all 0.2s;}
#chemistrySection .chemistry-menu .menu-card:hover{border-color:var(--primary);background:#ECFEFF;}
#chemistrySection .chemistry-menu .menu-card .icon{display:block;width:24px;height:24px;margin-bottom:8px;background:no-repeat center center;background-size:contain;}
#chemistrySection .chemistry-menu .menu-card .icon.ingredient{background-image:url(/resources/img/common/icn_ingredient.svg);}
#chemistrySection .chemistry-menu .menu-card .icon.product{background-image:url(/resources/img/common/icn_product.svg);}
#chemistrySection .chemistry-menu .menu-card .icon.routine{background-image:url(/resources/img/common/icn_routine.svg);}
#chemistrySection .chemistry-menu .menu-card p{font-size:16px;font-weight:500;color:var(--gray50);}

/* 케미 검색창 */
#chemistrySection .chemistry-search{position:relative;display:flex;align-items:center;padding:12px;background:#fff;border-radius:12px;border:1px solid #EBEBEC;}
#chemistrySection .chemistry-search input{flex:1;border:none;background:transparent;font-size:16px;color:var(--gray50);}
#chemistrySection .chemistry-search input::placeholder{color:var(--gray-text);}
#chemistrySection .chemistry-search .btn-search{width:24px;height:24px;border:none;background:url(/resources/img/common/icn_search.svg) no-repeat center center;background-size:contain;cursor:pointer;}

/* 저장된 루틴 */
#chemistrySection .routine-list{display:flex;flex-direction:column;gap:12px;padding:12px;background:#fff;border-radius:12px;}
#chemistrySection .routine-list li a{display:flex;align-items:center;justify-content:space-between;padding:4px 0;line-height:160%;}
#chemistrySection .routine-list li .routine-title{font-size:16px;font-weight:500;color:var(--gray50);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px;}
#chemistrySection .routine-list li .btn-more{width:24px;height:24px;border:none;background:url(/resources/img/common/icn_more.svg) no-repeat center center;background-size:contain;cursor:pointer;}
#chemistrySection .routine-list li .date{font-size:12px;color:var(--gray-text);font-weight:500;}

#routineSection .inner-section{padding:16px 20px;}
#routineSection .section-title{display:flex;justify-content: space-between;}
#routineSection .section-title h3{font-size:18px;font-weight:600;color:var(--gray80)}
#routineSection .section-title .btn-delete{padding:0;font-size:14px;color:var(--gray30);text-decoration:underline;background:none;border:none;}
#routineSection .routine-list li{margin-bottom:16px;}
#routineSection .routine-list .step-section{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
#routineSection .routine-list .step-section em{padding:0 8px;height:26px;line-height:26px;background:var(--gray-text);color:#fff;font-size:12px;font-weight:600;border-radius:13px;}
#routineSection .routine-list .step-section p{font-size:16px;font-weight:600;line-height:26px;color:var(--gray50);}
#routineSection .simple-product a{padding:8px;background:#fff;border-radius:12px;}


/* Search Section */
#searchSection{padding-top:8px;min-height:calc(100vh - 56px);padding:28px 16px;}
#searchSection .search-box{display:flex;align-items:center;padding:12px 8px;border-bottom:1px solid var(--gray30);}
#searchSection .search-box input{flex:1;border:none;background:transparent;font-size:18px;color:var(--gray60);}
#searchSection .search-box input::placeholder{color:var(--gray30);}
#searchSection .search-box .btn-search{width:24px;height:24px;border:none;background:url(/resources/img/common/icn_search.svg) no-repeat center center;background-size:contain;cursor:pointer;}

#searchSection .search-history{padding:20px 8px;}
#searchSection .search-history h3{font-size:16px;font-weight:600;color:var(--gray50);margin-bottom:8px;}
#searchSection .history-list{display:flex;flex-direction:column;}
#searchSection .history-list li{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--surface);cursor:pointer;}
#searchSection .history-list li:last-child{border-bottom:none;}
#searchSection .history-list li .keyword{flex:1;font-size:16px;color:var(--gray30);}
#searchSection .history-list li .history-type{display:inline-block;margin-right:8px;padding:2px 8px;font-size:11px;color:var(--primary);background:#ECFEFF;border-radius:4px;}
#searchSection .history-list li .btn-delete{width:24px;height:24px;padding:0;border:none;background:url(/resources/img/common/btn_close_gray.svg) no-repeat center center;background-size:contain;cursor:pointer;}

#searchSection .search-result{padding:20px 16px;}
#searchSection .search-result h3{font-size:16px;font-weight:600;color:var(--gray50);margin-bottom:16px;}
#searchSection .result-list{display:flex;flex-direction:column;gap:12px;}
#searchSection .result-list li{padding:12px;background:var(--bg);border-radius:12px;cursor:pointer;}
#searchSection .result-list li .product-name{font-size:16px;font-weight:500;color:var(--gray50);}
#searchSection .result-list li .product-brand{font-size:14px;color:var(--gray30);}

/* 자동완성 리스트 */
#searchSection .autocomplete-list{padding:20px 0;}
#searchSection .autocomplete-list .autocomplete-items{display:flex;flex-direction:column;}
#searchSection .autocomplete-list .autocomplete-items li{display:flex;flex-direction:column;padding:6px 0;cursor:pointer;}
#searchSection .autocomplete-list .autocomplete-items li:last-child{border-bottom:none;}
#searchSection .autocomplete-list .autocomplete-items li .item-name{font-size:16px;line-height:160%;color:var(--gray30);}
#searchSection .autocomplete-list .autocomplete-items li .item-name .highlight{font-style:normal;color:var(--primary);font-weight:600;}
#searchSection .autocomplete-list .autocomplete-items li .item-type{display:inline-block;margin-left:8px;padding:2px 8px;font-size:11px;color:var(--primary);background:#ECFEFF;border-radius:4px;}
#searchSection .autocomplete-list .autocomplete-items li .item-sub{font-size:13px;color:var(--gray30);}
#searchSection .autocomplete-list .empty-message{padding:20px 0;text-align:center;color:var(--gray30);}

/* 케미파인더 상세페이지 */
#detailSection.finder-chemistry .detail-header{margin-bottom:24px;padding:28px 16px;background:#fff;}
#detailSection.finder-chemistry .detail-header h3{font-size:20px;font-weight:600;line-height:150%;color:var(--gray80);}
#detailSection.finder-chemistry .detail-block.partner{margin-bottom:0;border-bottom:1px solid var(--bg);}
#detailSection.finder-chemistry .detail-block.partner .partner-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:8px;}
#detailSection.finder-chemistry .detail-block.partner .partner-tags .tag{display:inline-block;padding:8px 16px;font-size:14px;color:var(--primary);background:var(--bg);border-radius:20px;}
#detailSection.finder-chemistry .bar-charts{display:flex;gap:70px;min-width:48px;align-items: center;justify-content:center;padding-top:20px;}
#detailSection.finder-chemistry .bar-chart-item{display:flex;flex-direction:column;align-items:center;}
#detailSection.finder-chemistry .bar-chart-item .chart-label{font-size:16px;color:var(--gray50);margin-bottom:4px;}
#detailSection.finder-chemistry .bar-chart-item .chart-desc{font-size:12px;color:var(--gray-text);line-height:140%;text-align:center;margin-top:4px;max-width:100px;}
#detailSection.finder-chemistry .bar-chart-item .chart-bar{position:relative;display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;width:48px;height:100px;margin-bottom:8px;}
#detailSection.finder-chemistry .bar-chart-item .chart-bar .chart-value{position:absolute;left:50%;top:0;z-index:10;margin-left:-5px;color:var(--gray80);font-size:12px;}
#detailSection.finder-chemistry .bar-chart-item .bar-segment{width:100%;height:20px;background:var(--bg);border-bottom:1px solid var(--gray);}
#detailSection.finder-chemistry .bar-chart-item .bar-segment:first-child{border-bottom:none;}
#detailSection.finder-chemistry .bar-chart-item .bar-segment:last-child{border-radius:16px 16px 0 0;}
#detailSection.finder-chemistry .bar-chart-item .bar-segment.filled{background:var(--primary);border-color:var(--primary);}
#detailSection.finder-chemistry .bar-chart-item .allergy-badge{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:32px;padding:0 16px;font-size:14px;font-weight:600;border-radius:16px;box-sizing:border-box;}
#detailSection.finder-chemistry .bar-chart-item .allergy-badge.on{background:#FFE5E5;color:#E63946;}
#detailSection.finder-chemistry .bar-chart-item .allergy-badge.off{background:var(--bg);color:var(--gray50);}
#detailSection.finder-chemistry .detail-block.sensory .bar-charts{gap:32px;}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide{margin-top:32px;padding-top:24px;border-top:1px solid var(--bg);}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide .guide-title{font-size:16px;font-weight:600;color:var(--gray80);margin-bottom:20px;}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide .guide-content{display:flex;flex-direction:column;gap:24px;}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide .guide-item{display:flex;flex-direction:column;gap:12px;}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide .guide-item-title{font-size:14px;font-weight:600;color:var(--gray80);line-height:150%;}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide .guide-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide .guide-list li{font-size:13px;color:var(--gray-text);line-height:160%;}
#detailSection.finder-chemistry .detail-block.sensory .sensory-guide .guide-list li strong{font-weight:600;color:var(--gray80);margin-right:4px;}



/* 확인 모달 */
.confirm-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;}
.confirm-modal .confirm-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}

/* 공유 모달 */
.share-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;display:flex;align-items:center;justify-content:center;}
.share-modal .share-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.share-modal .share-box{position:relative;background:#fff;border-radius:16px;padding:20px;min-width:200px;box-shadow:0 4px 20px rgba(0,0,0,0.15);z-index:1;}
.share-modal .share-list{list-style:none;margin:0;padding:0;}
.share-modal .share-list li{margin-bottom:12px;}
.share-modal .share-list li:last-child{margin-bottom:0;}
.share-modal .share-item{display:flex;align-items:center;text-decoration:none;color:var(--gray80);font-size:16px;padding:8px 0;transition:opacity 0.2s;}
.share-modal .share-item:hover{opacity:0.7;}
.share-modal .share-icon{width:24px;height:24px;margin-right:12px;background-size:contain;background-repeat:no-repeat;background-position:center;flex-shrink:0;display:inline-block;}
.share-modal .share-icon.line{background-image:url(/resources/img/common/icn_line.svg);}
.share-modal .share-icon.instagram{background-image:url(/resources/img/common/icn_instagram.svg);}
.share-modal .share-icon.twitter{background-image:url(/resources/img/common/icn_twitter.svg);}
.share-modal .share-icon.facebook{background-image:url(/resources/img/common/icn_facebook.svg);}
.share-modal .share-icon.copy{background-image:url(/resources/img/common/icn_link.svg);}
/* 아이콘 파일이 없는 경우 텍스트로 대체 */
.share-modal .share-icon:not([style*="background-image"]){width:auto;height:auto;background:none;font-size:20px;line-height:1;}
.share-modal .share-icon.line:not([style*="background-image"])::before{content:"💬";}
.share-modal .share-icon.instagram:not([style*="background-image"])::before{content:"📷";}
.share-modal .share-icon.twitter:not([style*="background-image"])::before{content:"🐦";}
.share-modal .share-icon.facebook:not([style*="background-image"])::before{content:"f";font-weight:bold;color:#1877f2;}
.share-modal .share-icon.copy:not([style*="background-image"])::before{content:"🔗";}
.share-modal .share-text{font-size:16px;font-weight:500;color:var(--gray80);}
.confirm-modal .confirm-box{position:relative;width:calc(100% - 40px);max-width:320px;padding:20px;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,0.15);}
.confirm-modal .confirm-title{font-size:20px;font-weight:700;line-height:150%;color:var(--gray70);text-align:center;}
.confirm-modal .confirm-message{font-size:16px;color:var(--gray30);line-height:160%;margin-bottom:16px;text-align:center;}
.confirm-modal .confirm-buttons{display:flex;gap:12px;}
.confirm-modal .confirm-buttons button{flex:1;height:50px;line-height:50px;text-align:center;font-size:16px;font-weight:600;border:none;border-radius:16px;cursor:pointer;}
.confirm-modal .confirm-buttons .btn-cancel{background:var(--bg);color:var(--gray-text);}
.confirm-modal .confirm-buttons .btn-confirm{background:var(--primary);color:#fff;}
/* Alert 모달 (확인 버튼만 있는 경우) */
.confirm-modal .confirm-buttons:has(.btn-confirm:only-child) .btn-confirm{width:100%;}


/* Finder Detail */
#detailSection{padding-bottom:96px;}
#detailSection .inner-section{}

#detailSection .detail-hero{overflow:hidden;}
#detailSection .detail-hero-img{width:100%;height:347px;background:url(/resources/img/common/sample_product.jpg) no-repeat center center;background-size:cover;}

#detailSection .detail-header{padding:12px 16px 20px;margin-bottom:24px;background:#fff;}
#detailSection .detail-header .detail-tags{display:flex;gap:8px;margin-bottom:8px;}
#detailSection .detail-header .detail-tags .tag{display:inline-flex;align-items:center;min-width:58px;height:24px;line-height:24px;padding:0 12px;justify-content:center;font-size:12px;font-weight:600;background:#ECFEFF;color:var(--primary);box-sizing:border-box;}

#detailSection .detail-header .detail-title .brand{font-size:14px;font-weight:600;color:var(--gray30);}
#detailSection .detail-header .detail-title .name{font-size:18px;font-weight:600;color:var(--gray80);}
#detailSection .detail-header .detail-title .price{font-size:14px;color:var(--gray50);margin-bottom:16px;}
#detailSection .detail-header .detail-title .price em{font-size:18px;font-weight:600;}

#detailSection .detail-meta{display:flex;flex-direction:column;gap:2px;border-radius:16px;font-size:13px;}
#detailSection .detail-meta dl{display:flex;align-items:flex-start;width:100%;}
#detailSection .detail-meta dt{width:88px;font-size:14px;color:var(--gray30);}
#detailSection .detail-meta dd{flex:1;font-size:14px;color:var(--gray-text);}

#detailSection .detail-matching{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#fff;border-radius:16px;font-size:13px;}
#detailSection .detail-matching dl{display:flex;flex-direction:column;width:100%;}
#detailSection .detail-matching dt{width:100%;font-size:14px;color:var(--gray30);}
#detailSection .detail-matching dd{display:flex;width:100%;font-size:14px;color:var(--gray-text);}
#detailSection .detail-matching dd .percent{width:170px;}
#detailSection .detail-matching dd .percent em{font-weight:600;}
#detailSection .detail-matching .progress-bar{flex:1;display:flex;align-items:center;}
#detailSection .detail-matching .progress-bar .bar{position:relative;width:100%;flex-shrink:1;height:8px;border-radius:4px;overflow:hidden;background:var(--gray);}
#detailSection .detail-matching .progress-bar .bar em{position:absolute;left:0;top:0;display:block;height:8px;border-radius:4px;background:var(--primary);}


#detailSection .detail-block{margin-bottom:24px;padding:18px 16px;background:#fff;}
#detailSection .detail-block .section-title{font-size:20px;line-height:150%;font-weight:600;margin-bottom:12px;color:var(--gray50);}
#detailSection .detail-block .detail-text{font-size:16px;line-height:160%;color:var(--gray30);margin-bottom:4px;}
#detailSection .detail-block .detail-text:last-child{margin-bottom:0;}


#detailSection .detail-block-header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#detailSection .detail-block-header .label{font-size:14px;color:var(--gray60);margin-bottom:4px;line-height:150%;}
#detailSection .detail-block-header .subtitle{font-size:20px;font-weight:600;color:var(--gray80);line-height:150%;}


#detailSection .detail-block.summary{text-align:center;}
#detailSection .detail-block.summary .section-title{height:57px;line-height:57px;text-align:center;position:relative;}
#detailSection .detail-block.summary .section-title::before{content:'';display:inline-block;margin-right:8px;width:39px;height:57px;font-size:0;background:url(/resources/img/common/img_avatar_sm.png) no-repeat center center;background-size:cover;vertical-align:middle;}

#detailSection .detail-block.matching{padding:12px 20px;}

#detailSection .match-circle{width:80px;height:80px;border-radius:50%;position:relative;overflow:hidden;background:#E6FAFA;display:flex;align-items:center;justify-content:center;}
#detailSection .match-circle .percent{position:relative;z-index:2;font-size:18px;font-weight:700;color:#333340;}

#detailSection .match-wave {background-size: 200px 60px;background-position: left 0px bottom -40px;background-repeat: repeat-x;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 62' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C25 10 75 30 100 20 L100 62 L0 62 Z' fill='%234EDBD0'/%3E%3C/svg%3E");animation: wave 10s both linear infinite}

@keyframes wave {
  0% {
      background-position: left 0px bottom 0px;
  }
  50% { 
      background-position: left 500px bottom 0px;
  }
  100% {
      background-position: left 0px bottom 0px;
  }
}
#detailSection .detail-block.safety{padding:0 16px;}
#detailSection .detail-block.safety .detail-block-header{padding:20px 0 24px;}
#detailSection .safety-badge{width:62px;height:62px;position:relative;display:flex;align-items:center;justify-content:center;}
#detailSection .safety-circle{width:100%;height:100%;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;border:4px solid var(--gray)}
#detailSection .safety-circle .level{position:relative;z-index:1;font-size:14px;font-weight:700;color:var(--gray-text);}
#detailSection .safety-circle.safe{border-color:var(--primary);}
#detailSection .safety-circle.normal{border-color:#FFBC46}
#detailSection .safety-circle.warning{border-color:#FF3134}

#detailSection .safety-bar{margin-top:10px;width:100%;height:6px;border-radius:999px;background:#F1F1F5;overflow:hidden;}
#detailSection .safety-bar-fill{height:100%;background:linear-gradient(90deg,#22C55E,#FACC15);}

#detailSection .detail-accordion{padding-top:12px 0;}
#detailSection .detail-accordion .accordion-item{padding:12px 0;overflow:hidden;}
#detailSection .detail-accordion .accordion-header{width:100%;padding:0;display:flex;align-items:center;justify-content:space-between;border:none;background:none;font-size:18px;font-weight:600;color:var(--gray50);}
#detailSection .detail-accordion .accordion-header span{text-align:left;}
#detailSection .detail-accordion .accordion-header span em{font-size:12px;font-weight:400;color:var(--gray50);display:block;margin-top:4px;}
#detailSection .detail-accordion .accordion-body{display:none;padding:8px;}
#detailSection .detail-accordion .accordion-body p{font-size:14px;color:#676767;line-height:140%;}
#detailSection .detail-accordion .accordion-item.open .accordion-body{display:block;}
#detailSection .detail-accordion .accordion-item .icon{display:block;width:24px;height:24px;background:url(/resources/img/common/icn_accordion.svg) no-repeat center center;background-size:contain;}

#detailSection .ingredient-list{display:flex;flex-direction:column;gap:13px;margin-top:8px;}
#detailSection .ingredient-list dl{display:flex;flex-direction:column;gap:2px;width:100%;padding-bottom:13px;border-bottom:1px solid var(--gray);}
#detailSection .ingredient-list dt{font-size:18px;font-weight:600;color:var(--gray50);}
#detailSection .ingredient-list dd{font-size:14px;color:var(--gray50);} 
#detailSection .ingredient-list dl:last-child{padding-bottom:0;border-bottom:none;}
#detailSection .ingredient-list .tit{font-weight:600;font-size:14px;}


#detailSection .ingredient-detail-list{display:flex;flex-direction:column;gap:20px;margin-top:8px;}
#detailSection .ingredient-detail-item{padding-bottom:13px;border-bottom:1px solid var(--gray);}
#detailSection .ingredient-detail-item:last-child{padding-bottom:0;border-bottom:0;}
#detailSection .ingredient-detail-item .ingredient-name{font-size:18px;font-weight:600;color:var(--gray50);}
#detailSection .ingredient-detail-item dl{display:flex;flex-direction:column;gap:4px;padding-top:4px;}
#detailSection .ingredient-detail-item dt{font-size:14px;font-weight:600;color:var(--gray50);margin-top:2px;}
#detailSection .ingredient-detail-item dt:first-of-type{margin-top:0;}
#detailSection .ingredient-detail-item dd{font-size:13px;color:var(--gray-text);line-height:1.5;}
#detailSection .ingredient-detail-item dd p{margin:2px 0;}

#detailSection .detail-block.stage .section-title{font-size:12px;font-weight:600;color:#fff;margin-bottom:8px;padding:0 12px;height:26px;line-height:26px;border-radius:13px;background:var(--gray50);display:inline-block;}
#detailSection .detail-block.stage .subtitle{font-size:12px;color:var(--gray-text);margin-bottom:20px;}

#detailSection .stage-chart{display:flex;justify-content:space-between;gap:24px;margin-top:4px;}
#detailSection .stage-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;border:none;background:none;padding:0;cursor:pointer;}
#detailSection .stage-pill{position:relative;width:48px;height:100px;border-radius:16px 16px 0 0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;}
#detailSection .stage-score{position:absolute;top:9px;left:0;width:100%;padding:0;display:block;text-align:center;font-size:12px;color:var(--gray80);background:none;border:none;text-decoration:underline;z-index:1;}
#detailSection .stage-item .bar{position:absolute;bottom:0;left:0;width:100%;background:var(--primary);}
#detailSection .stage-label{font-size:16px;line-height:160%;color:var(--gray50);}

#detailSection .stage-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;align-items:center;justify-content:center;pointer-events:none;}
#detailSection .stage-modal.open{display:flex;}
#detailSection .stage-modal-content{position:relative;width:calc(100% - 48px);max-width:360px;max-height:calc(100vh - 80px);border-radius:18px;background:transparent;box-shadow:0 8px 24px rgba(0,0,0,0.25);overflow-y:auto;pointer-events:auto;}
#detailSection .stage-modal-content::-webkit-scrollbar{width:4px;}
#detailSection .stage-modal-content::-webkit-scrollbar-track{background:transparent;}
#detailSection .stage-modal-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border-radius:2px;}
#detailSection .stage-modal-card{background:#fff;border-radius:16px;padding:16px 20px 20px;box-shadow:0 8px 24px rgba(0,0,0,0.25);}
#detailSection .stage-modal-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
#detailSection .stage-modal-chip{display:inline-flex;align-items:center;justify-content:center;padding:4px 14px;border-radius:999px;background:var(--gray80);color:#fff;font-size:12px;font-weight:600;}
#detailSection .stage-modal-card-close{width:24px;height:24px;border:none;background:none;font-size:18px;line-height:24px;color:var(--gray60);cursor:pointer;padding:0;}
#detailSection .stage-modal-card-desc{font-size:14px;font-weight:600;color:var(--gray80);margin-bottom:16px;line-height:160%;}
#detailSection .stage-modal-card-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;}
#detailSection .stage-modal-card-list li{font-size:14px;color:var(--gray60);line-height:160%;display:flex;align-items:flex-start;gap:8px;}
#detailSection .stage-modal-card-list li .score{color:var(--gray80);font-weight:600;flex-shrink:0;}
#detailSection .btn-wrap{padding:16px;}

/* 마이페이지 */
#mypageSection .inner-section{background:#fff;}
#mypageSection .user-profile{position:relative;padding:24px 20px;}
#mypageSection .profile-card{display:flex;align-items:center;gap:16px;margin-bottom:20px;}
#mypageSection .profile-img{position:relative;width:80px;height:80px;border-radius:50%;background:#fff;flex-shrink:0;}
#mypageSection .profile-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
#mypageSection .profile-img.clickable{cursor:pointer;}
#mypageSection .profile-img .profile-edit-icon{position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;background:#fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>') center/14px no-repeat;box-shadow:0 1px 4px rgba(0,0,0,0.2);}
#mypageSection .profile-info{display:flex;flex-direction:column;gap:4px;}
#mypageSection .profile-info .cosine-day{font-size:12px;color:var(--gray60);font-weight:700;}
#mypageSection .profile-info .cosine-day em{color:var(--primary);}
#mypageSection .profile-info .user-nickname{font-size:20px;font-weight:700;color:var(--gray80);}
#mypageSection .profile-info .user-detail{font-weight:normal;font-size:16px;color:var(--gray60);}
#mypageSection .btn-chat-history{display:flex;align-items:center;gap:4px;width:100%;font-size:16px;color:var(--gray80);text-decoration:none;}
#mypageSection .btn-chat-history em{color:var(--primary);font-weight:600;}
#mypageSection .btn-chat-history::after{content:'';width:16px;height:16px;background:url(/resources/img/common/icn_arrow_right.svg) center/contain no-repeat;}
#mypageSection .btn-logout{position:absolute;right:32px;bottom:16px;font-size:12px;color:var(--gray50);text-decoration: underline;}

#mypageSection .mypage-tab{border-bottom:1px solid var(--gray);}
#mypageSection .mypage-tab ul{display:flex;}
#mypageSection .mypage-tab li{flex:1;}
#mypageSection .mypage-tab li a{display:block;text-align:center;padding:16px 0;font-size:16px;color:var(--gray60);text-decoration:none;position:relative;}
#mypageSection .mypage-tab li.active a{color:var(--gray80);font-weight:600;}
#mypageSection .mypage-tab li.active a::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--gray80);}

#mypageSection .timeline-item{padding:20px 16px;border-bottom:1px solid var(--gray);}
#mypageSection .timeline-item:last-child{border-bottom:none;}
#mypageSection .timeline-date{font-size:12px;color:var(--gray30);}
#mypageSection .timeline-content dl{margin-bottom:8px;}
#mypageSection .timeline-content dt{font-size:16px;font-weight:600;color:var(--gray80);}
#mypageSection .timeline-content dd{font-size:14px;color:var(--gray60);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#mypageSection .btn-detail{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--gray30);text-decoration:none;}
#mypageSection .btn-detail::after{content:'';width:12px;height:12px;background:url(/resources/img/common/icn_arrow_right.svg) center/contain no-repeat;}

/* 연구일지 */
#mypageSection .diary-section{padding:12px 16px;}
#mypageSection .diary-title{font-size:18px;font-weight:600;color:var(--gray50);line-height:150%;margin-bottom:10px;}
#mypageSection .diary-bubble{display:flex;align-items:center;gap:8px;margin-bottom:24px;}
#mypageSection .diary-bubble .bubble-icon{width:52px;height:52px;background:url(/resources/img/common/chatbot_profile.svg) no-repeat center center;flex-shrink:0;background-size:contain;}
#mypageSection .diary-bubble p{padding:10px;font-size:14px;color:var(--gray80);background:var(--bg);border-radius: 2px 16px 16px 16px;flex:1;}

#mypageSection .diary-list{position:relative;display:flex;flex-direction:column;gap:20px;}
#mypageSection .diary-list:before{content:"";position:absolute;left:12px;top:0;background:var(--primary);display:block;width:3px;height:100%;}
#mypageSection .diary-item{position:relative;display:flex;gap:12px;}
#mypageSection .diary-num{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#mypageSection .diary-content{flex:1;}
#mypageSection .diary-content h4{font-size:16px;line-height:26px;font-weight:600;color:var(--gray80);margin-bottom:8px;}
#mypageSection .diary-content > p{font-size:14px;color:var(--gray60);line-height:160%;}
#mypageSection .diary-content ul{display:flex;flex-direction:column;gap:4px;}
#mypageSection .diary-content ul li{font-size:14px;color:var(--gray60);line-height:160%;padding-left:12px;position:relative;}
#mypageSection .diary-content ul li::before{content:'';position:absolute;left:0;top:8px;width:4px;height:4px;border-radius:50%;background:var(--gray60);}

#mypageSection .diary-sub{margin-top:12px;padding:8px;border-radius:12px;background:var(--bg);}
#mypageSection .diary-sub + .diary-sub{margin-top:8px;}
#mypageSection .diary-sub p{font-size:16px;color:var(--gray60);line-height:160%;}
#mypageSection .diary-sub p.sub-title{display:block;font-size:14px;font-weight:600;color:var(--primary);margin-bottom:8px;}
/* 나의 활동 */
#mypageSection .activity-section{background:var(--bg);}
#mypageSection .activity-block{padding:16px;margin-bottom:24px;background:#fff;}
#mypageSection .activity-block:last-child{margin-bottom:0;}
#mypageSection .activity-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;text-decoration:none;}
#mypageSection .activity-header h3{font-size:16px;font-weight:600;color:var(--gray50);}
#mypageSection .activity-header .arrow{width:20px;height:20px;background:url(/resources/img/common/icn_arrow_right.svg) center/contain no-repeat;}

#mypageSection .category-scroll{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:100%;white-space:nowrap;scrollbar-width:none;touch-action:pan-x;}
#mypageSection .category-scroll::-webkit-scrollbar{display:none;}
#mypageSection .category-scroll .category-rail{padding:0 16px;display:inline-flex;gap:16px;flex-wrap:nowrap;white-space:nowrap;min-width:100%;background:#fff;}
#mypageSection .category-scroll .category-rail a{display:inline-block;flex:0 0 auto;padding:8px 0 ;font-size:16px;font-weight:600;color:var(--gray30);text-align:center;transition:background .2s,color .2s;}
#mypageSection .category-scroll .category-rail a.active{color:var(--gray80);font-weight:600;border-bottom:2px solid var(--gray80);}

/*공통심플제품카드*/
.simple-product a{display:flex;align-items:center;gap:12px;padding:16px 0;text-decoration:none;}
.simple-product .thumb{width:60px;height:60px;border-radius:8px;overflow:hidden;background:var(--bg);flex-shrink:0;}
.simple-product .thumb img{width:100%;height:100%;object-fit:cover;}
.simple-product .info{flex:1;display:flex;flex-direction:column;gap:2px;}
.simple-product .info .brand{font-size:12px;color:var(--gray80);font-weight:600;line-height:150%;}
.simple-product .info .name{font-size:14px;color:var(--gray80);line-height:150%;}
.simple-product .info .like{width:16px;height:16px;background:url(/resources/img/common/icn_heart.svg) center/contain no-repeat;}
.simple-product .info .like.active{background-image:url(/resources/img/common/icn_heart_on.svg);}


.tab-section{display:flex;align-items:center;justify-content:center;gap:92px;width:100%;background:#fff;}
.tab-section a{height:46px;font-size:16px;line-height:46px;color:var(--gray30)}
.tab-section a.active{font-weight:600;color:var(--gray80);border-bottom:2px solid var(--gray80);}

#mypageSection .wishlist{display:flex;flex-direction:column;}

#mypageSection .wishlist li.empty,
#mypageSection .scrap-list li.empty{padding:40px 0;text-align:center;border-bottom:none;}
#mypageSection .wishlist li.empty p,
#mypageSection .scrap-list li.empty p{font-size:14px;color:var(--gray60);}

#mypageSection .like-list{padding:16px;}
#mypageSection .like-list .total-count{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;color:var(--gray-text);}
#mypageSection .like-list .total-count em{color:var(--primary);font-weight:600;}
#mypageSection .like-list .total-count .btn-delete{font-size:14px;color:var(--gray60);background:none;border:none;cursor:pointer;}
#mypageSection .like-list .total-count .btn-cancel{font-size:14px;color:var(--gray60);background:none;border:none;cursor:pointer;}
#mypageSection .like-list .total-count .input-check{display:flex;align-items:center;gap:8px;padding:0;}
#mypageSection .like-list .total-count .input-check input[type="checkbox"]{display:none;}
#mypageSection .like-list .total-count .input-check label{padding-left:28px;font-size:14px;color:var(--gray-text);background:url(/resources/img/common/icn_checkbox.svg) no-repeat left center;background-size:20px;cursor:pointer;}
#mypageSection .like-list .total-count .input-check input[type="checkbox"]:checked + label{background-image:url(/resources/img/common/icn_checkbox_on.svg);}
#mypageSection .like-list .wishlist{gap:12px;}
#mypageSection .like-list .wishlist li{position:relative;}
#mypageSection .like-list .wishlist li a{padding:8px 16px;background:#fff;border-radius:12px;}
#mypageSection .like-list .wishlist li .delete-item{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#fff;border-radius:12px;}
#mypageSection .like-list .wishlist li .delete-item .thumb{width:60px;height:60px;border-radius:8px;overflow:hidden;background:var(--bg);flex-shrink:0;}
#mypageSection .like-list .wishlist li .delete-item .thumb img{width:100%;height:100%;object-fit:cover;}
#mypageSection .like-list .wishlist li .delete-item .info{flex:1;display:flex;flex-direction:column;gap:2px;}
#mypageSection .like-list .wishlist li .delete-item .info .brand{font-size:12px;color:var(--gray80);font-weight:600;line-height:150%;}
#mypageSection .like-list .wishlist li .delete-item .info .name{font-size:14px;color:var(--gray80);line-height:150%;}
#mypageSection .like-list .wishlist li .delete-item .info .like{width:20px;height:20px;background:url(/resources/img/common/icn_heart_on.svg) center/contain no-repeat;}
#mypageSection .like-list .wishlist li .delete-item .input-check{display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;}
#mypageSection .like-list .wishlist li .delete-item .input-check input[type="checkbox"]{display:none;}
#mypageSection .like-list .wishlist li .delete-item .input-check label{display:block;width:24px;height:24px;padding-left:0;font-size:0;background:url(/resources/img/common/icn_checkbox.svg) no-repeat center;background-size:contain;cursor:pointer;}
#mypageSection .like-list .wishlist li .delete-item .input-check input[type="checkbox"]:checked + label{background-image:url(/resources/img/common/icn_checkbox_on.svg);}
#mypageSection .like-list .btn-wrap{position:fixed;left:0;bottom:0;width:100%;padding:16px;background:#fff;box-shadow:0 -2px 10px rgba(0,0,0,0.1);}
#mypageSection .like-list .btn-wrap .btn-full{display:block;width:100%;padding:16px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;border:none;border-radius:12px;cursor:pointer;}

#mypageSection .bookmark-list{padding:16px;}
#mypageSection .bookmark-list .total-count{margin-bottom:12px;font-size:14px;color:var(--gray-text);}
#mypageSection .bookmark-list .total-count em{color:var(--primary);font-weight:600;}
#mypageSection .bookmark-list .scrap-list{gap:12px;}
#mypageSection .bookmark-list .scrap-list li{border-bottom:none;}
#mypageSection .bookmark-list .scrap-list li a{padding:12px 16px;background:#fff;border-radius:12px;}
#mypageSection .bookmark-list .scrap-list .thumb{width:80px;height:80px;}
#mypageSection .bookmark-list .scrap-list .info{flex:1;display:flex;flex-direction:column;gap:4px;position:relative;}
#mypageSection .bookmark-list .scrap-list .info .title{font-size:14px;color:var(--gray80);font-weight:500;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;line-height:1.4;}
#mypageSection .bookmark-list .scrap-list .info .date{font-size:12px;color:var(--gray60);}
#mypageSection .bookmark-list .scrap-list .info .bookmark{position:absolute;right:0;top:50%;transform:translateY(-50%);width:24px;height:24px;background:url(/resources/img/common/icn_bookmark_off.svg) center/contain no-repeat;border:none;cursor:pointer;}
#mypageSection .bookmark-list .scrap-list .info .bookmark.active{background-image:url(/resources/img/common/icn_bookmark_on.svg);}

/* 트렌드 홈 */
#trendSection{padding:0 0 40px;}
#trendSection .inner-section{padding:20px;}

/* 퀴즈 카드 스타일 */
.quiz-card{background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,0.08);margin-bottom:24px;overflow:hidden;}
.quiz-card a{display:block;text-decoration:none;color:inherit;}
.quiz-card-content{padding:24px 20px;position:relative;min-height:140px;}
.quiz-card-keyword{font-size:14px;font-weight:500;color:var(--primary);margin-bottom:8px;line-height:1.4;}
.quiz-card-main-title{font-size:20px;font-weight:700;color:var(--primary);margin-bottom:12px;line-height:1.4;white-space:pre-line;}
.quiz-card-preview{font-size:14px;color:var(--gray-text);line-height:1.5;margin-bottom:16px;white-space:pre-line;}
.quiz-card-link{position:absolute;bottom:24px;right:20px;font-size:14px;color:var(--gray-text);font-weight:500;}

/* 트렌드 헤더 */
#trendSection .trend-header{padding:16px;background:#fff;}
#trendSection .trend-title{display:flex;align-items:center;gap:16px;}
#trendSection .trend-title .trend-icon{display:block;width:49px;height:49px;font-size:0;background:url(/resources/img/common/chatbot_profile.svg) no-repeat center center;background-size:cover;border-radius:50%;}
#trendSection .trend-title h2{font-size:24px;font-weight:700;color:var(--gray50);}
#trendSection .trend-desc{margin-top:12px;font-size:16px;color:var(--gray-text);line-height:160%;}

/* 트렌드 제품 카드 */
#trendSection .trendProductSwiper .swiper-slide{width:200px;}
#trendSection .trend-product-card{position:relative;width:100%;height:240px;border-radius:16px;background-size:cover;background-position:center;overflow:hidden;display:flex;align-items:flex-end;}
#trendSection .trend-product-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);}
#trendSection .trend-product-card p{position:relative;z-index:1;padding:16px;font-size:14px;font-weight:600;color:#fff;line-height:1.4;}
#trendSection .trend-product-card.empty{background:var(--bg);align-items:center;justify-content:center;}
#trendSection .trend-product-card.empty::before{display:none;}
#trendSection .trend-product-card.empty p{color:var(--gray-text);font-weight:400;}
#trendSection .trend-product-pagination{position:relative;margin-top:16px;}
#trendSection .trend-product-pagination .swiper-pagination-bullet{width:8px;height:8px;background:var(--gray);opacity:1;}
#trendSection .trend-product-pagination .swiper-pagination-bullet-active{background:var(--primary);width:20px;border-radius:4px;}
#trendSection .category-scroll{display:block;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;width:100%;white-space:nowrap;scrollbar-width:none;touch-action:pan-x;padding:0 16px;margin-bottom:20px;}
#trendSection .category-scroll::-webkit-scrollbar{display:none;}
#trendSection .category-scroll .category-rail{display:inline-flex;gap:8px;flex-wrap:nowrap;white-space:nowrap;min-width:100%;}
#trendSection .category-scroll .category-rail .category{display:inline-block;flex:0 0 auto;min-width:124px;height:29px;line-height:29px;border:1px solid var(--gray);background:#fff;padding:0 12px;border-radius:12px;font-size:14px;white-space:nowrap;transition:background .2s,color .2s;cursor:pointer;}
#trendSection .category-scroll .category-rail .category.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* 인기 글 리스트 */
.article-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px;}
.article-list .article-card{display:block;text-decoration:none;background:#fff;box-shadow:0 0 10px 0 rgba(0,0,0,0.10);border-radius:12px;overflow:hidden;}
.article-list .article-thumb{position:relative;width:100%;height:202px;background-size:cover;background-position:center;border-radius:12px 12px 0 0;}
.article-list .article-thumb .btn-heart{position:absolute;top:12px;right:12px;width:20px;height:20px;background:url(/resources/img/common/icn_heart.svg) no-repeat center;background-size:contain;border:none;cursor:pointer;padding:0;z-index:10;}
.article-list .article-thumb .btn-heart.active{background-image:url(/resources/img/common/icn_heart_on.svg) !important;opacity:1 !important;}
.article-list .article-info{padding:12px;}
.article-list .article-title{font-size:14px;font-weight:600;color:var(--gray80);margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;min-height:2.8em;}
.article-list .article-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray60);}
.article-list .article-meta .article-like,.article-list .article-meta .article-view{display:flex;align-items:center;gap:4px;}
.article-list .article-meta .like-icon{display:inline-block;width:14px;height:14px;background:url(/resources/img/common/icn_heart.svg) no-repeat center;background-size:contain;}
.article-list .article-meta .like-icon.active{background-image:url(/resources/img/common/icn_heart_on.svg)}
.article-list .article-meta .view-icon{display:inline-block;width:14px;height:14px;background:url(/resources/img/common/icn_view.svg) no-repeat center;background-size:contain;}
.article-list .article-meta .like-count,.article-list .article-meta .view-count{font-size:12px;font-weight:500;}
.article-list .article-meta .date{font-size:12px;color:var(--gray60);margin-left:auto;}
#mypageSection .article-list{padding:0}

/* 게시글 상세 페이지 */
#boardSection .post-section{padding:20px 0;}
#boardSection .post-section .post-header{padding:0 16px 12px;border-bottom:1px solid var(--gray);}
#boardSection .post-section .post-header .post-title{font-size:24px;font-weight:700;line-height:1.4;color:#000;margin-bottom:16px;}
#boardSection .post-section .post-meta{margin-top:16px;}
#boardSection .post-section .author-avatar{display:flex;align-items:center;gap:12px;}
#boardSection .post-section .author-avatar .profile{display:block;width:28px;height:28px;background:no-repeat center center;background-size:cover;border-radius:50%;}
#boardSection .post-section .author-avatar .author-name{font-size:18px;font-weight:600;color:var(--gray-text);}

#boardSection .post-section .author-details{flex:1;}
#boardSection .post-section .post-meta-info{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gray30);}
#boardSection .post-section .post-content{padding:16px 16px 50px;font-size:16px;line-height:1.6;color:#000;}
#boardSection .post-section .post-content.editor-content{word-break:break-word;}
#boardSection .post-section .bookmark-info{position:absolute;left:0;bottom:98px;width:100%;justify-content:center;background:#fff;padding:16px;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--gray30);z-index:10;}
#boardSection .post-section .bookmark-info .btn-heart{display:inline-block;width:28px;height:28px;background:url(/resources/img/common/icn_heart.svg) no-repeat center;background-size:contain;border:none;cursor:pointer;opacity:0.7;padding:0;margin:0;vertical-align:middle;}
#boardSection .post-section .bookmark-info .btn-heart:hover{opacity:1;}
#boardSection .post-section .bookmark-info .btn-heart.active{background-image:url(/resources/img/common/icn_heart_on.svg) !important;opacity:1 !important;}
#boardSection .post-section .bookmark-info .bookmark-count{font-size:14px;font-weight:600;color:var(--gray-text);}

#boardSection .post-section .cardnews-swiper-wrapper{padding:16px;}
#boardSection .post-section .swiper-slide{max-width:318px;}

#articleSection .order-select{display:flex;align-items:center;justify-content:flex-end;padding:16px; }
#articleSection .order-select select{width:95px;height:40px;border:1px solid var(--gray);border-radius:8px;padding:0 12px;font-size:14px;color:var(--gray-text);}
#articleSection .order-select select option{font-size:14px;color:var(--gray-text);}
#articleSection .order-select select option:checked{background:var(--primary);color:#fff;}
#articleSection .order-select select option:hover{background:var(--primary);color:#fff;}
#articleSection .order-select select option:active{background:var(--primary);color:#fff;}


#detailSection .usage-chart-section{margin-top:24px;}
#detailSection .usage-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--gray);}
#detailSection .usage-tab{flex:1;padding:12px 0;font-size:14px;font-weight:500;color:var(--gray50);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all 0.3s;}
#detailSection .usage-tab.active{color:var(--primary);border-bottom-color:var(--primary);}
#detailSection .usage-chart-content{margin-top:16px;padding:0 20px;}
#detailSection .usage-chart-list{display:flex;flex-direction:column;gap:8px;}
#detailSection .usage-chart-item:last-child{border-bottom:none;padding-bottom:0;}
#detailSection .usage-chart-label{width:100%;display:flex;align-items:center;justify-content:center;padding:4px 0;background:none;border:none;cursor:pointer;text-align:center;position:relative;}
#detailSection .usage-chart-label .label-text{font-size:12px;line-height:1.4;color:var(--gray50);text-align:center;}
#detailSection .usage-chart-label .arrow-icon{width:16px;height:16px;position:absolute;right:0;top:50%;transform:translateY(-50%);flex-shrink:0;}
#detailSection .usage-chart-label .arrow-icon::before,#detailSection .usage-chart-label .arrow-icon::after{content:'';position:absolute;top:50%;left:50%;width:8px;height:1px;background:var(--gray);transition:all 0.3s;}
#detailSection .usage-chart-label .arrow-icon::before{transform:translate(-30%,-50%) rotate(-45deg);}
#detailSection .usage-chart-label .arrow-icon::after{transform:translate(-70%,-50%) rotate(45deg);}
#detailSection .usage-chart-item.active .usage-chart-label .arrow-icon::before{transform:translate(-30%,-50%) rotate(45deg);}
#detailSection .usage-chart-item.active .usage-chart-label .arrow-icon::after{transform:translate(-70%,-50%) rotate(-45deg);}
#detailSection .usage-chart-bar-wrapper{margin:0 0 6px;position:relative;height:12px;}
#detailSection .usage-chart-bar{position:relative;width:100%;height:12px;display:flex;align-items:center;justify-content:center;}
#detailSection .bar-center{position:absolute;left:50%;top:0;width:1px;height:100%;background:var(--gray30);transform:translateX(-50%);z-index:1;}
#detailSection .bar-positive{position:absolute;left:50%;top:0;height:100%;background:var(--primary);border-radius:0 12px 12px 0;transition:width 0.3s ease;z-index:0;}
#detailSection .bar-negative{position:absolute;right:50%;top:0;height:100%;background:var(--gray);border-radius:12px 0 0 12px;transition:width 0.3s ease;z-index:0;}
#detailSection .usage-justification{margin-top:6px;padding:8px;background:var(--surface);border-radius:8px;font-size:12px;line-height:1.6;color:var(--gray60);animation:slideDown 0.3s ease;}
#detailSection .usage-justification p{margin:0;}
@keyframes slideDown{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}