@charset "utf-8";

/* -------------------------------------------------------
    service_personal.jsp
------------------------------------------------------- */

.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;}
}

/* ============ 1. 상단 통합 배너 ============ */
.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{ 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; }

/* ============ 2. 탭 공통 (SHAPE OF FACE ~ CREATOR ~ Step ~ Notice) ============ */
.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{ display:none; max-width: 1040px; margin: 0 auto; padding: 60px 20px 0; } */
.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; }

/* 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;/*border: 1px solid #f9f2ef;*/ }
.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); }

/* 제품 이미지 + Notice */
.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; }

/* information */
.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 */
.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;}




/* 예약안내 */
.info_booking .info_visual {flex:0 0 560px;width:560px;}
.info_booking .info_visual img {width:100%;height:auto;border-radius: 6px;}


@media all and (max-width: 1440px) {
    .service_visual {padding:80px 40px;}
}
@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;}
}
@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; }

 }

@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;}
}