/* BASIC css start */ /* 아이품고 PC 산후조리원 상세/예약 v40 : CSS */ #contentWrapper,#contentWrap, #content{ width:1080px !important; } .ad_bn { display:block; margin:20px 0; } .ad_bn a { } .ad_bn a img { width:100%; } .ad_bn_2 { display:flex; gap:10px; } .ad_bn_2 a { width:600px; } .ad_bn_2 a img { width:100%; } .logo_hospital { display:block; text-align:right; } .logo_hospital a { display:inline-block; background:#f7f7f7; padding:5px 15px; border-radius:10px; } .logo_hospital img { display:inline-block; width:105px; vertical-align:middle; } .logo_hospital span { display:inline-block; padding-right:10px; } .ec-base-product_main_01_left .prdList .thumbnail a { width:100%; height:100%; } #matterWrap { width:100%; height:578px; overflow:hidden; border-radius:10px; } #matterWrap #view_meta { width:100%; height:600px; } #matterWrap #view_meta_else { width:100%; height:680px; } #matterWrap .logo { position:relative; } #matterWrap .logo .logo_img { position:absolute; top:10px; right:10px; width:35px; } #matterWrap #matterLayer { position:relative; bottom:110px; width:100%; height:100px; background: #e74174; text-align:center; } #matterWrap #matterLayer img { padding-top:8px; width:150px; } #view_meta #loading-gui #loading-powered-by #loading-mp-logo { display:none; } #map_wrap { float:left; width:100%; } #map_wrap #map { height:400px; border-radius:10px; } .meta { position:relative; overflow:hidden; border-radius:10px; } .meta .meta_else { overflow:hidden; } .meta .meta_else img { position:absolute; width:100%; filter:opacity(0.4); } .meta_login {position:absolute;z-index:1;background: #fff;top: 50%;left: 50%;text-align: center;border-radius: 15px;padding: 50px 30px 40px 30px; transform: translate(-50%, -50%); color:#000; } .meta_login p { font-size:24px; line-height:34px; font-weight:bold; } .meta_login .bt_login { background:#e84174; color:#fff; font-weight:bold; margin-top:30px; line-height:60px; border-radius:10px; } .meta_login .bt_login:hover { background:#e61857;} .shopdetail .shopdetailInfo { padding:10px; } .top_bar_fix{position:fixed; top:58px; width:1100px; z-index:999; } .pd_top_80{padding-top:80px;} #productDetail { } .name { text-align:left; color:#333; font-size:28px; line-height:44px; font-weight:500; } #contentWrapper { } /* 탭메뉴 */ ul.tabs{ display: inline-block; list-style: none; float:left; width:180px; margin:0 20px; } ul.tabs li{ display: inline-block; width:130px; color: #333; padding: 5px 26px; cursor: pointer;} ul.tabs li.current { background: #e74174; border-radius:10px; color:#fff; font-weight:500; } .tab-content { display: none; width:880px; height:auto; } .tab-content.current{ display: inherit; float:left; } .container { width: 1100px; } .price td p { white-space:normal; line-height:31px; padding-left: 17px; background: url(/design/kichmom/reserve/ico_bul.png) 0 0 no-repeat; background-size: 11px auto; background-position:0 6px; } #fix_shop_op { position:fixed; top:0; width:100%; background:#fff; z-index:10; height:63px; } .joriwon_event { display:none; text-align:center; } .joriwon_event .event_wrap { background:url(/design/kichmom/reserve/bg_event.jpg) no-repeat; background-size:100%; padding:22px;} .joriwon_event h1 { font-size:46px; font-weight:500; color:#fff; padding:54px 0 32px 0; } .joriwon_event .event_wrap .event_contents { background:#fff; border-radius:11px; padding:0 22px 32px 22px; } .joriwon_event .event_wrap .event_contents .tit { color:#000; padding-bottom:11px; padding-top:32px; } .joriwon_event .event_wrap .event_contents p { color:#999; letter-spacing:-1px; } #productDetail .page-body { margin-top: 10px; } /* 상품 상세페이지 내 스타일 */ .detail-info .price { font-size: 16px; color: #666; border-top:1px solid #ededed; } .detail-info .price tr { height:45px; border-bottom:1px solid #eee; } .detail-info .price tr.ip { color:#e74174; font-weight:500; } .detail-info .price .title { background:#f8f8f8; } .detail-info .price td { padding:5px 25px; } .detail-info .table_wrap {float:left; font-size: 16px; color: #666; } .detail-info .table_wrap table { margin-bottom:15px; border-top:1px solid #eee; } .detail-info .table_wrap table tr { height:42px; border-bottom:1px solid #eee; } .detail-info .table_wrap table .title { background:#f8f8f8; width:120px; } .detail-info .table_wrap table td { padding:0 15px; } .detail-info .table_wrap table td a:hover { font-weight:bold; color:#e74174;} .detail-info .table_wrap .all { float:right; padding: 10px 20px; border:1px solid #ddd; } .detail-info .table_wrap .all:hover { font-weight:bold; color:#e74174;} .detail-info svg { width: 100px !important; } /* 상단 섬네일, 상품 옵션 정보 */ #productDetail .thumb-info { position: relative; display:inline-block; margin: 30px 0; zoom: 1; } /* 섬네일 */ #productDetail .thumb-info .thumb-wrap { float: left; width: 500px; text-align: center; } #productDetail .thumb-info .thumb { width: 500px; text-align: center; margin: 0 auto; } #productDetail .thumb-info .thumb img { width: 500px;display:inline-block; } #productDetail .thumb-info .thumb-ctrl { clear: both; padding-top: 20px; text-align: center; } #productDetail .thumb-info .thumb-ctrl a { font-size: 11px; } #productDetail .thumb-info .thumb-ctrl a img { vertical-align: middle; margin-right: 3px; } #productDetail .thumb-info .thumb-ctrl a:hover { text-decoration: underline; } /* 상품옵션 정보 */ #productDetail .thumb-info .info { float: left; width: 1100px; margin-bottom:10px; } #productDetail .thumb-info .info .text .tit-prd { font-size: 25px; color: #333; padding-bottom:10px; font-weight:500; } #productDetail .thumb-info .info .text .tit-sub { font-size: 17px; color: #666; line-height:21px; letter-spacing:-1px; } #productDetail .thumb-info .info .ico { position:absolute; right:0; top:14px; } #productDetail .thumb-info .info .ico a { margin-left:15px; } #productDetail .thumb-info .info .ico img { width:30px; } #productDetail .thumb-info .info .update { float:right; color:#ccc; display:inline-block; } #productDetail .thumb-info .detail { display:inline-block; width: 1100px; margin-top:40px; } #productDetail .thumb-info .detail .sub { font-size: 16px; color: #666; vertical-align:top; } #productDetail .thumb-info .detail .detail-info { width: 100%; display:inline-block; padding:60px 0 30px 0; border-top:1px solid #e3e3e3; } #productDetail .thumb-info .detail .detail-info li { display:inline-block; } #productDetail .thumb-info .info .table-opt { margin-top: 25px; } #productDetail .thumb-info .info .table-opt th, #productDetail .thumb-info .info .table-opt td { font-size: 16px; padding: 7px 0 8px; } #productDetail .thumb-info .info .table-opt th {width: 100px; font-weight: normal; letter-spacing: -1px; } /* 카카오지도 */ .map_wrap { position: absolute; left: 0; bottom: 45px; width: 380px; height: 125px; margin-left: -189px; line-height: 1.5; text-align: center; overflow: hidden; font-family: 'Noto Sans KR', Nanum Gothic, AppleGothic, Helvetica, sans-serif; } .map_wrap * { padding: 0;margin: 0;} .map_wrap .info { width: 380px; height: 120px; border-radius: 5px; border-bottom: 2px solid #ccc; border-right: 1px solid #ccc; overflow: hidden; background: #fff; } .map_wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;} .info .title { padding-top: 10px; height: 35px; background: #fff; border-bottom: 1px solid #eee; font-size: 16px; font-weight:500;} .info .close { position: absolute; bottom: 10px; right: 2px; color: #888; width: 30px;height: 30px; background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png') no-repeat 0 8px; background-size:12px; } .info .close:hover { cursor: pointer; } .info .body { position: relative;overflow: hidden;} .info .desc { position: relative; margin: 10px; height: 40px; font-size:14px; } .desc .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:14px; color:#666; } .info .desc .link { margin-top:5px; } .info .desc .link a { padding:0 5px; color: #5085BB; text-decoration:none; } .info .desc .link a:hover { font-weight:600; } #map_wrap { overflow:hidden; box-sizing:border-box; } #map_wrap #map { height:350px; } .root_daum_roughmap { margin:15px 0; width:100%; } .root_daum_roughmap .wrap_map { height:350px; } .intro { font-size:16px; color:#333; } .map_addr { position: relative; font-size: 16px; padding: 10px; margin: 360px 0 0 0; border-radius: 10px; background: #f7f7f7; color: #333; } .map_addr span { font-weight:bold; padding-right:10px; } /* 앵커타이틀 */ .prdanchor .tab:after {content:""; display:block; clear:both;} .prdanchor .tab {margin:30px 0;*zoom1;} /* IE5.5~7 브라우저 대응 Hack */ .prdanchor .tab a { float: left; width: 20%; height: 54px; padding: 16px 0 0; margin: 0 0 0 -1px; border: 1px solid #dfdfdf; border-bottom: 1px solid #707070; color: #787878; font-size: 13px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .prdanchor .tab a:first-child { margin: 0; } .prdanchor .tab a.on { position: relative; border: 1px solid #707070; border-bottom: 1px solid #fff; color: #111; font-weight: bold; } .prdanchor .tab a strong { color: #3e3d3c; } /* 타이틀 공통 */ #productDetail .tit-detail { zoom: 1; position: relative; margin-top: 70px; padding-left: 5px; font-size: 0; line-height: 0; margin:0 55px; } #productDetail .tit { display:inline-block; width:100%; color:#e74174; font-size:20px; font-weight:500; } #productDetail .tit_terms { float:left; display:inline-block; width:100%; color:#e74174; font-size:20px; font-weight:500; } #productDetail .btns_box:after {content:""; display:block; clear:both;} #productDetail .btns_box {*zoom1;} /* IE5.5~7 브라우저 대응 Hack */ #productDetail .btns { float: right;font-size: 0; } .skinbtn.point1.gv-qnalist, .skinbtn.point2.gv-qnawrite, .skinbtn.point1.gv-reviewlist, .skinbtn.point2.gv-reviewwrite { width: 151px; height: 40px; line-height: 38px;} .skinbtn.point1 { border: 1px solid #3e3d3c; color: #3e3d3c; } .skinbtn.point2 { background: #3e3d3c; border: 1px solid #3e3d3c; color: #fff; font-weight: bold;} .skinbtn { display: inline-block; height: 40px; padding: 0 5px; text-align: center; vertical-align: top; box-sizing: border-box; cursor: pointer; font-size: 12px; } .skinbtn { margin: 0 0 0 10px; } /* 상품 상세 이미지 */ #productDetail .prd-detail table { table-layout: auto; } #productDetail .prd-detail { margin-top: 60px; width: 100%; overflow: hidden; } #productDetail .prd-detail img { max-width: 100%; } #productDetail .prd-detail .detail_align {text-align:center;margin:0 auto} /* 관련상품 */ /* #productDetail .prd-list { padding-top: 10px; border-top: 1px solid #b4b4b5; } #productDetail .prd-list .thumb { width: 50px; height: 50px; } #productDetail .prd-list th { padding-bottom: 10px; border-bottom: 1px solid #aaa; } #productDetail .prd-list td { padding: 5px 0; border-bottom: 1px solid #aaa; } #productDetail .prd-list .prd-amount { position: relative; width: 52px; height: 15px; border: 1px solid #acacac; } #productDetail .prd-list .prd-amount .txt-spin, #productDetail .prd-list .prd-amount .btns { float: left; } #productDetail .prd-list .prd-amount .txt-spin { width: 41px; height: 13px; padding-left: 2px padding-top: 2px; border: 0; font-size: 11px; } #productDetail .prd-list .prd-amount .btns { width: 17px; height: 15px; border-left: 1px solid #aaa; } #productDetail .prd-list .prd-amount .btns a { overflow: hidden; float: left; width: 100%; height: 8px; text-indent: -999px; background: none; } #productDetail .prd-list .prd-amount .btns a.btn-up { border-bottom: 1px solid #aaa; background: url(/images/d3/modern_simple/btn/btn_h5_spin_up.gif) no-repeat 50% 50%; } #productDetail .prd-list .prd-amount .btns a.btn-dw { background: url(/images/d3/modern_simple/btn/btn_h5_spin_dw.gif) no-repeat 50% 50%; } #productDetail .related-allbasket { width: 100%; padding-top: 10px; text-align: right; } */ #productDetail .related_prd_box { border:1px solid #e1e1e1; padding:0 25px; float:left; } #productDetail .related_prd_box .item-list .item { margin: 20px 0;width: 185px;font-size:11px;color:#555; } #productDetail .related_prd_box .item-list li { margin-bottom: 10px; text-align: center; } #productDetail .related_prd_box .item-list td { vertical-align: top; } #productDetail .related_prd_box .item-list .prd-thumb { width: 185px; height: 185px; margin-left: auto; margin-right: auto; } #productDetail .related_prd_box .item-list .prd-thumb img { border:1px solid #e1e1e1;width: 100%; height: 100%; } #productDetail .related_prd_box .item-list .names { line-height:16px; } #productDetail .related_prd_box .item-list .sub_names {color:#FF0000} #productDetail .related_prd_box .item-list .prd-price { font-weight: bold; color:#000000; } #productDetail .related_prd_box .item-list .prd-price .sold_out { text-align:left; color:#FF0000;font-weight:bold} #productDetail .related_prd_box .item-list .prd-price .ori_price { text-align:right; font-weight: bold; color:#000000; } #productDetail .related_prd_box .item-list .prd-price .consumer { color:#999 } #productDetail .related_prd_box .item-list .prd-price .discount { font-size:13px;color:#FF0000;font-weight: bold; } #productDetail .related_prd_box .item-list .prd-price .prd-price2 { font-size:13px;color:#000;font-weight: bold; } #price_2 { display:inline-block; padding-top:60px; } .blogSearchWrap { float: left; width: 1080px; height:260px; } .blogSearchWrap #blogSearchIframe { height:100%; } /* 산후조리원 예약 - 원클릭옵션 */ .MK-oneclick-title { margin:10px 0 10px 0; font-size:18px; text-indent: 5px; } .option_tk { display:inline-block; padding-top:20px; } .option_tk .shopdetailInfoOneclick { clear:both; overflow:hidden; zoom:1; display:block; padding:0 20px; } .option_tk .shopdetailInfoOneclick > span { float:left; display:inline-block; width:100%; color:#e74174; font-size:20px; padding:10px 0 10px 0; font-weight:600; } .shopdetailInfoName { float:left; display:inline-block; width:100%; color:#e74174; font-size:18px; padding:20px 20px; font-weight:500; } .option_tk .shopdetailInfoOneclick .shopdetailInfoList { display:inline-block; width:100%; } .option_tk .txt { display:inline-block; border-bottom:1px solid #ccc; margin:0 20px; width:320px; height:50px; padding:0 10px; } .option_tk .txt img { width:28px; padding-top:9px; } .option_tk .txt input { width:310px; border:none; padding:5px 5px 5px 0; color:#777; border-radius:3px; font-size:18px;} .datepicker { inputmode:none; } .MK-oneclick-list { overflow:hidden; zoom:1; } .MK-oneclick-list:after { content: ""; display: block; clear: both; } .MK-oneclick-list li { min-height: 44px; max-height: 365px; position:relative; box-sizing:border-box; float:left; margin: 5px 0; width:100%; padding:5px; border-radius:10px; border:1px solid #ccc; margin-right:10px; } .MK-oneclick-list li a { display: inline-block; border-radius: 1px; box-sizing:border-box; } .MK-oneclick-list li.MK-oneclick-sel a { font-weight:600; color: #e74174; } .MK-oneclick-list li.MK-oneclick-dis a { filter:alpha(opacity=60); -moz-opacity:.6; opacity:.6; } .MK-oneclick-list li.MK-oneclick-color.MK-oneclick-sel a { padding:1px; filter:alpha(opacity=100); -moz-opacit y:1; opacity:1; } .MK-oneclick-list li a span { display: block; text-align: center; vertical-align: middle; line-height: 24px; } .MK-oneclick-list li a img { width: 100%; height:100%;} .MK-oneclick-only-image { } .MK-oneclick-list li.MK-oneclick-image { width:49%; } .MK-oneclick-list li.MK-oneclick-image a { } .MK-oneclick-list li.MK-oneclick-image a img { width: 100%; border-radius: 10px; } .MK-oneclick-list li.MK-oneclick-image.MK-oneclick-sel a img { width: 100%; filter:alpha(opacity=30); -moz-opacity:.3; opacity:.3; } .MK-oneclick-list li.MK-oneclick-text .MK-oneclick-list li.MK-oneclick-text {min-width:35px; max-width:100%; height: 50px; } .MK-oneclick-list li.MK-oneclick-text a { padding: 2px; font-size:18px; } .MK-oneclick-list li.MK-oneclick-text.MK-oneclick-sel a {padding:1px;} .MK-oneclick-list li.MK-oneclick-text span { min-width: 29px; } .MK-oneclick-list li.MK-oneclick-text .MS-oneclick-sel span { min-width: 30px; line-height: 27px; } .MK-oneclick-value { padding-bottom: 3px; display:none;; } .MK-oneclick-only-text li.MK-oneclick-text { width:400px; border:1px solid #ccc; padding: 5px; text-align: center; border-radius: 5px; margin: 5px; } .MK-oneclick-only-text li.MK-oneclick-text span { height: auto; font-size:18px; font-weight:600; } .MK-oneclick-only-text li.MK-oneclick-text a { display: block; } .MK-oneclick-list li.MK-oneclick-sel { max-width: 530px; max-height: 365px; padding: 4px; background:#fef7f9; border: 1px solid #e74174; } .MK-oneclick-list li.MK-oneclick-sel span { line-height: 29px; } .MK-oneclick-list li.MK-oneclick-sel a { display: block; } .buy_on { position:absolute; width:385px; bottom:0; font-weight:400; } .buy_on a {width:100%; color: #e74174; background-color:#fff; display: inline-block; padding:8px 0; margin: 0; font-size:22px; text-align: center; } .buy_on a.buy {background-color:#e74174; color:#fff;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal {background-color:#fff; text-align:right; padding:15px; font-size:14px;} .shopdetail .shopdetailInfo .shopdetailInfoBottom .shopdetailTotal em {color:#f1191f; font-size:16px; margin-left:16px;} .navi_wrap { box-sizing:border-box; border-top:1px solid #eee; border-bottom:1px solid #eee; background:#fff} /* set up navbar */ #main-navigation { } #main-navigation .links-container { width:100%; display: flex; position: relative; overflow-x:auto; white-space:nowrap; } #main-navigation .links-container .nav-link { padding: 10px; flex-grow: 1; text-align: center; cursor: pointer; font-size:20px; font-weight:300; border-bottom: 3px solid #f2f2f2; } #main-navigation .links-container .nav-link.active { border-bottom: 3px solid #e74174; font-weight:500; } .reserve_notice { margin:20px 5px 0 5px; background:#fffce5; padding:10px 20px; border-radius:10px; } .reserve_notice span { display:block; color:#000; font-weight:600; font-size:18px; line-height:17px; padding:5px 0 5px 0; } .reserve_notice p { white-space:normal; color:#000; line-height:16px; } /* 추가상품명 */ @keyframes blink-effect { 50% { opacity: 0; } } .blink { animation: blink-effect 1.5s step-end infinite; /*animation-name: blink-effect; animation-duration: 1.5s; animation-iteration-count:infinite; animation-timing-function:step-end;*/} .blink_p { float: right; width:70%; padding-left: 50px; line-height: 2.5px; } .reserve_wrap { display:block; width:100%; margin-top:55px; border-top:1px solid #e3e3e3; } .reserve_wrap .tit { font-size:20px; font-weight:500; color: #e74174; } .reserve_terms { width:60%; height:100%; float:left; position:relative; display:block; overflow:hidden; padding:25px 15px 0 20px; } .terms_basic { display:inline-block; position:relative; margin-top: 10px; } .terms_special { display:inline-block; margin-left:20px; } .terms_basic label,.terms_special label { display:block; color:#333; float:left; font-size:20px; padding:0 20px; } .terms_basic a, .terms_special a { float: left; width:200px; height:42px; line-height:40px; font-weight:normal; background:#f5f5f5; font-size:16px; display:inline-block; text-align:center; padding:0 13px; } .terms_basic a:hover, .terms_special a:hover { font-weight:bold; } .close_bt { position:absolute; background:none !important; right:18px !important; top:16px !important; width:auto !important; } .terms_wrap { } .reserve_info { background:#f7f7f7; padding:16px 15px; border-radius:10px; } .reserve_info span { display:block; color:#444; font-weight:600; font-size:14px; padding:5px 0; } .reserve_info .event { color: #e74174; padding:0 0 5px 0; } .reserve_info .notice1 { color:#666; font-weight:600; font-size:14px; line-height:1.6; } .reserve_info p { white-space:normal; color:#777; line-height:1.6; padding: 0 0 3px 10px; background: url(/design/kichmom/reserve/ico_bul.png) 0 0 no-repeat; background-size: 8px auto; background-position:0 2px; word-break: keep-all; letter-spacing:-0.6px; font-size: 13px; } .reserve_info .color_b { color:#444; font-weight:500; } .summary { } .summary li { background:url(/design/kichmom/reserve/ico_notice.png) no-repeat; background-size:23px; padding-bottom:10px; background-position: 0 4px; width:100%; float:left; } .summary li p { font-size:17px; color:#333; line-height:25px; font-weight:400; padding-left:33px; } .shopdetailInfoMultiSelect { width:35%; height:380px; position:relative; display:block; float:left; padding:0 0 0 15px; margin-top:25px; border-left:1px solid #f4f4f4; } .MK_optAddWrap { display:inline-block; } .MK_optAddWrap .tit { font-size:22px; font-weight:500; color: #e74174; } .MK_optAddWrap .MK_inner-opt-cm li { /*position:relative; background:rgb(224 244 255 / 80%); margin:5px 0; padding:10px; border-radius:10px;*/ } .MK_optAddWrap .MK_inner-opt-cm li:last-child { border-bottom:none;} .MK_optAddWrap .MK_inner-opt-cm .MK_p-name { font-size:21px; font-weight:500; color: #e74174; } .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl {margin-top:8px; padding:0 15px; display:none; } .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl input[type="tel"] {padding:0 6px; width: 79px; } .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del {} .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del img { width: 16px; padding-top:8px; padding-left:8px; } .MK_optAddWrap .MK_inner-opt-cm .MK_price { display:none; position:absolute; bottom:21px; right:0; font-size:13px; margin-right:5px;} .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl .btn-type-02 {background-color: #bbb; width: 35px; height: 35px; text-align: center; vertical-align: middle; line-height: 35px; color: #fff; display: inline-block;} .MK_optAddWrap .MK_total { display: inline-block; font-size:22px; font-weight:500; color: #e74174; } .MK_optAddWrap .MK_txt-won {font-size:22px;} .op_info { width:100%; display:inline-block; margin-bottom:20px; line-height:30px; } .sub_tit { font-size:20px; color:#999; padding-right:20px; } .sub_tit_a { font-size:21px; color:#000; font-weight:500; line-height:26px; } .MK_optAddWrap_div { height:10px;padding:0;background:#f6f6f6;border-top:1px solid #c7c7c7; border-bottom:1px solid #c7c7c7; } .MK_optAddWrap_line { height:1px;padding:0;background:#f6f6f6; border-bottom:1px solid #c7c7c7; } #MK_innerOptTotal { text-align:left; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .MK_optAddWrap #MK_innerOptPrice, .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .MK_optAddWrap #MK_innerOptAdd { padding-bottom:5px; margin-right: 10px; } .shopdetail .shopdetailInfo .shopdetailInfoBottom .option_area .MK_optAddWrap #MK_optAddWrapList {background-color:#f6f6f6; } #MK_innerOptWrap { display:inline-block; } .serviceList { display: flex; flex-wrap: wrap; justify-content: flex-start; margin:15px 0; } .serviceList li { width:100px; height: 110px; display:inline-block; padding:10px 0; text-align:center; vertical-align:top; } .serviceList li .icoArea { display:inline-block; width:50px; height:50px; } .serviceList li .icoArea img { width:65%; overflow:hidden; filter: brightness(220%); } .serviceList li span { display:block; font-size:16px; color:#666; vertical-align:top; line-height:20px; padding-top:10px; } .serviceList li span .sub { font-size:14px; color:#ccc; } .serviceList li .icoArea .ico_01 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_08.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_02 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_02.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_03 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_21.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_04 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_22.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_05 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_30.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_06 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_01.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_07 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_04.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_08 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_03.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_09 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_06.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_10 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_13.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_11 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_10.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_12 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_05.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_13 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_20.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_14 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_15.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_15 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_11.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_16 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_11.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_17 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_12.png) no-repeat center; background-size:45px auto; } .serviceList li .icoArea .ico_18 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_16.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_19 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_14.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_20 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_19.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_21 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_18.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_22 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_29.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_23 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_09.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_24 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_17.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_26 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_24.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_27 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_24.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_28 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_25.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_29 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_23.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_30 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_26.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_31 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_28.png) no-repeat center; background-size:48px auto; } /*필라테스*/ .serviceList li .icoArea .ico_32 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_27.png) no-repeat center; background-size:48px auto; } /*UV소독기*/ .serviceList li .icoArea .ico_33 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_29.png) no-repeat center; background-size:48px auto; } /*문화센터*/ .serviceList li .icoArea .ico_34 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_34.png) no-repeat center; background-size:48px auto; } .serviceList li .icoArea .ico_35 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_35.png) no-repeat center; background-size:48px auto; } /*popup*/ .popup_layer {position:fixed;top:0;left:0;z-index: 10000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } /*팝업 박스*/ .popup_box { position: relative;top:50%;left:50%; height: 550px; width:600px;transform:translate(-50%, -50%);z-index:1002;box-sizing:border-box;background:#fff;box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-webkit-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);-moz-box-shadow: 2px 5px 10px 0px rgba(0,0,0,0.35);} .popup_box .top { position:fixed; height:60px; display:block; padding:10px 30px 8px 24px; background:#fff; width:100%; overflow:hidden; box-sizing:border-box; border-bottom: 1px solid #eee; } .popup_box .top img { width:25px; height:25px; } .popup_box h5 { display:inline-block; font-size:22px; } /*컨텐츠 영역*/ .popup_box .popup_cont { height:650px; padding:15px; padding-top:60px; } .popup_box .popup_cont iframe { border:none; height:100%; height:450px; overflow-y:scroll; width:100%; } .popup_box .popup_cont iframe scroll { overflow: hidden; } .popup_box .popup_cont iframe { -ms-overflow-style: none; } .popup_box .popup_cont iframe::-webkit-scrollbar { display:none; } /*버튼영역*/ .popup_box .popup_btn { position:absolute; bottom:0; display:table; table-layout: fixed; width:100%; } .popup_box .popup_btn a { position: relative; display: table-cell; height:30px; font-size:30px; text-align:center;vertical-align:middle;text-decoration:none; background:#e74174; color:#fff; } .popup_box .popup_btn a.close_day {background:#5d5d5d;} .popup_box .popup_btn a.close_day:before, .popup_box .popup_btn a.close_day:after{display:none;} /*오버레이 뒷배경*/ .popup_overlay{position:fixed;top:0px;right:0;left:0;bottom:0;z-index:1001;;background:rgba(0,0,0,0.5);} /*popup*/ .serviceList li .icoArea .ico_25 {display:inline-block; width:100%; height:100%; background:url(/design/kichmom/reserve/list_ico_07.png) no-repeat center; background-size:48px auto; } /* ===== PC v36 / MOBILE v35 SYNC START ===== */ /* ========================================================= 아이품고 산후조리원 예약 UI - CLEAN v15 기능 JS 수정 없음 / CSS 충돌 정리본 기본은 블랙·그레이, 선택/진행/주요 CTA에만 핑크 사용 ========================================================= */ :root { --ip-pink:#e74174; --ip-pink-soft:#fff5f8; --ip-text:#191f28; --ip-sub:#6b7684; --ip-light:#8b95a1; --ip-line:#e5e8eb; --ip-bg:#f7f8fa; --ip-bg2:#f2f4f6; --ip-white:#fff; } /* --------------------------------------------------------- 로그인 전 3D 투어 --------------------------------------------------------- */ .meta_login { position:absolute; z-index:2; top:50%; left:50%; width:calc(100% - 40px); max-width:320px; padding:24px 20px; box-sizing:border-box; transform:translate(-50%, -50%); text-align:center; color:var(--ip-text); background:rgba(255,255,255,.98); border-radius:14px; box-shadow:0 8px 28px rgba(0,0,0,.08); } .meta_login .meta_login_badge { display:inline-block; margin-bottom:10px; padding:4.5px 9px; color:var(--ip-sub); background:var(--ip-bg2); border-radius:100px; font-size:10.5px; font-weight:600; } .meta_login strong { display:block; color:var(--ip-text); font-size:18px; line-height:25px; font-weight:700; letter-spacing:-0.5px; } .meta_login .meta_login_desc { margin-top:9px; color:var(--ip-sub); font-size:12px; line-height:18px; font-weight:400; } .meta_login .bt_login { display:block; margin-top:18px; color:#fff; background:var(--ip-pink); border-radius:10px; font-size:14.5px; line-height:48px; font-weight:700; } .meta_login .meta_login_note { margin-top:9px; color:var(--ip-light); font-size:10px; line-height:15px; font-weight:400; } .meta .meta_else img { width:100%; height:100%; object-fit:cover; filter:brightness(.72) opacity(.55); } /* --------------------------------------------------------- 예약 섹션 --------------------------------------------------------- */ .option_tk { display:block; width:100%; padding:0 16px; box-sizing:border-box; } .option_tk h4 { padding:28px 0 15px; color:var(--ip-text); font-size:20px; line-height:28px; font-weight:700; letter-spacing:-0.6px; } /* --------------------------------------------------------- 예약 입력 인트로 / 진행률 --------------------------------------------------------- */ .reserve_intro { margin:0 0 15px; padding:16px; background:var(--ip-bg); border:0; border-radius:14px; } .reserve_intro_text strong { display:block; color:var(--ip-text); font-size:13.5px; line-height:19px; font-weight:700; } .reserve_intro_text p { margin-top:4.5px; color:var(--ip-sub); font-size:11px; line-height:16.5px; } .reserve_intro_text p em { color:var(--ip-text); font-style:normal; font-weight:700; } .reserve_progress { margin-top:14px; } .reserve_progress_text { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; color:var(--ip-light); font-size:10.5px; line-height:15px; } .reserve_progress_text strong { color:var(--ip-sub); font-size:11px; font-weight:600; } .reserve_progress_text strong em { font-style:normal; } .reserve_progress_bar { width:100%; height:4px; overflow:hidden; background:#e7eaee; border-radius:100px; } .reserve_progress_bar span { display:block; width:0; height:100%; background:var(--ip-pink); border-radius:100px; transition:width .25s ease; } /* --------------------------------------------------------- 예약 마감 안내 --------------------------------------------------------- */ .reserve_notice, .reserve_notice.reserve_notice--closed { position:relative; margin:0 0 16px !important; padding:15px 16px !important; box-sizing:border-box; background:var(--ip-white) !important; border:1px solid #f1c5d1 !important; border-radius:14px !important; box-shadow:none !important; } .reserve_notice--closed .reserve_notice_head { display:flex; align-items:center; gap:7px; } .reserve_notice--closed .reserve_notice_icon { display:flex !important; align-items:center; justify-content:center; flex:0 0 20px; width:20px; height:20px; padding:0 !important; color:#fff !important; background:var(--ip-pink) !important; border-radius:50%; font-size:10.5px !important; line-height:20px !important; font-weight:700 !important; } .reserve_notice--closed .reserve_notice_head strong { color:var(--ip-text); font-size:12px; line-height:18px; font-weight:700; } .reserve_notice--closed .reserve_notice_month { margin-top:9px !important; padding:0 !important; color:var(--ip-text) !important; background:none !important; font-size:15.5px !important; line-height:22px !important; font-weight:700 !important; letter-spacing:-0.4px; } .reserve_notice--closed .reserve_notice_desc { margin-top:4.5px !important; padding:0 !important; color:var(--ip-sub) !important; background:none !important; font-size:10.5px !important; line-height:16.5px !important; font-weight:400 !important; } /* --------------------------------------------------------- 옵션 번호 --------------------------------------------------------- */ .reserve_fields { display:block; counter-reset:reserveField; } .reserve_field { counter-increment:reserveField; } .reserve_field_no { font-size:0 !important; } .reserve_field_no::before { content:counter(reserveField, decimal-leading-zero); display:block; width:100%; height:100%; color:inherit; font-size:10px; line-height:27px; text-align:center; font-weight:700; } /* --------------------------------------------------------- 옵션 카드 --------------------------------------------------------- */ .reserve_field { position:relative; margin:0 0 10px; padding:16px; box-sizing:border-box; background:var(--ip-white); border:1px solid var(--ip-line); border-radius:14px; scroll-margin-top:140px; transition:border-color .18s ease, box-shadow .18s ease; } .reserve_field.is-complete { background:var(--ip-white); border-color:var(--ip-line); } .reserve_field.is-attention { border-color:var(--ip-pink) !important; box-shadow:0 0 0 3px rgba(231,65,116,.08) !important; } .reserve_field_head { display:flex; align-items:center; gap:9px; margin-bottom:13px; } .reserve_field_no { flex:0 0 27px; width:27px; height:27px; box-sizing:border-box; color:var(--ip-sub); background:var(--ip-bg2); border:0; border-radius:8px; text-align:center; font-weight:700; } .reserve_field.is-complete .reserve_field_no { color:var(--ip-sub); background:var(--ip-bg2); border:0; } .reserve_field_title { flex:1; min-width:0; padding:0; } .reserve_field_title strong { display:inline; color:var(--ip-text); font-size:14px; line-height:20px; font-weight:700; letter-spacing:-0.35px; } .required_badge { display:inline-block; margin-left:4.5px; padding:2px 5px; vertical-align:1px; color:var(--ip-light); background:var(--ip-bg2); border-radius:4.5px; font-size:9px; line-height:13.5px; font-weight:600; } .field_guide { margin-top:3px; color:var(--ip-light); font-size:10px; line-height:15px; } .field_status { flex:0 0 auto; margin:0; padding:2.5px 0; color:var(--ip-light); background:transparent; border:0; font-size:9.5px; line-height:14px; font-weight:500; white-space:nowrap; } .reserve_field.is-complete .field_status { color:var(--ip-sub); background:transparent; font-weight:600; } /* --------------------------------------------------------- 옵션 본문 공통 --------------------------------------------------------- */ .reserve_field_body, .reserve_field .shopdetailInfoOneclick, .reserve_field .shopdetailInfoList { width:100%; } .reserve_field .shopdetailInfoOneclick { clear:both; overflow:visible; } .reserve_field .MK-oneclick-title { display:block; padding:0 0 7px; color:var(--ip-light); font-size:10px; line-height:15px; font-weight:500; } .reserve_field .MK-oneclick-title::before { display:none !important; } /* --------------------------------------------------------- 원클릭 옵션 --------------------------------------------------------- */ .reserve_field .MK-oneclick-list { display:flex !important; flex-wrap:wrap; gap:8px; padding:0 !important; overflow:visible; zoom:1; } .reserve_field .MK-oneclick-list:after { display:none !important; } .reserve_field .MK-oneclick-list li { position:relative; float:none !important; width:100% !important; margin:0 !important; padding:9px !important; box-sizing:border-box; overflow:hidden; background:var(--ip-white); border:1px solid var(--ip-line); border-radius:10px; } .reserve_field .MK-oneclick-list li a { display:block !important; width:100%; box-sizing:border-box; color:var(--ip-text) !important; } .reserve_field .MK-oneclick-list li a span { display:block; color:var(--ip-text) !important; font-size:12.5px; line-height:17.5px; font-weight:500; text-align:center; } /* 실제 선택된 옵션에만 핑크 */ .reserve_field .MK-oneclick-list li.MK-oneclick-sel { background:var(--ip-pink-soft) !important; border:1.5px solid var(--ip-pink) !important; } .reserve_field .MK-oneclick-list li.MK-oneclick-sel a, .reserve_field .MK-oneclick-list li.MK-oneclick-sel a span { color:var(--ip-text) !important; font-weight:700 !important; } .reserve_field .MK-oneclick-list li.MK-oneclick-sel::after { content:"선택"; position:absolute; top:8px; right:8px; padding:3px 6.5px; color:#fff; background:var(--ip-pink); border-radius:100px; font-size:9px; line-height:13px; font-weight:600; } .reserve_field .MK-oneclick-list li.MK-oneclick-dis { background:var(--ip-bg); border-color:var(--ip-line); opacity:.45; } .reserve_field .MK-oneclick-list li.MK-oneclick-image a img { display:block; width:100% !important; height:auto !important; border-radius:8px; } /* 선택 이미지 흐림 제거 */ .reserve_field .MK-oneclick-list li.MK-oneclick-image.MK-oneclick-sel a img { opacity:1 !important; filter:none !important; } /* 텍스트형 옵션 2열 */ .reserve_field .MK-oneclick-only-text { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; padding:0 !important; } .reserve_field .MK-oneclick-only-text li.MK-oneclick-text { display:flex !important; align-items:center; justify-content:center; width:100% !important; min-height:46px; margin:0 !important; padding:9px 8px !important; } .reserve_field .MK-oneclick-only-text li.MK-oneclick-text span { height:auto; color:var(--ip-text) !important; font-size:12.5px; line-height:17px; font-weight:500; } /* --------------------------------------------------------- select / input --------------------------------------------------------- */ .shopdetailInfoSelectRow .txt, .reserve_field .txt { display:block !important; width:100% !important; height:auto !important; padding:0 !important; overflow:visible !important; box-sizing:border-box; } .reserve_field .txt input, .reserve_field .txt select, .reserve_field input[type="text"], .reserve_field input[type="date"], .reserve_field input[type="tel"], .reserve_field input[type="number"], .reserve_field input[type="email"], .reserve_field select, .reserve_field textarea { width:100% !important; height:50px !important; min-height:50px !important; margin:0 !important; padding:0 13px !important; box-sizing:border-box !important; color:var(--ip-text) !important; background:var(--ip-bg) !important; border:1px solid transparent !important; border-radius:10px !important; font-family:inherit !important; font-size:14px !important; font-weight:500 !important; text-align:left !important; outline:none !important; box-shadow:none !important; } .reserve_field textarea { height:auto !important; min-height:80px !important; padding-top:12px !important; padding-bottom:12px !important; line-height:16px !important; resize:vertical; } .reserve_field .txt input:focus, .reserve_field .txt select:focus, .reserve_field input:focus, .reserve_field select:focus, .reserve_field textarea:focus { background:var(--ip-white) !important; border-color:#aeb7c1 !important; outline:none !important; box-shadow:none !important; } /* 완료된 입력창도 핑크를 사용하지 않음 */ .reserve_field.is-complete .txt input:not(.birth-date-original), .reserve_field.is-complete .txt select, .reserve_field.is-complete input:not(.birth-date-original), .reserve_field.is-complete select, .reserve_field.is-complete textarea { color:var(--ip-text) !important; background:var(--ip-bg) !important; border-color:transparent !important; } /* --------------------------------------------------------- 분만예정일 캘린더 --------------------------------------------------------- */ .reserve_field .birth-date-original { position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; min-height:0 !important; padding:0 !important; margin:0 !important; overflow:hidden !important; border:0 !important; opacity:0 !important; pointer-events:none !important; } .reserve_field input.birth-date-native { display:block !important; position:relative !important; left:auto !important; width:100% !important; height:50px !important; min-height:50px !important; margin:0 !important; padding:0 13px !important; box-sizing:border-box !important; color:var(--ip-text) !important; background:var(--ip-bg) !important; border:1px solid transparent !important; border-radius:10px !important; opacity:1 !important; visibility:visible !important; font-family:inherit !important; font-size:14px !important; line-height:normal !important; text-align:left !important; -webkit-appearance:auto !important; appearance:auto !important; } .reserve_field input.birth-date-native:focus { background:var(--ip-white) !important; border-color:#aeb7c1 !important; outline:none !important; box-shadow:none !important; } .reserve_field input.birth-date-native::-webkit-calendar-picker-indicator { display:block !important; width:20px !important; height:20px !important; margin-left:auto !important; opacity:.75 !important; cursor:pointer !important; } /* --------------------------------------------------------- 선택한 예약 정보 / 예약금 --------------------------------------------------------- */ .shopdetailInfoMultiSelect { padding:0 16px; } .MK_optAddWrap { margin-top:5px; padding:16px; background:var(--ip-bg); border:0; border-radius:14px; } .MK_optAddWrap .MK_inner-opt-cm li { position:relative; margin-top:0; padding:0; border:0; } .MK_optAddWrap .MK_inner-opt-cm li:last-child { border-bottom:0; } .MK_optAddWrap .MK_inner-opt-cm li::before { display:block; margin-bottom:7px; content:"선택한 예약 정보"; color:var(--ip-text); font-size:12px; line-height:17px; font-weight:700; } .MK_optAddWrap .MK_inner-opt-cm .MK_p-name { display:block; padding:2px 30px 12px 0; color:var(--ip-sub); border-bottom:1px solid var(--ip-line); font-size:11.5px; line-height:18px; letter-spacing:0; } .MK_optAddWrap .MK_inner-opt-cm .MK_qty-ctrl { display:none; } .MK_optAddWrap .MK_inner-opt-cm .MK_price { display:none; } .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del { position:absolute; top:32px; right:2px; } .MK_optAddWrap .MK_inner-opt-cm .MK_btn-del img { width:14px; opacity:.55; } #MK_innerOptTotal { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:15px 0 1px; text-align:left; } .pay_total_label .MK_txt-total { display:block; color:var(--ip-sub); font-size:11.5px; line-height:16px; font-weight:600; } .pay_total_label small { display:block; margin-top:3px; color:var(--ip-light); font-size:10px; line-height:14px; } .pay_total_price { flex:0 0 auto; white-space:nowrap; } .MK_optAddWrap .MK_total { margin:0 2.5px 0 0; color:var(--ip-text); font-size:21px; line-height:25px; font-weight:800; } .MK_optAddWrap .MK_txt-won { color:var(--ip-text); font-size:13px; font-weight:700; } /* --------------------------------------------------------- 예약금 결제 안내 --------------------------------------------------------- */ .payment_notice { margin:16px 16px 8px; padding:15px; background:var(--ip-bg); border:0; border-radius:13px; } .payment_notice strong { display:block; margin-bottom:7px; color:var(--ip-text); font-size:11.5px; line-height:17px; font-weight:700; } .payment_notice p { position:relative; padding-left:10px; color:var(--ip-sub); font-size:10px; line-height:16px; } .payment_notice p + p { margin-top:3px; } .payment_notice p::before { content:""; position:absolute; top:6.2px; left:0; width:3px; height:3px; background:#b0b8c1; border-radius:50%; } .payment_notice_caption { margin:0 16px 20px; color:var(--ip-light); text-align:center; font-size:10px; line-height:15px; } /* 본문 내 기존 결제 버튼은 숨기고 하단 CTA만 사용 */ .shopdetail .shopdetailInfo .buy_on, .buy_caption { display:none !important; } /* --------------------------------------------------------- 예약 이용 안내 --------------------------------------------------------- */ .reserve_info { display:grid; grid-template-columns:1fr; gap:8px; margin:0 16px; padding:0; background:none; border-radius:0; } .reserve_info_item { padding:15px; background:var(--ip-bg); border-radius:13px; } .reserve_info_item span { display:block; padding:0 0 7px; color:var(--ip-text); font-size:11.5px; line-height:17px; font-weight:700; } .reserve_info_item p { padding:0 0 3.5px 10px; color:var(--ip-sub); font-size:10px; line-height:16.5px; } .reserve_info_item .color_b { color:#4e5968; font-weight:500; } /* --------------------------------------------------------- 약관 --------------------------------------------------------- */ #navi_container > .terms_wrap { margin:10px 16px 20px; overflow:hidden; background:var(--ip-bg); border:0; border-radius:12px; } .terms_wrap a { display:block; color:var(--ip-sub); font-size:11px; line-height:46px; font-weight:600; } /* --------------------------------------------------------- 상단 축약 진행바 --------------------------------------------------------- */ .reserve_sticky_progress { display:none; position:fixed; top:90px; left:0; width:100%; z-index:9; padding:9px 16px 8px; box-sizing:border-box; background:rgba(255,255,255,.98); border-bottom:1px solid var(--ip-line); box-shadow:none; } .reserve_sticky_progress.is-visible { display:block; } .reserve_sticky_progress_inner { width:100%; box-sizing:border-box; } .reserve_sticky_progress_text { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; } .reserve_sticky_progress_text > span { color:var(--ip-text); font-size:11px; line-height:16px; font-weight:700; } .reserve_sticky_progress_text strong { color:var(--ip-sub); font-size:10.5px; line-height:16px; font-weight:600; } .reserve_sticky_progress_text em { font-style:normal; } .reserve_sticky_progress_bar { width:100%; height:3.5px; overflow:hidden; background:#e7eaee; border-radius:100px; } .reserve_sticky_progress_bar span { display:block; width:0; height:100%; background:var(--ip-pink); border-radius:100px; transition:width .25s ease; } /* --------------------------------------------------------- 하단 고정 예약 CTA --------------------------------------------------------- */ .reserve_bottom_bar { position:fixed; left:0; right:0; bottom:0; z-index:100; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-sizing:border-box; background:rgba(255,255,255,.98); border-top:1px solid var(--ip-line); box-shadow:0 -6px 20px rgba(0,0,0,.05); } .reserve_bottom_inner { display:flex; align-items:center; gap:12px; width:100%; } .reserve_bottom_status { flex:0 0 auto; min-width:80px; } .reserve_bottom_status span { display:block; margin-bottom:1.5px; color:var(--ip-light); font-size:9.5px; line-height:14px; } .reserve_bottom_status strong { display:block; color:var(--ip-text); font-size:12px; line-height:16px; font-weight:700; white-space:nowrap; } .reserve_bottom_btn { flex:1; display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 10px; box-sizing:border-box; color:#8b95a1 !important; background:var(--ip-bg2) !important; border-radius:12px; font-size:14.5px; line-height:17px; font-weight:700; text-align:center; box-shadow:none !important; } /* 활성 CTA에만 핑크 */ .reserve_bottom_bar.is-ready .reserve_bottom_btn { color:#fff !important; background:var(--ip-pink) !important; box-shadow:none !important; } .reserve_bottom_bar.is-ready .reserve_bottom_status span { color:var(--ip-light); } .reserve_bottom_bar.is-ready .reserve_bottom_status strong { color:var(--ip-text); } /* 하단 고정 CTA 때문에 마지막 콘텐츠가 가려지지 않도록 */ html.has-reserve-fixed #container_op { padding-bottom:90px; } /* --------------------------------------------------------- 상단 메뉴 --------------------------------------------------------- */ #main-navigation .links-container .nav-link { color:var(--ip-sub); font-weight:500; } #main-navigation .links-container .nav-link.active { color:var(--ip-text); border-bottom-color:var(--ip-pink); font-weight:700; } /* --------------------------------------------------------- 작은 화면 --------------------------------------------------------- */ @media screen and (max-width:360px) { .option_tk { padding:0 13px; } .reserve_field { padding:13.5px; } .reserve_field_head { gap:7px; } .reserve_field_no { flex-basis:25px; width:25px; height:25px; } .reserve_field_no::before { line-height:25px; } .reserve_field_title strong { font-size:13.3px; } .field_status { font-size:8.8px; } .reserve_bottom_bar { padding-left:13px; padding-right:13px; } .reserve_bottom_status { min-width:72px; } .reserve_bottom_status strong { font-size:11px; } .reserve_bottom_btn { font-size:13.5px; } } /* --------------------------------------------------------- 넓은 화면 --------------------------------------------------------- */ @media screen and (min-width:768px) { .option_tk, .shopdetailInfoMultiSelect { max-width:760px; margin-left:auto; margin-right:auto; } .reserve_bottom_inner, .reserve_sticky_progress_inner { max-width:760px; margin:0 auto; } } /* ========================================================= v16 현재 선택해야 할 옵션 강조 ========================================================= */ /* 현재 입력해야 하는 카드 */ .reserve_field.is-current { border-color:var(--ip-pink) !important; box-shadow:0 0 0 1px rgba(231,65,116,.04) !important; } /* 01 번호 강조 */ .reserve_field.is-current .reserve_field_no { color:#fff !important; background:var(--ip-pink) !important; } /* 옵션명 강조 */ .reserve_field.is-current .reserve_field_title strong { color:var(--ip-pink) !important; } /* 필수 배지 강조 */ .reserve_field.is-current .required_badge { color:var(--ip-pink) !important; background:var(--ip-pink-soft) !important; } /* 현재 옵션의 안내문은 너무 강하지 않게 유지 */ .reserve_field.is-current .field_guide { color:var(--ip-sub) !important; } /* 미입력 상태에는 상태 문구 자체를 노출하지 않음 */ .field_status:empty { display:none !important; } /* 완료됐을 때만 '완료' 노출 */ .reserve_field.is-complete .field_status { display:block; color:var(--ip-sub); background:transparent; font-weight:600; } /* ========================================================= v20 타이틀 축소 / 요금표 단순화 / 제공사항 관리형 UI ========================================================= */ /* --------------------------------------------------------- 1. 섹션 타이틀 크기 축소 --------------------------------------------------------- */ .option_tk h4, .shopdetail .detail_tit, #productDetail .tit, #navi_container .h3_tit, .detail-info > .tit, .shopdetailInfoName, .shopdetailInfoName_op, .shopdetail .reserve_tit { padding-top:23px !important; padding-bottom:12px !important; color:var(--ip-text) !important; font-size:17px !important; line-height:24px !important; font-weight:700 !important; letter-spacing:-0.45px !important; } /* 일반 .tit도 같은 톤으로 */ .shopdetail .tit, #navi_container > .tit { color:var(--ip-text); font-size:17px; line-height:24px; font-weight:700; letter-spacing:-0.45px; } /* --------------------------------------------------------- 2. 요금 영역 - 최대한 심플한 리스트형 표 --------------------------------------------------------- */ #price_2 > .container { padding:0 16px !important; } /* 요금 객실 탭 */ ul.tabs { display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:6px !important; width:100% !important; margin:0 0 12px !important; padding:0 !important; list-style:none !important; } ul.tabs li { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; min-height:0 !important; height:auto !important; margin:0 !important; padding:6.5px 12px !important; box-sizing:border-box !important; color:var(--ip-sub) !important; background:#fff !important; border:1px solid var(--ip-line) !important; border-radius:100px !important; font-size:11px !important; line-height:14px !important; font-weight:600 !important; white-space:nowrap !important; cursor:pointer; } ul.tabs li.current { color:var(--ip-pink) !important; background:var(--ip-pink-soft) !important; border-color:var(--ip-pink) !important; font-weight:700 !important; } .tab-content { display:none; padding:0; } .tab-content.current { display:block; } /* 바깥 카드/배경 제거 */ .price { width:100% !important; overflow:visible !important; white-space:normal !important; border:0 !important; border-top:1px solid var(--ip-line) !important; border-radius:0 !important; border-collapse:collapse !important; border-spacing:0 !important; color:var(--ip-text) !important; background:#fff !important; font-size:11px !important; line-height:16px !important; } /* 각 행은 얇은 구분선만 */ .price tr { height:auto !important; border:0 !important; } .price td { padding:11.5px 4px !important; color:var(--ip-text) !important; background:#fff !important; border:0 !important; border-bottom:1px solid var(--ip-line) !important; vertical-align:middle !important; word-break:keep-all; } /* 제목 셀은 회색 텍스트만 */ .price .title, .price td.title { width:34%; color:var(--ip-sub) !important; background:#fff !important; font-weight:500 !important; } /* 정상가 */ .price tr .retail { color:var(--ip-light) !important; font-size:10px; text-decoration:line-through; } /* 주요 금액 행도 배경 없이 글자만 살짝 강조 */ .price tr.ip, .price tr.ip td { color:var(--ip-text) !important; font-weight:700 !important; } /* 기존 불릿 이미지/장식 제거 */ .price td p { position:static !important; padding-left:0 !important; color:inherit; background:none !important; white-space:normal; line-height:16.5px; } .price td p::before { display:none !important; } /* --------------------------------------------------------- 5. 작은 화면 --------------------------------------------------------- */ @media screen and (max-width:360px) { .option_tk h4, .shopdetail .detail_tit, #productDetail .tit, #navi_container .h3_tit, .detail-info > .tit, .shopdetailInfoName, .shopdetailInfoName_op, .shopdetail .reserve_tit { font-size:16px !important; line-height:22px !important; } .serviceList { padding:0 13px !important; gap:6px !important; } .serviceList li { min-height:43px !important; padding-left:32px !important; } .serviceList li::before { left:10px; } } /* ========================================================= PC v36 - 예약 시 제공사항 모바일 v35 정책 유지: 12개 기본 노출 / 13번째부터 더보기 PC 화면에서는 6열 ========================================================= */ .serviceList { display:grid !important; grid-template-columns:repeat(6, minmax(0,1fr)) !important; gap:0 !important; width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; background:#fff !important; } .serviceList li { position:relative !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; width:auto !important; min-width:0 !important; min-height:88px !important; margin:0 !important; padding:10px 7px !important; box-sizing:border-box !important; text-align:center !important; background:#fff !important; border:0 !important; border-right:1px solid var(--ip-line) !important; border-bottom:1px solid var(--ip-line) !important; border-radius:0 !important; } .serviceList li:nth-child(6n+1) { border-left:1px solid var(--ip-line) !important; } .serviceList li:nth-child(-n+6) { border-top:1px solid var(--ip-line) !important; } .serviceList li::before { display:none !important; content:none !important; } .serviceList li .icoArea, .serviceList .service_icon { display:flex !important; flex:0 0 30px !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; margin:0 !important; padding:0 !important; background-position:center !important; background-repeat:no-repeat !important; background-size:24px auto !important; } .serviceList li .icoArea > div { display:block !important; width:100% !important; height:100% !important; background-position:center !important; background-repeat:no-repeat !important; background-size:24px auto !important; } .serviceList li .icoArea img { display:block !important; width:24px !important; height:24px !important; object-fit:contain !important; filter:none !important; } .serviceList li > span, .serviceList .service_text { display:block !important; min-width:0 !important; padding:0 !important; color:var(--ip-text) !important; font-size:11px !important; line-height:15px !important; font-weight:600 !important; letter-spacing:-0.25px !important; text-align:center !important; word-break:keep-all !important; } .serviceList li > span .sub, .serviceList .service_text .sub { display:block !important; margin-top:1.5px !important; padding:0 !important; color:var(--ip-light) !important; font-size:9px !important; line-height:13px !important; font-weight:400 !important; } .serviceList:not(.is-expanded) li:nth-child(n+13) { display:none !important; } .service_more_wrap { padding:10px 0 0; box-sizing:border-box; } .service_more_btn { display:flex; align-items:center; justify-content:center; gap:4.5px; width:100%; min-height:42px; padding:0 10px; box-sizing:border-box; color:var(--ip-sub); background:var(--ip-bg); border:0; border-radius:10px; font-family:inherit; font-size:10.5px; line-height:15px; font-weight:600; cursor:pointer; } .service_more_btn::after { content:""; width:7px; height:7px; margin-top:-3px; border-right:1.5px solid #8b95a1; border-bottom:1.5px solid #8b95a1; transform:rotate(45deg); transition:transform .2s ease, margin .2s ease; } .service_more_btn.is-open::after { margin-top:3.5px; transform:rotate(225deg); } /* ========================================================= Kakao Maps Web SDK - 위치 상품별 상세에는 좌표/주소만 저장하고 SDK는 공통 JS에서 1회 로드 ========================================================= */ /* 상품 상세에 남아 있는 구형 지도만 숨김 */ #map_2 .root_daum_roughmap, #map_2 .root_daum_roughmap_landing, #map_2 #map_wrap { display:none !important; } #map_2 .map_addr { margin:0 16px 12px !important; padding:13px 14px !important; color:var(--ip-sub) !important; background:var(--ip-bg) !important; border-radius:12px !important; font-size:10.5px !important; line-height:16px !important; } #map_2 .map_addr span { margin-right:7px; color:var(--ip-text); font-weight:700; } .ip_kakao_location { margin:0 16px; padding-bottom:24px; } .ip_kakao_map { position:relative; width:100%; height:200px; overflow:hidden; background:var(--ip-bg); border:1px solid var(--ip-line); border-radius:14px; box-sizing:border-box; } .ip_kakao_map::before { content:"지도를 불러오는 중이에요"; position:absolute; top:50%; left:50%; z-index:0; transform:translate(-50%, -50%); color:var(--ip-light); font-size:10.5px; line-height:15px; white-space:nowrap; } .ip_kakao_map.is-ready::before { display:none; } .ip_kakao_map_error { display:none; margin-top:8px; padding:11px 12px; color:var(--ip-sub); background:var(--ip-bg); border-radius:10px; font-size:10.5px; line-height:15.5px; } .ip_kakao_map_error.is-visible { display:block; } .ip_kakao_map_actions { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:7px; margin-top:9px; } .ip_kakao_map_btn { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 10px; box-sizing:border-box; color:var(--ip-text); background:#fff; border:1px solid var(--ip-line); border-radius:10px; font-size:11px; line-height:15px; font-weight:600; text-align:center; } .ip_kakao_map_btn.is-primary { color:#fff; background:var(--ip-pink); border-color:var(--ip-pink); } @media screen and (max-width:360px) { #map_2 .map_addr, .ip_kakao_location { margin-left:13px !important; margin-right:13px !important; } .ip_kakao_map { height:180px; } } /* ========================================================= 산후조리원 표준약관 - 바텀시트 iframe 없이 페이지 DOM에서 직접 노출 ========================================================= */ .terms_basic_link { position:relative; display:flex !important; align-items:center; justify-content:space-between; padding:0 14px; box-sizing:border-box; } .terms_basic_link > div { flex:1; text-align:left; } .terms_link_arrow { flex:0 0 8px; width:8px; height:8px; margin-right:3px; border-top:1.5px solid #b0b8c1; border-right:1.5px solid #b0b8c1; transform:rotate(45deg); } .terms_sheet { display:none; position:fixed; inset:0; z-index:10050; } .terms_sheet.is-open { display:block; } .terms_sheet_dim { position:absolute; inset:0; width:100%; height:100%; padding:0; background:rgba(0,0,0,.42); border:0; cursor:pointer; } .terms_sheet_panel { position:absolute; left:50%; bottom:0; display:flex; flex-direction:column; width:100%; max-width:760px; height:calc(100% - 60px); max-height:720px; transform:translateX(-50%); overflow:hidden; background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.08); } .terms_sheet_header { position:relative; display:flex; align-items:center; justify-content:center; flex:0 0 56px; height:56px; padding:0 56px; box-sizing:border-box; background:#fff; border-bottom:1px solid var(--ip-line); } .terms_sheet_header strong { color:var(--ip-text); font-size:15.5px; line-height:20px; font-weight:700; letter-spacing:-0.4px; } .terms_sheet_close { position:absolute; top:50%; right:13px; width:36px; height:36px; padding:0; transform:translateY(-50%); background:transparent; border:0; cursor:pointer; } .terms_sheet_close span, .terms_sheet_close span::after { position:absolute; top:50%; left:50%; width:18px; height:1.5px; content:""; background:#4e5968; border-radius:10px; } .terms_sheet_close span { transform:translate(-50%, -50%) rotate(45deg); } .terms_sheet_close span::after { transform:translate(-50%, -50%) rotate(90deg); } .terms_sheet_content { flex:1 1 auto; min-height:0; padding:18px 16px 30px; box-sizing:border-box; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; outline:none; } .terms_article { padding:0 0 20px; } .terms_article + .terms_article { padding-top:20px; border-top:1px solid var(--ip-line); } .terms_article h4 { margin:0 0 10px; color:var(--ip-text); font-size:12.5px; line-height:18px; font-weight:700; letter-spacing:-0.3px; } .terms_article p { margin:0; color:var(--ip-sub); font-size:10.8px; line-height:17.5px; font-weight:400; letter-spacing:-0.2px; word-break:keep-all; } .terms_article p + p { margin-top:7.5px; } .terms_article .terms_item { padding-left:2px; color:#4e5968; } .terms_sublist { margin:8px 0; padding:10px 12px; background:var(--ip-bg); border-radius:10px; } .terms_sublist p { color:var(--ip-sub); } .terms_confirm { margin:10px 0 0; padding:14px; color:var(--ip-text); background:var(--ip-bg); border-radius:12px; font-size:10.5px; line-height:16.5px; font-weight:600; word-break:keep-all; } .terms_sheet_footer { flex:0 0 auto; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-sizing:border-box; background:#fff; border-top:1px solid var(--ip-line); } .terms_sheet_confirm { display:flex; align-items:center; justify-content:center; width:100%; min-height:50px; padding:0 10px; box-sizing:border-box; color:#fff; background:var(--ip-pink); border:0; border-radius:12px; font-family:inherit; font-size:14px; line-height:17px; font-weight:700; cursor:pointer; } html.terms-sheet-open, html.terms-sheet-open body { overflow:hidden !important; } @media screen and (max-width:360px) { .terms_sheet_panel { height:calc(100% - 40px); } .terms_sheet_content { padding-left:14px; padding-right:14px; } .terms_sheet_footer { padding-left:14px; padding-right:14px; } } /* 최신 표준약관 메타 / 목록 */ .terms_sheet_meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 18px; padding:10px 12px; background:var(--ip-bg); border-radius:10px; } .terms_sheet_meta span { color:var(--ip-sub); font-size:10px; line-height:14px; font-weight:500; } .terms_sheet_meta strong { color:var(--ip-text); font-size:10px; line-height:14px; font-weight:700; white-space:nowrap; } .terms_number_list { margin:8px 0 0; padding-left:20px; color:var(--ip-sub); list-style:decimal; } .terms_number_list > li { margin:5.5px 0; padding-left:1.5px; color:var(--ip-sub); font-size:10.8px; line-height:17.5px; font-weight:400; word-break:keep-all; } .terms_dash_list { margin:7px 0 0; padding:10px 12px; background:var(--ip-bg); border-radius:10px; list-style:none; } .terms_dash_list > li { position:relative; margin:4.5px 0; padding-left:11px; color:var(--ip-sub); font-size:10.3px; line-height:16.5px; word-break:keep-all; } .terms_dash_list > li::before { content:"-"; position:absolute; left:0; top:0; color:var(--ip-light); } /* v31에서 사용했던 임의 확인문구는 최신 표준약관 원문에 없어 제거 */ .terms_confirm { display:none; } /* ========================================================= 예약금 결제 전 - 환불규정 요약 공통 표준약관 팝업은 그대로 유지하고 이 영역만 상품코드별로 분기 ========================================================= */ .refund_preview { margin:12px 16px 16px; padding:14px; box-sizing:border-box; background:#fff; border:1px solid var(--ip-line); border-radius:12px; } .refund_preview_head { display:flex; align-items:center; justify-content:space-between; gap:10px; } .refund_preview_head > strong { color:var(--ip-text); font-size:11.5px; line-height:16px; font-weight:700; letter-spacing:-0.3px; } .refund_type { flex:0 0 auto; padding:3px 6.5px; color:var(--ip-sub); background:var(--ip-bg2); border-radius:100px; font-size:9px; line-height:13px; font-weight:600; white-space:nowrap; } .refund_type--custom { color:var(--ip-pink); background:var(--ip-pink-soft); } .refund_preview_guide { margin:8px 0 0 !important; padding:0 !important; color:var(--ip-sub) !important; font-size:10px !important; line-height:15.5px !important; word-break:keep-all; } .refund_preview_guide::before { display:none !important; } .refund_preview_guide b { color:var(--ip-text); font-weight:700; } .refund_preview_owner { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-top:11px; padding:10px 0; border-top:1px solid var(--ip-line); border-bottom:1px solid var(--ip-line); } .refund_preview_owner span { flex:0 0 auto; color:var(--ip-light); font-size:9.5px; line-height:14.5px; } .refund_preview_owner strong { color:var(--ip-text); font-size:9.8px; line-height:14.5px; font-weight:700; text-align:right; word-break:keep-all; } .refund_preview_list { margin:0; padding:0; list-style:none; } .refund_preview_list li { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:37px; padding:7px 0; box-sizing:border-box; border-bottom:1px solid #f0f1f3; } .refund_preview_list li:last-child { border-bottom:0; } .refund_preview_list li span { flex:1 1 auto; min-width:0; color:var(--ip-sub); font-size:9.6px; line-height:14.5px; word-break:keep-all; } .refund_preview_list li strong { flex:0 0 auto; color:var(--ip-text); font-size:9.8px; line-height:14px; font-weight:700; white-space:nowrap; } .refund_preview_list .refund_no { color:var(--ip-pink); } .refund_preview_caption { margin:7px 0 0 !important; padding:9px 10px !important; color:var(--ip-light) !important; background:var(--ip-bg) !important; border-radius:8px; font-size:9px !important; line-height:15px !important; word-break:keep-all; } .refund_preview_caption::before { display:none !important; } @media screen and (max-width:360px) { .refund_preview { margin-left:13px; margin-right:13px; padding:12.5px; } .refund_preview_owner, .refund_preview_list li { gap:7px; } } /* ========================================================= 상품 상세 상단 예약 상태 상품 목록의 stay-card__status / stay-status와 동일한 스타일 ========================================================= */ .shopdetail-status.stay-card__status { display:flex; flex-wrap:wrap; gap:4px; margin-top:0; } .shopdetail-status .stay-status { display:inline-flex; align-items:center; justify-content:center; height:21px; padding:0 7px; border:1px solid transparent; font-size:9px; font-weight:600; line-height:1; letter-spacing:-0.4px; white-space:nowrap; box-sizing:border-box; } /* 바로예약 */ .shopdetail-status .stay-status--realtime { border-color:#ffd1de; background:#fff0f4; color:var(--ip-pink); } /* 예약대기 */ .shopdetail-status .stay-status--waiting { border-color:#e5e7e9; background:#f5f6f7; color:#777; } /* 3D 투어 */ .shopdetail-status .stay-status--tour { border-color:#d8eaff; background:#edf6ff; color:#347dcc; } .shopdetail-status .stay-status-link { display:inline-flex; color:inherit; text-decoration:none; } /* 3D 투어 로딩 영역 */ /* ========================================================= 아이품고 PC v36 - 모바일 v35 기능 동기화 보정 기존 PC 레이아웃/MakeShop 옵션 DOM은 유지 ========================================================= */ .loc-navi .shopdetail-status { margin:10px 0 8px; } /* 예약 관련 콘텐츠는 PC 폭에서 과도하게 넓어지지 않도록 중앙 정렬 */ @media screen and (min-width:768px) { .option_tk, .shopdetailInfoMultiSelect, .payment_notice, .refund_preview, .reserve_info, #navi_container > .terms_wrap, .payment_notice_caption { width:920px; max-width:920px; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; } .reserve_bottom_inner, .reserve_sticky_progress_inner { max-width:1080px; margin:0 auto; } .reserve_sticky_progress { top:63px; } .terms_sheet_panel { max-width:760px; } } html.has-reserve-fixed #contentWrapper { padding-bottom:90px; } /* PC 기존 요금 탭의 float/고정폭 제거 */ #price_2 > .container { width:100% !important; box-sizing:border-box !important; } ul.tabs { float:none !important; } .tab-content, .tab-content.current { float:none !important; width:100% !important; height:auto !important; box-sizing:border-box !important; } /* 예약영역 내 기존 PC 고정폭/float 무효화 */ #navi_container .shopdetailInfoMultiSelect { float:none !important; height:auto !important; border-left:0 !important; } #navi_container .MK_optAddWrap { display:block !important; width:100% !important; box-sizing:border-box !important; } #navi_container #MK_innerOptWrap { display:block !important; width:100% !important; } /* PC에서는 고정 CTA가 콘텐츠 폭 중앙에 보이도록 유지 */ .reserve_bottom_bar { z-index:10020; } /* 최신 공통 지도는 기존 PC 지도 스타일과 분리 */ #map_2 .ip_kakao_location { width:100%; box-sizing:border-box; } #map_2 .ip_kakao_map { height:380px; } /* ========================================================= PC v39 - PC 예약 UX 안정화 / 타이포 확대 - PC는 px 기준 - MakeShop 옵션 DOM 순서와 원본 옵션 기능은 변경하지 않음 - 이미지 옵션: 1행 2개 / 이미지 위 + 텍스트 아래 ========================================================= */ /* PC 예약 영역 폭 */ .option_tk, .shopdetailInfoMultiSelect { max-width:1000px !important; margin-left:auto !important; margin-right:auto !important; } .reserve_bottom_inner, .reserve_sticky_progress_inner { max-width:1000px !important; margin-left:auto !important; margin-right:auto !important; } .payment_notice, .payment_notice_caption, .reserve_info, #navi_container > .terms_wrap, .refund_preview { max-width:968px; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box; } /* 전체 타이포 한 단계 확대 */ #content, #productDetail { font-size:16px; } .name { font-size:30px !important; line-height:42px !important; font-weight:700 !important; } .shopdetail-status .stay-status { height:30px !important; padding:0 10px !important; font-size:13px !important; } #main-navigation .links-container .nav-link { font-size:17px !important; line-height:24px !important; } .option_tk h4, .shopdetail .detail_tit, #productDetail .tit, #navi_container .h3_tit, .detail-info > .tit, .shopdetailInfoName, .shopdetailInfoName_op, .shopdetail .reserve_tit, .shopdetail .tit, #navi_container > .tit { font-size:22px !important; line-height:31px !important; } .intro, .shopdetail .subname, .map_addr { font-size:16px !important; line-height:25px !important; } /* 예약 인트로 / 진행상태 */ .reserve_intro { padding:22px !important; } .reserve_intro_text strong { font-size:19px !important; line-height:27px !important; } .reserve_intro_text p { font-size:16px !important; line-height:24px !important; } .reserve_progress_text, .reserve_progress_text strong { font-size:15px !important; line-height:21px !important; } .reserve_notice--closed .reserve_notice_head strong { font-size:17px !important; line-height:24px !important; } .reserve_notice--closed .reserve_notice_month { font-size:20px !important; line-height:28px !important; } .reserve_notice--closed .reserve_notice_desc { font-size:15px !important; line-height:23px !important; } /* 예약 옵션 카드 */ .reserve_field { margin-bottom:16px !important; padding:24px !important; border-radius:16px !important; } .reserve_field_head { gap:13px !important; margin-bottom:18px !important; } .reserve_field_no { flex-basis:38px !important; width:38px !important; height:38px !important; border-radius:10px !important; } .reserve_field_no::before { font-size:14px !important; line-height:38px !important; } .reserve_field_title strong { font-size:19px !important; line-height:27px !important; letter-spacing:-.35px !important; } .required_badge { margin-left:7px !important; padding:4px 8px !important; font-size:12px !important; line-height:17px !important; } .field_guide { margin-top:6px !important; font-size:15px !important; line-height:22px !important; } .field_status { font-size:14px !important; line-height:20px !important; } .reserve_field .MK-oneclick-title { padding-bottom:10px !important; font-size:15px !important; line-height:22px !important; } /* --------------------------------------------------------- 옵션: PC 2열 고정 이미지 옵션은 이미지 위 / 텍스트 아래 --------------------------------------------------------- */ .reserve_field .MK-oneclick-list, .reserve_field .MK-oneclick-only-text { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:14px !important; width:100% !important; padding:0 !important; margin:0 !important; overflow:visible !important; } .reserve_field .MK-oneclick-list::after { display:none !important; content:none !important; } .reserve_field .MK-oneclick-list li, .reserve_field .MK-oneclick-only-text li.MK-oneclick-text, .reserve_field .MK-oneclick-list li:only-child { position:relative !important; float:none !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; width:100% !important; max-width:none !important; min-width:0 !important; min-height:0 !important; height:auto !important; max-height:none !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; overflow:hidden !important; background:#fff !important; border:1px solid var(--ip-line) !important; border-radius:14px !important; } .reserve_field .MK-oneclick-list li > a { display:flex !important; flex-direction:column !important; align-items:stretch !important; width:100% !important; height:auto !important; padding:0 !important; margin:0 !important; box-sizing:border-box !important; color:var(--ip-text) !important; } /* 이미지 */ .reserve_field .MK-oneclick-list li.MK-oneclick-image a img, .reserve_field .MK-oneclick-list li.MK-oneclick-image > img { display:block !important; width:100% !important; height:auto !important; aspect-ratio:16 / 9; object-fit:cover !important; margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; opacity:1 !important; filter:none !important; } /* 이미지 옵션 텍스트: 이미지 아래 */ .reserve_field .MK-oneclick-list li.MK-oneclick-image a span, .reserve_field .MK-oneclick-list li.MK-oneclick-image > span, .reserve_field .MK-oneclick-list li.MK-oneclick-image .MK-oneclick-text { display:block !important; width:100% !important; min-height:58px !important; padding:16px 18px !important; box-sizing:border-box !important; color:var(--ip-text) !important; font-size:17px !important; line-height:25px !important; font-weight:600 !important; text-align:left !important; word-break:keep-all !important; } /* 텍스트 옵션 */ .reserve_field .MK-oneclick-list li.MK-oneclick-text, .reserve_field .MK-oneclick-only-text li.MK-oneclick-text { min-height:62px !important; justify-content:center !important; padding:0 !important; } .reserve_field .MK-oneclick-list li.MK-oneclick-text a, .reserve_field .MK-oneclick-only-text li.MK-oneclick-text a { display:flex !important; align-items:center !important; justify-content:center !important; min-height:62px !important; padding:14px 18px !important; box-sizing:border-box !important; } .reserve_field .MK-oneclick-list li.MK-oneclick-text a span, .reserve_field .MK-oneclick-only-text li.MK-oneclick-text span, .reserve_field .MK-oneclick-list li:not(.MK-oneclick-image) a span { height:auto !important; padding:0 !important; color:var(--ip-text) !important; font-size:17px !important; line-height:24px !important; font-weight:600 !important; text-align:center !important; word-break:keep-all !important; } /* 선택 상태 */ .reserve_field .MK-oneclick-list li.MK-oneclick-sel { background:var(--ip-pink-soft) !important; border:2px solid var(--ip-pink) !important; } .reserve_field .MK-oneclick-list li.MK-oneclick-sel::after { top:10px !important; right:10px !important; padding:5px 9px !important; font-size:12px !important; line-height:16px !important; z-index:3; } .reserve_field .MK-oneclick-list li.MK-oneclick-dis { opacity:.45 !important; } /* 입력형 옵션 */ .reserve_field .txt input, .reserve_field .txt select, .reserve_field input[type="text"], .reserve_field input[type="date"], .reserve_field input[type="tel"], .reserve_field input[type="number"], .reserve_field input[type="email"], .reserve_field select, .reserve_field textarea { height:60px !important; min-height:60px !important; padding-left:18px !important; padding-right:18px !important; font-size:18px !important; line-height:24px !important; border-radius:12px !important; } /* 분만예정일 native date + 별도 캘린더 버튼 */ .birth-date-native-wrap { position:relative !important; display:block !important; width:100% !important; min-height:60px !important; } .reserve_field input.birth-date-native { display:block !important; position:relative !important; width:100% !important; height:60px !important; min-height:60px !important; padding:0 64px 0 18px !important; color:var(--ip-text) !important; background:var(--ip-bg) !important; border:1px solid transparent !important; border-radius:12px !important; opacity:1 !important; visibility:visible !important; font-size:18px !important; cursor:pointer !important; color-scheme:light; -webkit-appearance:auto !important; appearance:auto !important; } .reserve_field input.birth-date-native::-webkit-calendar-picker-indicator { position:absolute !important; right:15px !important; width:26px !important; height:26px !important; opacity:1 !important; cursor:pointer !important; } .birth-date-picker-btn { position:absolute !important; top:50% !important; right:10px !important; z-index:5 !important; display:block !important; width:44px !important; height:44px !important; padding:0 !important; transform:translateY(-50%) !important; background:#fff !important; border:1px solid #e5e8eb !important; border-radius:10px !important; cursor:pointer !important; } .birth-date-picker-btn::before { content:""; position:absolute; top:11px; left:11px; width:20px; height:19px; box-sizing:border-box; border:2px solid #4e5968; border-radius:4px; } .birth-date-picker-btn::after { content:""; position:absolute; top:17px; left:13px; width:16px; border-top:2px solid #4e5968; } .birth-date-picker-btn:hover { background:#f7f8fa !important; } /* 선택 예약정보 / 결제 안내 */ .MK_optAddWrap { padding:22px !important; } .MK_optAddWrap .MK_inner-opt-cm li::before { font-size:17px !important; line-height:24px !important; } .MK_optAddWrap .MK_inner-opt-cm .MK_p-name { font-size:16px !important; line-height:24px !important; } .pay_total_label .MK_txt-total { font-size:16px !important; line-height:22px !important; } .pay_total_label small { font-size:14px !important; line-height:20px !important; } .MK_optAddWrap .MK_total { font-size:28px !important; line-height:34px !important; } .MK_optAddWrap .MK_txt-won { font-size:18px !important; } .payment_notice strong, .reserve_info_item span { font-size:17px !important; line-height:24px !important; } .payment_notice p, .reserve_info_item p { font-size:15px !important; line-height:23px !important; } .payment_notice_caption { font-size:14px !important; line-height:21px !important; } .terms_wrap a { font-size:16px !important; line-height:54px !important; } /* 고정 진행바 / 결제 CTA */ .reserve_sticky_progress_text > span { font-size:16px !important; line-height:22px !important; } .reserve_sticky_progress_text strong { font-size:15px !important; line-height:22px !important; } .reserve_bottom_status span { font-size:14px !important; line-height:20px !important; } .reserve_bottom_status strong { font-size:17px !important; line-height:24px !important; } .reserve_bottom_btn { min-height:62px !important; font-size:19px !important; line-height:25px !important; } /* 요금 / 제공사항 / 위치 */ ul.tabs li { font-size:16px !important; line-height:23px !important; padding:10px 18px !important; } .price, .detail-info .price, .detail-info .table_wrap { font-size:16px !important; line-height:24px !important; } .price td { padding:16px 10px !important; } .price tr .retail { font-size:14px !important; } .price td p { line-height:24px !important; } /* 제공사항: JS가 버튼을 정상 생성한 경우에만 13번째부터 접기 */ .serviceList:not(.has-more) li:nth-child(n+13) { display:flex !important; } .serviceList.has-more:not(.is-expanded) li:nth-child(n+13) { display:none !important; } .serviceList li { min-height:118px !important; padding:14px 8px !important; } .serviceList li .icoArea, .serviceList .service_icon { width:40px !important; height:40px !important; flex-basis:40px !important; } .serviceList li .icoArea > div, .serviceList .service_icon { background-size:34px auto !important; } .serviceList li .icoArea img { width:34px !important; height:34px !important; } .serviceList li > span, .serviceList .service_text { font-size:15px !important; line-height:21px !important; } .serviceList li > span .sub, .serviceList .service_text .sub { font-size:13px !important; line-height:19px !important; } .service_more_wrap { padding-top:14px !important; } .service_more_btn, .ip_kakao_map_btn { min-height:48px !important; font-size:15px !important; line-height:22px !important; } .ip_kakao_map_error { font-size:15px !important; line-height:22px !important; } /* 환불규정 요약 */ .refund_preview_head > strong { font-size:17px !important; line-height:24px !important; } .refund_type { font-size:13px !important; line-height:18px !important; } .refund_preview_guide, .refund_preview_owner span, .refund_preview_owner strong, .refund_preview_list li span, .refund_preview_list li strong { font-size:15px !important; line-height:22px !important; } .refund_preview_list li { min-height:50px !important; padding:12px 0 !important; } .refund_preview_caption { font-size:14px !important; line-height:21px !important; } /* 표준약관 바텀시트 */ .terms_sheet_panel { max-width:840px !important; } .terms_sheet_header strong { font-size:20px !important; line-height:27px !important; } .terms_article h4 { font-size:17px !important; line-height:24px !important; } .terms_article p, .terms_number_list > li { font-size:15px !important; line-height:24px !important; } .terms_dash_list > li { font-size:14px !important; line-height:22px !important; } .terms_sheet_meta span, .terms_sheet_meta strong { font-size:14px !important; line-height:20px !important; } .terms_sheet_confirm { font-size:18px !important; } /* ===== PC v36 / MOBILE v35 SYNC END ===== */ /* ========================================================= 아이품고 PC v40 보정 - navi_wrap sticky/active 안정화 - 예약 시 제공사항 1행 8개 - Kakao 지도 PC 레이아웃 안정화 - PC 단위 px 기준 ========================================================= */ /* ---------- 상단 섹션 내비게이션 ---------- */ .navi_wrap#topBar { position:sticky !important; top:var(--ip-pc-nav-top, 0px) !important; left:auto !important; width:100% !important; margin:20px 0 0 !important; box-sizing:border-box !important; background:#fff !important; border-top:1px solid #e5e8eb !important; border-bottom:1px solid #e5e8eb !important; z-index:1000 !important; transform:none !important; box-shadow:none !important; } /* 과거 fixed 방식은 v40에서 사용하지 않음 */ .navi_wrap#topBar.top_bar_fix { position:sticky !important; top:var(--ip-pc-nav-top, 0px) !important; width:100% !important; } #navi_container.pd_top_80 { padding-top:0 !important; } #main-navigation, #main-navigation .links-container { width:100% !important; box-sizing:border-box !important; } #main-navigation .links-container { display:flex !important; align-items:stretch !important; overflow:visible !important; white-space:normal !important; margin:0 !important; padding:0 !important; list-style:none !important; } #main-navigation .links-container .nav-link { flex:1 1 20% !important; width:20% !important; margin:0 !important; padding:0 !important; border:0 !important; border-bottom:3px solid transparent !important; text-align:center !important; background:#fff !important; box-sizing:border-box !important; } #main-navigation .links-container .nav-link > a { display:flex !important; align-items:center !important; justify-content:center !important; min-height:58px !important; padding:0 12px !important; color:#6b7684 !important; font-size:18px !important; line-height:24px !important; font-weight:600 !important; text-decoration:none !important; box-sizing:border-box !important; } #main-navigation .links-container .nav-link.active { border-bottom-color:#e74174 !important; } #main-navigation .links-container .nav-link.active > a { color:#191f28 !important; font-weight:700 !important; } #reserve, #price_2, #info_2, #map_2, #review { scroll-margin-top:90px; } /* ---------- 예약 시 제공사항 : 1행 8개 ---------- */ .serviceList { display:grid !important; grid-template-columns:repeat(8, minmax(0, 1fr)) !important; gap:0 !important; width:100% !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } /* 기존 6열용 테두리 규칙 무효화 */ .serviceList li:nth-child(6n+1) { border-left:0 !important; } .serviceList li:nth-child(-n+6) { border-top:0 !important; } .serviceList li { min-height:112px !important; padding:14px 8px !important; border-right:1px solid #e5e8eb !important; border-bottom:1px solid #e5e8eb !important; box-sizing:border-box !important; } .serviceList li:nth-child(8n+1) { border-left:1px solid #e5e8eb !important; } .serviceList li:nth-child(-n+8) { border-top:1px solid #e5e8eb !important; } .serviceList li .icoArea, .serviceList .service_icon { width:38px !important; height:38px !important; flex-basis:38px !important; background-size:30px auto !important; } .serviceList li .icoArea > div { background-size:30px auto !important; } .serviceList li .icoArea img { width:30px !important; height:30px !important; } .serviceList li > span, .serviceList .service_text { font-size:14px !important; line-height:19px !important; font-weight:600 !important; } .serviceList li > span .sub, .serviceList .service_text .sub { font-size:12px !important; line-height:17px !important; } /* v40 JS가 13번째 이후 항목에 직접 class를 부여 */ .serviceList:not(.is-expanded) li.service-extra { display:none !important; } /* 기존 nth-child 방식과 함께 동작하도록 유지 */ .serviceList:not(.is-expanded) li:nth-child(n+13) { display:none !important; } .serviceList.is-expanded li.service-extra, .serviceList.is-expanded li:nth-child(n+13) { display:flex !important; } .service_more_wrap { width:100% !important; padding:14px 0 0 !important; box-sizing:border-box !important; } .service_more_btn { min-height:48px !important; font-size:15px !important; line-height:20px !important; border:1px solid #e5e8eb !important; background:#f7f8fa !important; } /* ---------- Kakao 지도 : PC ---------- */ #map_2 { position:relative !important; display:block !important; clear:both !important; width:100% !important; min-height:0 !important; overflow:visible !important; box-sizing:border-box !important; } #map_2 .map_addr { position:relative !important; float:none !important; width:auto !important; margin:0 0 16px !important; padding:15px 17px !important; box-sizing:border-box !important; font-size:16px !important; line-height:24px !important; } #map_2 .ip_kakao_location { position:relative !important; float:none !important; width:100% !important; margin:0 !important; padding:0 0 30px !important; box-sizing:border-box !important; clear:both !important; } #map_2 .ip_kakao_map { position:relative !important; display:block !important; width:100% !important; height:420px !important; min-height:420px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; background:#f7f8fa !important; border:1px solid #e5e8eb !important; border-radius:14px !important; box-sizing:border-box !important; } #map_2 .ip_kakao_map > div { max-width:none !important; } #map_2 .ip_kakao_map_error { margin-top:10px !important; padding:13px 15px !important; font-size:14px !important; line-height:21px !important; } #map_2 .ip_kakao_map_actions { display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:10px !important; margin-top:12px !important; } #map_2 .ip_kakao_map_btn { min-height:50px !important; font-size:15px !important; line-height:20px !important; } /* ========================================================= 아이품고 PC v41 최종 보정 - 전체 콘텐츠 폭 950px - 기본 폰트 18px - navi_wrap JS fixed 방식 / tcat_fixed 자동 숨김 - hd-tpl = tit 동일 스타일 - 리뷰 앵커 보정 - PC 단위 px 기준 ========================================================= */ :root { --ip-pc-content-width:950px; } /* ---------- 전체 페이지 950px 기준 ---------- */ #contentWrapper, #contentWrap, #content { width:950px !important; max-width:950px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } #productDetail, #productDetail .page-body, #productDetail .thumb-info, #productDetail .thumb-info .info, #productDetail .thumb-info .detail, .meta, #matterWrap, .ad_bn, #navi_container, #price_2 > .container, .blogSearchWrap { width:100% !important; max-width:950px !important; box-sizing:border-box !important; } .container, .option_tk, .shopdetailInfoMultiSelect, .payment_notice, .payment_notice_caption, .reserve_info, #navi_container > .terms_wrap, .refund_preview, .reserve_bottom_inner, .reserve_sticky_progress_inner { width:100% !important; max-width:950px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } .ad_bn img, .meta img, #matterWrap img { max-width:100%; } /* ---------- 기본 폰트 18px ---------- */ #contentWrapper, #contentWrap, #content, #productDetail, #navi_container { font-size:18px !important; line-height:1.6; } input, select, textarea, button, #navi_container input, #navi_container select, #navi_container textarea, #navi_container button { font-size:18px !important; } .intro, .shopdetail .subname, .map_addr, .payment_notice p, .payment_notice_caption, .reserve_info p, .refund_preview_guide, .refund_preview_owner, .refund_preview_list, .refund_preview_caption, .terms_article p, .terms_article li { font-size:18px !important; line-height:28px !important; } .reserve_intro_text strong { font-size:21px !important; line-height:30px !important; } .reserve_intro_text p, .reserve_progress_text, .reserve_progress_text strong, .reserve_field_title .required_badge, .field_status { font-size:18px !important; } .reserve_field_title strong, .MK-oneclick-list li.MK-oneclick-text a, .MK-oneclick-only-text li.MK-oneclick-text span, .option_tk .txt input, .option_tk select, .option_tk input { font-size:20px !important; line-height:28px !important; } /* ---------- tit / hd-tpl 완전 동일 스타일 ---------- */ .option_tk h4, .shopdetail .detail_tit, #productDetail .tit, #navi_container .h3_tit, .detail-info > .tit, .shopdetailInfoName, .shopdetailInfoName_op, .shopdetail .reserve_tit, .shopdetail .tit, #navi_container > .tit, .hd-tpl { display:block !important; float:none !important; width:100% !important; margin:0 !important; padding:28px 0 16px !important; box-sizing:border-box !important; color:#191f28 !important; background:transparent !important; border:0 !important; font-size:24px !important; line-height:34px !important; font-weight:700 !important; letter-spacing:-0.5px !important; text-align:left !important; } .hd-tpl > h1, .hd-tpl > h2, .hd-tpl > h3, .hd-tpl > h4, .hd-tpl > h5, .hd-tpl > strong, .hd-tpl > span { margin:0 !important; padding:0 !important; color:inherit !important; font:inherit !important; line-height:inherit !important; letter-spacing:inherit !important; } /* ---------- navi_wrap : JS fixed 방식 ---------- */ .navi_wrap#topBar { position:relative !important; top:auto !important; left:auto !important; transform:none !important; width:950px !important; max-width:950px !important; margin:20px auto 0 !important; background:#fff !important; border-top:1px solid #e5e8eb !important; border-bottom:1px solid #e5e8eb !important; box-sizing:border-box !important; z-index:1000 !important; } .navi_wrap#topBar.is-pc-fixed, .navi_wrap#topBar.top_bar_fix.is-pc-fixed { position:fixed !important; top:var(--ip-pc-nav-top, 0px) !important; left:50% !important; width:950px !important; max-width:950px !important; margin:0 !important; transform:translateX(-50%) !important; z-index:10050 !important; box-shadow:0 6px 18px rgba(0,0,0,0.06) !important; } .ip-pc-nav-placeholder { display:block; width:100%; height:0; margin:0; padding:0; } /* navi_wrap 고정 시작 시 기존 카테고리 fixed 영역 숨김 */ .tcat_fixed.ip-hidden-by-section-nav, #tcat_fixed.ip-hidden-by-section-nav, html.ip-pc-section-nav-fixed .tcat_fixed, html.ip-pc-section-nav-fixed #tcat_fixed { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; } #main-navigation .links-container .nav-link > a { min-height:62px !important; font-size:18px !important; line-height:26px !important; } #reserve, #price_2, #info_2, #map_2, #review, .review-list#review { scroll-margin-top:100px !important; } /* ---------- 예약 시 제공사항 : 950px 안에서 1행 8개 ---------- */ .serviceList { grid-template-columns:repeat(8, minmax(0, 1fr)) !important; width:100% !important; max-width:950px !important; } .serviceList li { min-width:0 !important; min-height:120px !important; padding:15px 7px !important; } .serviceList li > span, .serviceList .service_text { font-size:16px !important; line-height:22px !important; font-weight:600 !important; word-break:keep-all !important; } .serviceList li > span .sub, .serviceList .service_text .sub { font-size:14px !important; line-height:20px !important; } .service_more_btn { font-size:18px !important; line-height:24px !important; } /* ---------- 리뷰 영역 앵커 ---------- */ .review-list#review { display:block; clear:both; width:100%; max-width:950px; box-sizing:border-box; } /* 지도 역시 950px 콘텐츠 폭을 그대로 사용 */ #map_2, #map_2 .ip_kakao_location, #map_2 .ip_kakao_map { width:100% !important; max-width:950px !important; box-sizing:border-box !important; } /* ========================================================= 아이품고 PC v43 - 상단 위치/상태 정렬 수정 - 카테고리/지역 경로(dd) : 첫 번째 줄 왼쪽 - 예약 상태 배지 : 첫 번째 줄 오른쪽 - 조리원명 : 두 번째 줄 왼쪽 전체 ========================================================= */ .loc-navi { display:grid !important; grid-template-columns:minmax(0, 1fr) auto !important; grid-template-areas: "location status" "name name" !important; align-items:center !important; column-gap:24px !important; row-gap:8px !important; width:100% !important; max-width:950px !important; margin:0 auto !important; padding:18px 0 12px !important; box-sizing:border-box !important; } .loc-navi .shopdetail-status { grid-area:status !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; justify-self:end !important; flex-wrap:wrap !important; gap:6px !important; margin:0 !important; padding:0 !important; text-align:right !important; } .loc-navi > .name { grid-area:name !important; min-width:0 !important; margin:0 !important; padding:0 !important; text-align:left !important; } .loc-navi > dd { grid-area:location !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; justify-self:start !important; gap:6px !important; min-width:0 !important; margin:0 !important; padding:0 !important; color:#8b95a1 !important; font-size:16px !important; line-height:24px !important; white-space:nowrap !important; text-align:left !important; } .loc-navi > dd .ico_map { flex:0 0 auto !important; width:16px !important; height:auto !important; margin:0 2px 0 0 !important; vertical-align:middle !important; } .loc-navi > dd a { color:#6b7684 !important; font-size:16px !important; line-height:24px !important; text-decoration:none !important; } .loc-navi > dd a:hover { color:#191f28 !important; text-decoration:underline !important; text-underline-offset:3px !important; } /* ========================================================= 아이품고 PC v46 - 리뷰 모바일 #mPowerreview 스타일을 PC 950px / px 단위로 적용 - MakeShop 기본 평점 요약 레이아웃은 건드리지 않음 - 상품후기 tit는 공통 tit 스타일 그대로 사용 ========================================================= */ /* 리뷰 섹션 */ #review.review-list, .review-list#review { display:block !important; clear:both !important; width:100% !important; max-width:950px !important; margin:48px auto 0 !important; padding:0 0 40px !important; box-sizing:border-box !important; background:#fff !important; } /* 상품후기 타이틀은 공통 .tit 스타일을 그대로 사용. 리뷰 전용으로 font-size를 덮어쓰지 않음 */ #review > .tit, #review .hd-tpl { font-size:inherit; } /* MakeShop 파워리뷰 본문 */ #review #mPowerreview, #mPowerreview { width:100% !important; max-width:950px !important; margin:0 auto !important; padding:0 !important; box-sizing:border-box !important; color:var(--ip-text) !important; background:var(--ip-white) !important; } /* 모바일과 동일하게 파워리뷰 내부 중복 타이틀/기본 버튼은 숨김 */ #review #mPowerreview > .tit, #review #mPowerreview .total .btn-white, #mPowerreview > .tit, #mPowerreview .total .btn-white { display:none !important; } /* 리뷰 수/전체리뷰 등 상단 행 */ #review #mPowerreview .total, #mPowerreview .total { margin:0 !important; padding:20px 0 16px !important; color:var(--ip-text) !important; font-size:18px !important; line-height:26px !important; font-weight:500 !important; border:0 !important; } /* 정렬/포토리뷰 옵션 */ #review #mPowerreview .photo-odr, #mPowerreview .photo-odr { margin:10px 0 16px !important; padding:0 !important; color:var(--ip-sub) !important; font-size:15px !important; line-height:22px !important; } #review #mPowerreview .photo-odr a, #mPowerreview .photo-odr a { color:var(--ip-sub) !important; font-size:15px !important; line-height:22px !important; text-decoration:none !important; } #review #mPowerreview .photo-odr a span, #review #mPowerreview .photo-odr .odr select, #mPowerreview .photo-odr a span, #mPowerreview .photo-odr .odr select { min-height:36px !important; padding:0 10px !important; box-sizing:border-box !important; color:var(--ip-sub) !important; background:var(--ip-white) !important; border:1px solid var(--ip-line) !important; border-radius:8px !important; font-size:15px !important; line-height:34px !important; } /* --------------------------------------------------------- 평점 요약 중요: table / width / display 구조를 덮어쓰지 않아서 MakeShop 원래의 5.0 + 가로 막대 레이아웃을 유지 --------------------------------------------------------- */ /* 아주만족 / 만족 / 보통 / 미흡 / 불만족 라벨만 작게 */ #review #mPowerreview .graph .txt, #review #mPowerreview .graph .label, #review #mPowerreview .grade .txt, #review #mPowerreview .grade .label, #review #mPowerreview .score .txt, #review #mPowerreview .score .label, #review #mPowerreview .satisfy .txt, #review #mPowerreview .satisfy .label, #review #mPowerreview [class*="graph"] .txt, #review #mPowerreview [class*="graph"] .label, #review #mPowerreview [class*="satisf"] .txt, #review #mPowerreview [class*="satisf"] .label, #mPowerreview .graph .txt, #mPowerreview .graph .label, #mPowerreview .grade .txt, #mPowerreview .grade .label, #mPowerreview .score .txt, #mPowerreview .score .label, #mPowerreview .satisfy .txt, #mPowerreview .satisfy .label { font-size:14px !important; line-height:18px !important; font-weight:500 !important; } /* 만족도 행 안의 일반 텍스트도 과도하게 커지지 않도록 */ #review #mPowerreview .graph li, #review #mPowerreview .grade li, #review #mPowerreview .satisfy li, #mPowerreview .graph li, #mPowerreview .grade li, #mPowerreview .satisfy li { font-size:14px !important; line-height:20px !important; } /* 오른쪽 개수 숫자 */ #review #mPowerreview .graph .num, #review #mPowerreview .grade .num, #review #mPowerreview .satisfy .num, #review #mPowerreview [class*="graph"] .num, #review #mPowerreview [class*="satisf"] .num, #mPowerreview .graph .num, #mPowerreview .grade .num, #mPowerreview .satisfy .num { color:var(--ip-light) !important; font-size:13px !important; line-height:18px !important; font-weight:400 !important; } /* --------------------------------------------------------- 개별 리뷰 목록 - 모바일 스타일 확장 --------------------------------------------------------- */ #review #mPowerreview .review-wrap, #mPowerreview .review-wrap { margin:0 !important; padding:0 !important; list-style:none !important; } #review #mPowerreview .review-wrap > li, #mPowerreview .review-wrap > li { margin:0 !important; padding:24px 0 !important; box-sizing:border-box !important; border:0 !important; border-bottom:1px solid var(--ip-line) !important; background:var(--ip-white) !important; } #review #mPowerreview .review-wrap > li:first-child, #mPowerreview .review-wrap > li:first-child { border-top:0 !important; } #review #mPowerreview .sumup, #mPowerreview .sumup { margin:0 !important; padding:6px 0 12px !important; color:var(--ip-text) !important; font-size:19px !important; line-height:28px !important; font-weight:700 !important; letter-spacing:-0.3px !important; } #review #mPowerreview .item, #mPowerreview .item { margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } #review #mPowerreview .item p, #mPowerreview .item p { margin:6px 0 !important; padding:0 !important; color:var(--ip-sub) !important; background:none !important; font-size:17px !important; line-height:26px !important; font-weight:400 !important; word-break:keep-all !important; } /* 리뷰 사진 */ #review #mPowerreview .roll, #mPowerreview .roll { display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin:14px 0 0 !important; padding:0 !important; } #review #mPowerreview .roll li, #mPowerreview .roll li { float:none !important; margin:0 !important; padding:0 !important; border:0 !important; } #review #mPowerreview .roll li img, #mPowerreview .roll li img { display:block !important; width:150px !important; height:150px !important; object-fit:cover !important; border-radius:10px !important; } /* 리뷰 없음 */ #review #mPowerreview .review-none, #mPowerreview .review-none { margin:0 !important; padding:32px 0 !important; color:var(--ip-light) !important; font-size:16px !important; line-height:24px !important; text-align:center !important; } /* 더보기 - 모바일과 같은 연회색 버튼 */ #review #mPowerreview .btn-more, #mPowerreview .btn-more { display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; height:48px !important; margin:20px 0 0 !important; padding:0 16px !important; box-sizing:border-box !important; color:var(--ip-sub) !important; background:var(--ip-bg) !important; border:0 !important; border-radius:11px !important; font-size:16px !important; line-height:48px !important; font-weight:600 !important; letter-spacing:0 !important; text-decoration:none !important; } /* 리뷰 내부 링크 */ #review #mPowerreview a, #mPowerreview a { text-decoration:none; } /* ========================================================= 아이품고 PC v47 - 파워리뷰 만족도 그래프 JS가 실제 만족도 텍스트/개수를 읽어 재구성한 영역 ========================================================= */ #review .ip-review-satisfaction-host, #mPowerreview .ip-review-satisfaction-host { box-sizing:border-box !important; min-width:0 !important; padding:0 !important; color:#191f28 !important; background:#fff !important; } #review .ip-review-satisfaction, #mPowerreview .ip-review-satisfaction { display:flex !important; flex-direction:column !important; justify-content:center !important; gap:8px !important; width:100% !important; min-width:0 !important; padding:22px 8px !important; box-sizing:border-box !important; } #review .ip-review-satisfaction-row, #mPowerreview .ip-review-satisfaction-row { display:grid !important; grid-template-columns:72px minmax(0, 1fr) 24px !important; align-items:center !important; column-gap:12px !important; width:100% !important; min-height:28px !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; border:0 !important; background:transparent !important; } #review .ip-review-satisfaction-label, #mPowerreview .ip-review-satisfaction-label { display:block !important; margin:0 !important; padding:0 !important; color:#4e5968 !important; background:transparent !important; font-size:14px !important; line-height:20px !important; font-weight:500 !important; letter-spacing:-0.2px !important; white-space:nowrap !important; } #review .ip-review-satisfaction-track, #mPowerreview .ip-review-satisfaction-track { position:relative !important; display:block !important; width:100% !important; height:10px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; box-sizing:border-box !important; background:#eeeeee !important; border:0 !important; border-radius:999px !important; } #review .ip-review-satisfaction-fill, #mPowerreview .ip-review-satisfaction-fill { position:absolute !important; top:0 !important; left:0 !important; display:block !important; height:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; background:#e74174 !important; border:0 !important; border-radius:999px !important; } #review .ip-review-satisfaction-num, #mPowerreview .ip-review-satisfaction-num { display:block !important; margin:0 !important; padding:0 !important; color:#8b95a1 !important; background:transparent !important; font-size:13px !important; line-height:20px !important; font-weight:400 !important; text-align:right !important; white-space:nowrap !important; } /* BASIC css end */