@charset "utf-8";
/* ==========================================================================
   service_personal.css — 퍼스널 서비스 소개 (service_personal.jsp)
   tokens / #container: service_common.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   viewport helpers
   -------------------------------------------------------------------------- */
.service_main * {letter-spacing:-0.01em;}
.service_main .m_only {display:none;}
.service_main .w_img {display:inline;}
.service_main .m_img {display:none;}
br.break_1080 {display:none;}

@media all and (max-width:1080px) {
	br.break_1080 {display:block;}
}
@media all and (max-width:768px) {
	.service_main .m_only {display:block;}
	.service_main .w_img {display:none;}
	.service_main .m_img {display:inline;}
	br.break_1080 {display:none;}
}

/* --------------------------------------------------------------------------
   service_visual — 상단 배너
   -------------------------------------------------------------------------- */
.service_visual {background:var(--color-bg-section);padding:80px 20px;}
.service_visual_inner {max-width:1280px;margin:0 auto;}
.service_title_area {text-align:left;margin-bottom:32px;display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.service_title_area .service_title {margin:0;}
.service_title_area .service_title img {height:39px;width:auto;display:block;}
.service_title_area .service_subtitle {font-size:18px;color:var(--color-text);margin-bottom:-3px;letter-spacing:-0.03em;font-weight:500;}
.visual_box {background:#fff;display:flex;overflow:hidden;border-radius:var(--radius-card);box-shadow:3px 3px 10px 0px rgb(201,176,166,0.2);}
.visual_box_link {display:block;text-decoration:none;color:inherit;cursor:pointer;}
.visual_box .visual_imgbox {flex:0 0 45%;max-width:580px;}
.visual_box .visual_imgbox img {display:block;width:100%;height:100%;object-fit:cover;}
.visual_box .visual_info {flex:1;padding:36px 40px;display:flex;flex-direction:column;justify-content:center;}
.visual_info .info_title {font-size:26px;font-weight:600;margin:0 0 18px;display:flex;align-items:center;gap:14px;}
.visual_info .info_title .arrow {display:inline-flex;}
.visual_info .info_title .arrow img {width:9px;height:auto;}
.btn_reserve .arrow img {width:9px;height:auto;filter:brightness(0) invert(1);}
.info_badge {display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500;margin-bottom:18px;}
.info_badge img {width:16px;height:auto;}
.info_desc {font-size:16px;line-height:1.6;color:var(--color-text-sub);margin:0;}
.visual_info .btn_reserve_m {display:none;}
.btn_reserve {display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--color-primary);color:#fff;font-size:16px;font-weight:600;text-decoration:none;padding:16px 0;width:100%;max-width:340px;border:none;border-radius:6px;cursor:pointer;box-shadow:3px 3px 10px 0px rgb(201,176,166,0.2);}
.btn_reserve .arrow {display:inline-flex;align-items:center;transform:translateY(-1px);}
.btn_reserve .arrow img {display:block;}

/* --------------------------------------------------------------------------
   service_compose — 구성 안내
   -------------------------------------------------------------------------- */
.service_compose {margin-top:40px;}
.service_reserve_btn_area {text-align:center;margin-top:46px;}
.service_compose h3 {font-size:20px;font-weight:600;margin:0 0 16px;}
.compose_list {background:#fff;display:flex;list-style:none;margin:0;padding:24px 0;border-radius:var(--radius-card);}
.compose_list li {flex:1;text-align:center;font-size:16px;position:relative;}
.compose_list li:not(:last-child)::after {content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background:#e5e5e5;}
.compose_list .num {color:var(--color-primary);font-weight:700;margin-right:8px;}

/* --------------------------------------------------------------------------
   tabmenu / consulting_info
   -------------------------------------------------------------------------- */
.tabmenu {max-width:1280px;margin:0 auto;display:flex;border-bottom:1px solid #e5e5e5;margin-bottom:60px;}
.tabmenu button {flex:1;background:none;border:none;font-family:var(--font-body);font-size:18px;font-weight:600;color:#999;padding:18px 0;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;}
.tabmenu button.active {color:var(--color-text);border-bottom-color:var(--color-primary);}
.consulting_info.active {display:block;}
.desc_01_box {display:flex;padding-bottom:36px;}
.desc_title {font-size:18px;font-weight:600;letter-spacing:1px;margin-bottom:14px;color:var(--color-primary);}
.desc_02 {margin-bottom:56px;}
.desc_02 .recommend_grid {display:flex;gap:16px;}
.desc_02 .recommend_box {background:#fff;border-radius:6px;overflow:hidden;flex:1;}
.desc_02 .recommend_box .box-title {background:var(--color-bg-section);text-align:center;font-weight:600;font-size:18px;padding:10px 0;}
.desc_02 .recommend_box .box-body {padding:26px 30px;background:#fcf9f7;}
.desc_02 .recommend_box .box-body .lead {color:var(--color-primary);font-size:15px;margin-bottom:10px;font-weight:500;}
.desc_02 .recommend_box ul {list-style:none;margin:0;padding:0;}
.desc_02 .recommend_box li {display:flex;gap:8px;font-size:16px;line-height:1.7;align-items:center;}
.desc_02 .recommend_box li img {width:16px;height:16px;flex-shrink:0;}
.desc_03 {margin-bottom:56px;}
.desc_03 .m_img {display:none;}
.desc_03 h3 {text-align:center;color:var(--color-primary);font-size:15px;letter-spacing:1px;margin-bottom:20px;}
.creator_imgbox {position:relative;}
.creator_imgbox img {width:100%;height:auto;display:block;}
.desc_03 .w_img {display:flex;margin-top:10px;}
.desc_03 .m_img {display:none;}
.creator_pair {margin-bottom:24px;}
.creator_pair:last-child {margin-bottom:0;}
.creator_pair img {width:100%;height:auto;display:block;}
.creator_pair .creator_captions {margin-top:10px;}
.creator_pair .creator_captions .cap {flex:1;text-align:center;}
.creator_captions .cap {flex:1;text-align:center;font-size:16px;}
.creator_captions .cap b {margin-right:4px;font-weight:bold;}
.creator_captions .cap span {color:var(--color-text-sub);font-size:15px;}

/* --------------------------------------------------------------------------
   list_step — STEP
   -------------------------------------------------------------------------- */
.list_step {display:flex;gap:12px;margin-bottom:56px;margin-top:56px;}
.step_li {flex:1;border-radius:6px;padding:30px;min-height:150px;background:#fcf9f7;}
.step_li .step-num {color:var(--color-primary);font-weight:700;font-size:16px;margin-bottom:14px;}
.step_li .step-title {font-size:18px;font-weight:600;margin-bottom:8px;}
.step_li .step-desc {font-size:14px;color:var(--color-text-sub);}

/* --------------------------------------------------------------------------
   info_booking — 예약 안내
   -------------------------------------------------------------------------- */
.info_booking {display:flex;gap:48px;margin-bottom:40px;}
.info_booking .notice-list {padding-top:10px;}
.booking_desc {margin-bottom:36px;}
.booking_desc h4 {color:var(--color-text);font-size:22px;font-weight:700;margin:0 0 12px;}
.booking_desc h4 .n {margin-right:2px;color:var(--color-primary);font-weight:700;}
.booking_desc p {font-size:16px;line-height:1.6;margin:0 0 6px;color:var(--color-text);}
.booking_desc p.sub {color:var(--color-text-sub);}
.booking_desc .em {font-weight:700;}
.booking_desc p.warn {color:var(--color-primary);font-weight:500;}
.booking_desc .place-name {font-weight:600;margin-bottom:4px;}
.btn_booknow {display:flex;align-items:center;justify-content:center;gap:10px;background:var(--color-primary);color:#fff;font-size:16px;font-weight:600;border:none;border-radius:6px;padding:16px 0;width:100%;max-width:390px;margin:0 auto;cursor:pointer;}
.btn_booknow .en {font-weight:700;}
.info_booking .info_visual {flex:0 0 560px;width:560px;}
.info_booking .info_visual img {width:100%;height:auto;border-radius:6px;}

/* --------------------------------------------------------------------------
   information — consulting / skill_up
   -------------------------------------------------------------------------- */
.information * {letter-spacing:-0.02em;word-break:keep-all;}
.information .inner {max-width:1280px;margin:0 auto;padding:60px 0;}
.consulting_info {display:none;}
.consulting_info.active {display:block;}
.personal_consulting .title {margin-bottom:3px;text-align:center;}
.personal_consulting .desc_01 .imgbox {flex:0 0 669px;width:669px;margin-left:auto;text-align:left;}
.personal_consulting .desc_01 .desc {display:flex;align-items:center;flex:1 0 auto;padding:0 24px;}
.personal_consulting .desc_01 li {position:relative;display:flex;height:18px;margin-bottom:32px;padding-left:24px;}
.personal_consulting .desc_01 li:before {position:absolute;left:0;top:7px;content:"";display:block;width:13px;height:13px;border:1px solid #000;box-sizing:border-box;}
.personal_consulting .desc_01 li:after {position:absolute;left:0;top:2px;content:"";display:block;width:20px;height:18px;background-repeat:no-repeat;background-size:20px 18px;background-position:0 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18'%3E%3Cpath fill='none' stroke='%23CF152D' stroke-width='2' d='m1.801 8.515 5.132 5.913L17.197 1.615'/%3E%3C/svg%3E");}
.personal_consulting .desc_01 li strong {flex:0 0 123px;width:123px;display:block;font-weight:600;font-size:18px;line-height:1.6;}
.personal_consulting .desc_01 li span {flex:1 0 auto;display:block;font-size:18px;line-height:1.6;}
.personal_consulting .desc_03 {margin-bottom:60px;}
.personal_skill_up .title {margin-bottom:3px;text-align:center;}
.personal_skill_up .skill_up_notice {padding:40px 60px;background-color:#f3f3f3;border-radius:6px;}
.personal_skill_up .skill_up_notice .title {font-weight:600;font-size:17px;color:var(--color-text);text-align:left;line-height:1.7;}
.personal_skill_up .desc_01 {padding:54px 0;}
.personal_skill_up .desc_01 .imgbox {flex:0 0 600px;width:100%;margin-left:auto;text-align:left;height:auto;}
.personal_skill_up .desc_01 .desc {display:flex;align-items:flex-start;flex:1 0 auto;padding:0 24px;margin-top:20px;}
.personal_skill_up .desc_01 li {position:relative;display:flex;height:18px;margin-bottom:32px;padding-left:24px;}
.personal_skill_up .desc_01 li:before {position:absolute;left:0;top:7px;content:"";display:block;width:13px;height:13px;border:1px solid #000;box-sizing:border-box;}
.personal_skill_up .desc_01 li:after {position:absolute;left:0;top:2px;content:"";display:block;width:20px;height:18px;background-repeat:no-repeat;background-size:20px 18px;background-position:0 0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18'%3E%3Cpath fill='none' stroke='%23CF152D' stroke-width='2' d='m1.801 8.515 5.132 5.913L17.197 1.615'/%3E%3C/svg%3E");}
.personal_skill_up .desc_01 li strong {flex:0 0 123px;width:123px;display:block;font-weight:600;font-size:18px;line-height:1.6;}
.personal_skill_up .desc_01 li span {flex:1 0 auto;display:block;font-size:18px;line-height:1.6;}
.personal_skill_up .desc_02 .list_step {display:flex;}
.personal_skill_up .desc_02 .list_step > li {flex:1 0 9%;width:9%;padding-left:26px;}
.personal_skill_up .desc_02 .title {padding:18px 0;font-weight:700;font-size:20px;color:#d31016;text-align:left;}
.personal_skill_up .desc_02 .txt {margin-bottom:14px;font-weight:700;font-size:16px;line-height:1.65;}
.personal_skill_up .desc_02 .list > li {font-size:15px;line-height:1.6;}
.personal_skill_up .desc_03 {margin-bottom:60px;}

/* --------------------------------------------------------------------------
   reviews — review_common override
   -------------------------------------------------------------------------- */
.service_personal .reviews {padding-top:120px;}
.service_personal .reviews .title_box .title {font-family:'yoonb',sans-serif;}
.service_personal .reviews .title_box .txt {padding-top:25px;font-size:1.125em;color:#000;}
.service_personal .reviews .title_box .txt .m_only {display:none;}
.service_personal .reviews .title_box .btn_area {padding-bottom:30px;}
.service_personal .reviews .title_box .btn_area button {margin-top:22px;}

/* --------------------------------------------------------------------------
   responsive — ≤1440px
   -------------------------------------------------------------------------- */
@media all and (max-width:1440px) {
	.service_visual {padding:80px 40px;}
}

/* --------------------------------------------------------------------------
   responsive — ≤1280px
   -------------------------------------------------------------------------- */
@media all and (max-width:1280px) {
	.info_booking {padding:0 20px;}
	.personal_consulting .desc_01 {display:block;padding:28px 0;}
	.personal_consulting .desc_01 .imgbox {width:100%;margin-bottom:16px;text-align:center;}
	.personal_consulting .desc_01 .desc {width:100%;max-width:640px;margin:0 auto;padding:0;}
	.personal_skill_up .desc_01 {display:block;padding:28px 0;}
	.personal_skill_up .desc_01 .imgbox {width:100%;margin-bottom:32px;text-align:center;}
	.personal_skill_up .desc_01 .desc {width:100%;max-width:640px;margin:0 auto;padding:0;padding-left:30px;}
	.info_booking .info_visual {flex:0 0 43.75%;width:43.75%;}
	.info_booking .info_visual img {height:100%;object-fit:cover;}
}

/* --------------------------------------------------------------------------
   responsive — ≤1023px (reviews)
   -------------------------------------------------------------------------- */
@media (max-width:1023px) {
	.service_personal .reviews {padding-top:96px;}
	.service_personal .reviews .title_box .btn_area button {width:114px;}
	.service_personal .review_list_box .review_color.m_view {display:none;}
}

/* --------------------------------------------------------------------------
   responsive — ≤768px
   -------------------------------------------------------------------------- */
@media all and (max-width:768px) {
	.information .inner {padding:50px 0;}
	.information .tabmenu {margin-bottom:0;}
	.information .tabmenu .tab_info span {height:44px;line-height:44px;font-size:13px;}
	.information .tabmenu .tab_service {flex:0 0 50%;width:50%;}
	.information .tabmenu .tab_reservation {flex:0 0 50%;width:50%;}
	.information .tabmenu .tab_info span:after {height:2px;}

	.personal_consulting .title > img {max-height:150px;width:auto;}
	.personal_consulting .desc_01 {display:block;padding:28px 0;}
	.personal_consulting .desc_01 .imgbox {width:100%;margin-bottom:16px;text-align:center;flex:0;}
	.personal_consulting .desc_01 .desc {width:100%;padding:0;padding-left:0;}
	.personal_consulting .desc_01 li {height:auto;margin-bottom:10px;padding-left:18px;}
	.personal_consulting .desc_01 li:before {width:10px;height:10px;}
	.personal_consulting .desc_01 li:after {top:4px;width:13px;height:11px;background-size:13px 11px;}
	.personal_consulting .desc_01 li strong {flex:0 0 80px;width:116px;font-size:15px;}
	.personal_consulting .desc_01 li span {font-size:15px;}
	.desc_title {font-size:16px;}
	.desc_01_box {flex-direction:column;}
	.desc_02 .recommend_box .box-body {padding:20px 24px;}
	.desc_02 .recommend_box li {font-size:15px;line-height:1.6;align-items:flex-start;}
	.desc_02 .recommend_box li img {margin-top:4px;}
	.personal_consulting .desc_02 {padding:0;}
	.personal_consulting .desc_02 .list_step {max-width:100%;display:block;}
	.personal_consulting .desc_02 .list_step > li {width:100%;margin-bottom:40px;padding:0;}
	.personal_consulting .desc_02 .list_step > li:last-child {margin-bottom:0;}
	.personal_consulting .desc_02 .title {padding:13px 0;font-size:18px;}
	.personal_consulting .desc_02 .txt {min-height:auto;margin-bottom:10px;font-size:14px;}
	.personal_consulting .desc_02 .list > li {margin-bottom:2px;font-size:13px;}
	.personal_consulting .desc_03 {margin-left:0;margin-bottom:0;}
	.personal_consulting .desc_03 > img {max-width:500px;}

	.personal_skill_up .title > img {max-height:150px;width:auto;}
	.personal_skill_up .skill_up_notice {padding:26px;margin-bottom:32px;}
	.personal_skill_up .skill_up_notice .title {font-size:14px;}
	.personal_skill_up .desc_01 {display:block;padding:28px 0;}
	.personal_skill_up .desc_01 .imgbox {width:100%;margin-bottom:16px;text-align:center;flex:0;}
	.personal_skill_up .desc_01 .desc {width:100%;padding:0;}
	.personal_skill_up .desc_01 li {height:auto;margin-bottom:10px;padding-left:18px;}
	.personal_skill_up .desc_01 li:before {width:10px;height:10px;}
	.personal_skill_up .desc_01 li:after {top:4px;width:13px;height:11px;background-size:13px 11px;}
	.personal_skill_up .desc_01 li strong {flex:0 0 80px;width:116px;font-size:15px;}
	.personal_skill_up .desc_01 li span {font-size:15px;}
	.personal_skill_up .desc_01 .imgbox > img {width:100%;}
	.personal_skill_up .desc_02 {padding:0;}
	.personal_skill_up .desc_02 .list_step {max-width:100%;display:block;}
	.personal_skill_up .desc_02 .list_step > li {width:100%;margin-bottom:40px;padding:0;}
	.personal_skill_up .desc_02 .list_step > li:last-child {margin-bottom:0;}
	.personal_skill_up .desc_02 .title {padding:13px 0;font-size:18px;}
	.personal_skill_up .desc_02 .txt {min-height:auto;margin-bottom:10px;font-size:14px;}
	.personal_skill_up .desc_02 .list > li {margin-bottom:2px;font-size:13px;}
	.personal_skill_up .desc_03 {margin-left:0;text-align:left;}
	.personal_skill_up .desc_03 > img {max-width:500px;}

	.service_visual {padding:40px 20px 50px;}
	.service_title_area {flex-direction:column;align-items:center;gap:8px;margin-top:20px;}
	.service_title_area .service_title img {height:30px;}
	.service_title_area .service_subtitle {font-size:16px;}
	.visual_box {flex-direction:column;}
	.visual_box .visual_imgbox {flex:none;max-width:none;width:100%;aspect-ratio:2/1;}
	.visual_box .visual_info {padding:26px 20px;}
	.visual_info .info_title {font-size:1.5rem;margin-bottom:12px;}
	.visual_info .info_badge {font-size:1.2rem;margin-bottom:12px;}
	.visual_info .info_desc {font-size:1rem;letter-spacing:-1px;}
	.btn_reserve {max-width:none;}
	.visual_info .btn_reserve_m {display:flex;margin-top:20px;}
	.service_reserve_btn_area {display:none;}
	.service_compose {margin-top:32px;}
	.compose_list {flex-direction:column;flex-wrap:nowrap;padding:24px 20px;gap:8px;}
	.compose_list li {flex:none;text-align:left;font-size:16px;}
	.compose_list .num::after {content:'.';}
	.compose_list li:not(:last-child)::after {display:none;}
	.service_reserve_btn_area {margin-top:40px;}
	.tabmenu button {font-size:14px;padding:14px 0;}
	.consulting_info {padding:40px 20px 0;}
	.recommend_grid {flex-direction:column;}
	.creator_captions .cap {flex:0 0 50%;margin-bottom:12px;}
	.creator_captions .cap b {font-size:14px;}
	.creator_captions .cap span {font-size:13px;}
	.desc_03 .w_img {display:none;}
	.desc_03 .m_img {display:block;}
	.desc_03 .m_img .creator_captions {display:flex;flex-wrap:wrap;margin-bottom:8px;}
	.creator_pair .creator_captions {margin-top:6px;}
	.list_step {flex-direction:column;gap:0;margin-bottom:40px;}
	.step_li {border-radius:6px;margin-bottom:12px;padding:24px;min-height:0;}
	.info_booking {display:block;padding:0;margin-top:60px;}
	.info_booking .info_visual {width:100%;}
	.info_booking .notice-list {padding-top:30px;}
	.booking_desc h4 {font-size:18px;font-weight:600;}
	.booking_desc p {font-size:14px;}
	.btn_booknow {max-width:none;}

	.service_personal .review_prd_option .review_prd_name,
	.service_personal .review_prd_option .review_prd_service_name,
	.service_personal .review_prd_option .review_visit_date {display:none;}
	.service_personal .review_list_box .review_color.m_view {display:block;}
	.service_personal .review_list_box .review_color.m_view .review_prd_name {padding-right:10px;}
	.service_personal .review_list_box .review_color.m_view .review_prd_service_name {position:relative;padding:0 10px;}
	.service_personal .review_list_box .review_color.m_view .review_visit_date {position:relative;padding-left:10px;}
	.service_personal .review_list_box .review_color.m_view .review_prd_service_name:before,
	.service_personal .review_list_box .review_color.m_view .review_visit_date:before {position:absolute;left:0;top:50%;margin-top:-6px;content:"";display:block;width:1px;height:12px;background:#d2d2d2;}
}

/* --------------------------------------------------------------------------
   review write — reservation select / autofill
   -------------------------------------------------------------------------- */
/* validation_wrap 과 동일 간격, border-top 없음 */
.review_write_pop .review_rsv_wrap {margin-top:0;padding:30px 0;}
.review_write_pop #review_select_box.review_rsv_wrap {padding-bottom:0;}
.review_write_pop #btn_review_rsv_select {text-align:center;padding-left:16px;padding-right:35px;}
.review_write_pop #reviewable_rsv_list button.select_review_rsv {padding-left:16px;padding-right:16px;text-align:center;}
.review_write_pop #reviewable_rsv_list button.select_review_rsv p {text-align:center;}
.review_write_pop .review_rsv_autofill {text-align:center;}
.review_write_pop .review_rsv_autofill .q_subtit {text-align:center;}
/* 선택 예약 정보 미노출 시 — 바로 다음 섹션(별점) border-top 제거 */
.review_write_pop #review_rsv_autofill[hidden] + .validation_wrap {border-top:0;}
.review_write_pop .review_rsv_info {margin:8px 0 0;padding:0;list-style:none;display:inline-block;text-align:left;}
.review_write_pop .review_rsv_info li {margin:4px 0;font-size:16px;line-height:1.4;}
.review_write_pop .review_rsv_info .lbl {display:inline-block;min-width:52px;color:#888;margin-right:8px;}

/* --------------------------------------------------------------------------
   responsive — ≤640px (reviews)
   -------------------------------------------------------------------------- */
@media (max-width:640px) {
	.service_personal .reviews .title_box {font-size:13px;}
	.service_personal .reviews .title_box .title {font-size:26px;}
	.service_personal .reviews .title_box .txt {font-size:1em;}
	.service_personal .review_list_box .review_prd_option {padding-bottom:15px;}
	.service_personal .review_list_box .review_color.m_view span {font-size:12px;vertical-align:bottom;}
}

/* --------------------------------------------------------------------------
   responsive — ≤540px
   -------------------------------------------------------------------------- */
@media all and (max-width:540px) {
	.personal_consulting .title > img {max-height:100px;width:auto;}
	.personal_skill_up .title > img {max-height:100px;width:auto;}
}

/* --------------------------------------------------------------------------
   responsive — ≤480px (reviews)
   -------------------------------------------------------------------------- */
@media (max-width:480px) {
	.service_personal .reviews .title_box .txt .m_only {display:block;}
}