@charset "utf-8";

/* ── 원본 리셋 이식 (2026-07-28) ────────────────────────────────────────────
   원본 daeat /theme/daeat/common/css/common.css 는 Eric Meyer 리셋으로 p·h1~h6·dl·dd·
   blockquote 등의 margin/padding 을 0 으로 만든다. 그런데 dev 전역 common.min.css 는
   momo 클론이라 그 리셋이 없어(ol/ul/li 만 있음) 브라우저 기본 margin(1em)이 살아났고,
   문단 사이가 벌어지고 .applicable 체크 아이콘이 텍스트와 어긋나 보였다.
   원본의 border:0 · font-size:100% 는 momo 클론 CSS 와 충돌 여지가 있어 제외하고
   margin/padding 만 이식한다. 태그 셀렉터라 우선순위가 가장 낮아 이후 클래스 규칙을 해치지 않는다. */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0;}

/* ── 원본 body 타이포그래피 이식 (2026-07-28) ───────────────────────────────
   dev 전역 common.min.css 는 momo 클론이라 body 가 momo 폰트(Pretendard)·momo 글자색으로
   잡혀 있어 원본 daeat 와 글자 모양·굵기·줄바꿈 위치가 전부 달랐다. 원본 값으로 되돌린다.
   ★ max-width:1920px + margin:0 auto 는 1920px 초과 화면에서 본문 정렬 기준이 되므로 필수.
   background · overflow-x 등 나머지 속성은 명시하지 않아 기존 값이 그대로 유지된다. */
body {color: #2E1566; font-family: 'Spoqa Han Sans Neo', "맑은 고딕", sans-serif; font-size: 16px;
      font-weight: 400; max-width: 1920px; margin: 0 auto;}
p {transform: skew(-0.1deg);}
.bold {font-weight: bold !important;}

/* 문자열설정 */
/* 폰트설정 */
@import url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo.css");
@import url("../../fonts/Inter/Inter.css");

#content {margin-top: 100px; background: #fff;}
.purple {color: #8556E3;}

.line_map {padding: 36px 16.66% 40px;}
.line_map p {font-size: 16px; text-align: right;}
.line_map p span {color: #8556E3;}

.main_title {font-weight: 700; font-size: 46px; letter-spacing: -0.04em; margin-bottom: 30px;}
.main_title span {color: #8556E3;}
.sub_text {font-weight: 300; font-size: 18px; line-height: 26px; letter-spacing: -0.04em;}
.sub_text span {display: block;}

/* appointment */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label {display: inline-block; width: 20px; height: 20px; border: 1px solid #C8C8C8; border-radius: 4px;
    vertical-align: middle; cursor: pointer; white-space: nowrap; position: relative;}
input[class="agree"] + label::after {content:''; width: 20px; height: 20px; background: rgba(0,0,0,0);}
input.agree:checked + label {border-color: #381187; background: #381187;}
input.agree:checked + label::after {content:''; width: 20px; height: 20px;
    background: url(../images/btn_wht_check_on.png) center no-repeat; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.appointment {width: 66%; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 999; padding: 20px 5%; box-sizing: border-box;
    background: #69488E; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 18px 18px 0 0; transition: all .2s;}
.appointment.off {display: none;}
.appointment .inner form {display: flex; align-items: center; justify-content: center; gap: 12px;}
.appointment .inner form .tab_ver {display: flex; align-items: center; justify-content: center; gap: 12px;}
.appointment .inner form h3 {font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: #FFFFFF;}
.appointment .inner form ul {display: flex; align-items: center;}
.appointment .inner form ul.input_box {gap: 8px;}
.appointment .inner form ul.input_box input {background: #FFFFFF; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 8px; padding: 7px 12px; outline: none;
    font-weight: 500; font-size: 15px; line-height: 18px; color: #2E1566; vertical-align: middle; box-sizing: border-box;}
.appointment .inner form ul.input_box input::placeholder {font-family: 'Spoqa Han Sans Neo'; font-weight: 500; color: #8E8E8E;}
.appointment .inner form ul.input_box input.user_name {max-width: 164px;}
.appointment .inner form ul.input_box input.user_tel {max-width: 276px;}
.appointment .inner form ul.agree_box {gap: 12px;}
.appointment .inner form ul.agree_box li:first-child {min-width: 280px; position: relative;}
.appointment .inner form ul.agree_box label {font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #FFFFFF;}
.appointment .inner form ul.agree_box a {font-weight: 700; font-size: 14px; line-height: 20px; letter-spacing: -0.02em; color: #FFFFFF;
    display: inline-block; white-space: nowrap;}
.appointment .inner form ul.agree_box button {background: #140537; border: 1px solid rgba(46, 21, 102, 0.15); border-radius: 100px; padding: 6px 12px;
    font-weight: 700; font-size: 15px; line-height: 22px; text-align: center; color: #FFFFFF; cursor: pointer;}
.appointment .inner form label span {display: inline-block; padding-left: 0;}
.appointment .inner form li a {display: inline-block;}
.appointment .inner .close_btn {display: none;}

/* sub 02 */
.applicable .inner {padding: 0 16.66% 120px;position: relative;display: flex;align-items: center;justify-content: space-between; gap: 40px; box-sizing: border-box;}
.applicable .inner > div{width: 48%;}
.applicable .inner .text_box ul li span{width:24px;height: 24px;display: inline-block;background: url(/images/daeat/common/icon_check.svg) no-repeat center;background-size:contain;margin-top: 6px;}
.applicable .inner .text_box ul li {margin-bottom: 5px;/* line-height: 38px; */display: flex;gap: 12px;align-items: flex-start;justify-content:flex-start;}
.applicable .inner .text_box ul li .sub_text{display: inline-block;font-size: 24px;flex:1;font-weight: 400;line-height: 1.5;}
.applicable .inner .img_box img{width: 100%; border-radius: 16px;}

.method .inner {padding: 120px 16.66%;}
.method_banner{position:relative;padding-top: calc(410/1280 * 100%);box-sizing: border-box;margin-top: 48px;background-size:100% 100%;background-repeat: no-repeat;}
.method_banner .text_box{color: #fff;  position: absolute; left: 50%; top: 50%; transform: translate(0, -50%);}
.method_banner .text_box .title{font-size: 32px; margin-bottom: 16px;}
.method_banner .text_box .sub_text{font-size: 18px; font-weight: 200; line-height: 1.5;color: #fff;}
.method_banner .text_box .sub_text b{font-weight: 300;}
.method_banner .text_box .sub_text .block{display: block;}
/* ★#content 스코프 사본 — 위 89행이 페이지 CSS 에 지는 것을 막는다 (2026-08-06)
 *   증상: 개인맞춤 다이어트 9페이지의 어두운 보라 배너에서 설명 글씨가 검은색이라 안 보였다.
 *   원인: CMS 가 페이지 CSS 에 `#content` 접두를 구워 넣는다(저장 시 sanitizePageCSS).
 *         그래서 크롤로 페이지 CSS 에 들어간 `section .sub_text{color:#29203B}` 가
 *         `#content section .sub_text` = **(1,1,1)** 이 되어 89행 **(0,3,0)** 을 이겼다.
 *         원본은 페이지 CSS 에 접두가 없어 (0,1,1) < (0,3,0) 으로 흰색이 이긴다.
 *   해법: 여기에도 `#content` 를 얹어 **(1,3,0)** 으로 올린다 → 원본과 같은 결과. `!important` 는 안 쓴다.
 *   ★`.method_banner` 는 `<article id="content">` 안에 있다(실측). 밖으로 옮기면 이 규칙이 죽으니
 *     원래 규칙(89행)도 같이 남겨둔다. */
#content .method_banner .text_box .sub_text{color: #fff;}
.method .notice{font-size: 18px; color: #29203B; letter-spacing: -0.02em;font-weight: 300; margin-top: 48px;}
.bookmark-wrap{position: absolute;top: 0;left: 2%;filter: drop-shadow(0 4px 4px rgba(50, 50, 0, 0.3));}
.bookmark {display: block;width: 65px;padding: 16px 0 40px;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%);text-align: center;color: #fff;box-sizing: border-box;font-size: 14px;z-index: 1;}

/* 간편상담신청 css 깨짐 현상으로 인한 중간 미디어쿼리 추가 */
@media screen and (max-width: 1680px) {
    /* appointment */
    .appointment {width: 90%;}
    .appointment .inner form {gap: 32px; justify-content: space-between;}
    .appointment .inner form .tab_ver {width: 80%; flex-direction: column;}
    .appointment .inner form h3 {width: 20%; font-weight: 500; font-size: 20px; line-height: 28px; letter-spacing: -0.02em; color: #FFFFFF;}
    .appointment .inner form ul {width: 100%; display: flex; align-items: center;}
    .appointment .inner form ul.input_box li:nth-child(1) {width: 40%;}
    .appointment .inner form ul.input_box li:nth-child(1) input.user_name {width: 100%; max-width: 100%; box-sizing: border-box;}
    .appointment .inner form ul.input_box li:nth-child(2) {width: 60%;}
    .appointment .inner form ul.input_box li:nth-child(2) input.user_tel {width: 100%; max-width: 100%; box-sizing: border-box;}
    .appointment .inner form ul.input_box li input {box-sizing: border-box;}
    .appointment .inner form ul.input_box input.user_name {width: 100%;}
    .appointment .inner form ul.input_box input.user_tel {width: 100%;}
    .appointment .inner form ul.agree_box {gap: 8px;}
    .appointment .inner form ul.agree_box li {width: 50%;}
    .appointment .inner form ul.agree_box button {display: block; width: 100%;}
}

/* PC (해상도 1440px ~ 1540px) */
@media screen and (max-width:1540px) {
    .line_map {padding: 56px 12% 40px;}

    /* sub 02 */
    .applicable .inner {padding: 0 12% 120px;}
    .method .inner {padding: 120px 12%;}
}
/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width:1440px) {
    .line_map {padding: 56px 8% 40px;}

    /* sub 02 */
    .applicable .inner {padding: 0 8% 120px;}
    .method .inner {padding: 120px 8%;}
}
/* PC (해상도 1024px ~ 1058px) */
@media screen and (max-width:1058px) {
    .line_map {padding: 56px 6% 40px;}

    /* sub 02 */
    .applicable .inner {padding: 0 6% 60px;}

    .method .inner {padding: 120px 6%;}
    .method_banner{padding-top:calc(268/680 *100%);}
    .method_banner .text_box .sub_text .block{display: inline-block;}
    .method_banner .text_box .sub_text i{display: block;}
    .method_banner .text_box .title{font-size: 24px;}
    .method_banner .text_box .sub_text{font-size: 14px;}
    .bookmark-wrap{left: 3%; }
    .bookmark {width: 60px;font-size: 12px;padding: 15px 0 34px;}
}

/* 태블릿 (해상도 769px ~ 1024px) */
@media screen and (max-width:1024px) {
    /* content */
    .line_map {padding: 32px 5% 46px;}
    .line_map p {font-size: 11px;}

    /* sub 02 */
    .applicable .inner {padding: 0 5% 80px;gap: 24px;}
    .applicable .inner .text_box .main_title .block {display: inline;}
    .applicable .inner .text_box .main_title i {display: block;}
    .applicable .inner .text_box ul li span{width:16px;height: 16px;margin-top: 3px;}
    .applicable .inner .text_box ul li {margin-bottom: 5px;align-items: flex-start;line-height: 20px;gap: 4px;}
    .applicable .inner .text_box ul li i{display: block;}
    .applicable .inner .text_box ul li .sub_text{font-size: 14px;/* line-height: 1.4; */}

    .method .inner {padding: 80px 5%;}
    .method .notice{font-size: 14px;margin-top: 16px;}
}

/* 모바일 가로, 모바일 세로 (해상도 375px ~ 768px)*/
@media screen and (max-width:768px) {
    #wrap { min-width: 375px; }
    /* content */
    #content {margin-top: 106px;}
    .line_map {display: none;}

    /* appointment */
    input[type="checkbox"] + label {width: 14px; height: 14px;}
    input[class="agree"] + label::after {width: 14px; height: 14px;}
    input.agree:checked + label {border-color: #381187; background: #381187;}
    input.agree:checked + label::after {width: 14px; height: 14px;}

    .appointment {width: 100%; padding: 20px 5% 40px; bottom: 69px; display: none;}
    .appointment.on {display: block;}
    .appointment input[type="checkbox"] + label {vertical-align: bottom;}
    .appointment .inner form {flex-direction: column; align-items: flex-start; gap: 16px;}
    .appointment .inner form .tab_ver {width: 100%; align-items: flex-start; gap: 8px; flex-direction: row;}
    .appointment .inner form h3 {width: 100%; font-size: 18px; line-height: 26px; display: none;}
    .appointment .inner form ul {flex-direction: column;}
    .appointment .inner form ul.input_box {width: 70%;}
    .appointment .inner form ul.input_box li:nth-child(1) {width: 100%;}
    .appointment .inner form ul.input_box li:nth-child(2) {width: 100%;}
    .appointment .inner form ul.input_box li input {border-radius: 4px;}
    .appointment .inner form ul.agree_box {width: 30%; flex-direction: column-reverse; gap: 4px;}
    .appointment .inner form ul.agree_box li {width: 100%;}
    .appointment .inner form ul.agree_box li:nth-child(1) {position: absolute; bottom: 16px; left: 5%;}
    .appointment .inner form ul.agree_box label {font-weight: 400; font-size: 12px; line-height: 15px;}
    .appointment .inner form ul.agree_box label span {padding-left: 0;}
    .appointment .inner form ul.agree_box a {font-size: 12px; line-height: 15px; vertical-align: initial;}
    .appointment .inner form ul.agree_box button {height: 77px; font-size: 14px; line-height: 20px; border: 1px solid rgba(46, 21, 102, 0.15);
        border-radius: 4px; padding: 6px; letter-spacing: -0.02em;}
    .appointment .inner .close_btn {display: block; color: #fff; font-size: 12px; line-height: 15px; position: absolute; bottom: 16px; right: 5%;}
    .appointment .inner .close_btn::before {content: ''; display: inline-block; width: 14px; height: 14px;
        background: url(../images/btn_close_wht.png) center no-repeat; background-size: contain; vertical-align: bottom; padding-right: 4px;}

    /* header */
    #headerAreaMobile .sub_page .header_inner .header_inner_top {padding: 18px 5%; display: flex;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .btn_back {display: inline-block; text-indent: -999px; width: 24px; height: 24px;
        background: url(../images/btn_back_mo.png) center no-repeat; background-size: contain;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here {font-weight: 700; font-size: 16px; position: relative; color: #29203B;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::before {content: ''; display: inline-block; width: 24px; height: 24px; vertical-align: text-top;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::after {content: ''; display: inline-block; width: 24px; height: 24px; transform: rotate(0);
        position: relative; top: 0; right: 0; background: url(../images/arrow_bk_down_mo.png) center no-repeat; background-size: contain; vertical-align: text-top; transition: all .2s;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.on::after {transform: rotate(540deg);}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow {pointer-events: none; cursor: default;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow::after {display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.non_arrow::before {display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu {position: absolute; top: 48px; left: 50%; transform: translateX(-50%); z-index: 100;
        width: 70%; border: 1px solid #D9D9D9; box-shadow: 0px 4px 8px rgba(116, 53, 255, 0.15); border-radius: 8px; display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li a {display: block; width: 100%; box-sizing: border-box; padding: 18px 5%;
        font-weight: 500; font-size: 14px; letter-spacing: -0.01em; text-align: center; color: rgba(46, 21, 102, 0.5);
        background: #FFFFFF; box-shadow: inset 0px -1px 0px rgba(46, 21, 102, 0.15);}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li a.on {color:#7435FF;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li:first-child a {border-radius: 8px 8px 0 0;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .dropdown_menu > li:last-child a {border-radius: 0 0 8px 8px;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .all_menu {display: inline-block; width: 24px; height: 24px;
        background: url(../images/menu_mo_sub.png) right center no-repeat; background-size: contain;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .all_menu span {font-size: 0; color: #FFFFFF; text-indent: -9999px;}

    #headerAreaMobile .header_inner .header_inner_bottom {padding: 0px 5%; justify-content: normal; align-items: center; border-top: 1px solid rgba(46, 21, 102, 0.1);}
    #headerAreaMobile .header_inner .header_inner_bottom nav {overflow: hidden; position: relative; height: 46px;}
    #headerAreaMobile .header_inner .header_inner_bottom nav h3 {font-weight: 500; font-size: 15px; line-height: 46px; text-align: center; color: #2A1D39;}

    /* sub 02 */
    .applicable .inner {flex-direction: column;gap: 1em;padding: 0 5% 60px;}
    .applicable .inner::after {width: 80%; padding-top: calc(302/392*100%); right: -10%;}
    .applicable .inner .text_box {width: 100%; padding: 56px 0 0;}
    .applicable .inner .img_box{width: 100%;}
    .applicable .inner .img_box img{border-radius:8px;}
    .applicable .inner .text_box .main_title i {display: inline;}
    .applicable .inner .text_box .main_title b {display: block;}
    .applicable .inner .sub_text .block {display: inline;}
    .applicable .inner .sub_text i {display: block;}


    .method .inner {padding: 60px 5%;}
    .method .main_title i{display: block;}
    .method .sub_text i{display: block;}
    .method_banner{padding-top: calc(400/345 *100%);margin-top: 16px;}
    .method_banner .text_box{left:5%;top: 10%; transform: translate(0,0);}
    .bookmark-wrap{ left:auto;right: 5%;}
    .bookmark {width: 40px;font-size: 9px;padding: 10px 0 22px;}
}
/* ── 서브페이지 모바일 헤더 (2026-07-29, momo 방식 이식) ──────────────
 * header.php 가 .sub_page(뒤로 + 카테고리 드롭다운 + 햄버거)를 주입한다.
 * ★이 파일이 sub_common.min.css 보다 뒤에 로드되면서 .here / .all_menu 를
 *   배경이미지 방식으로 덮어쓰는데 그 이미지(arrow_bk_down_mo.png, menu_mo_sub.png)가
 *   daeat 에도 원본에도 없다 → 화살표가 막대로, 햄버거가 점으로 깨졌다.
 *   momo 는 이 파일을 아예 로드하지 않아 min.css 의 순수 CSS 방식이 살아 있다.
 *   여기서 min.css 방식으로 되돌린다(이미지 의존 제거).
 * ------------------------------------------------------------------ */
@media screen and (max-width:768px) {
    /* 기본 모바일 헤더 숨김 (서브페이지에서는 .sub_page 만 쓴다) */
    #headerAreaMobile > .header_inner {display: none;}
    #headerAreaMobile .sub_page .header_inner {position: fixed; top: 0; left: 0; width: 100%; transform: translateY(0);
        transition: transform .3s ease; background: #fff; border: 0; border-bottom: 1px solid #E2E2E2; box-shadow: none;}
    /* 카테고리 옆 화살표 — 이미지 대신 CSS 삼각형 (min.css 방식) */
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::before {display: none;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here {padding-right: 26px;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here::after {content: ''; display: inline-block;
        width: 6px; height: 6px; position: absolute; top: 50%; right: 0; background: none;
        border: 2px solid #29203B; border-top: none; border-left: none;
        transform: rotate(45deg) translate(-50%, -50%); transition: all .2s;}
    #headerAreaMobile .sub_page .header_inner .header_inner_top .here.on::after {transform: rotate(225deg); top: 40%;}
    /* 햄버거 3줄바 오버라이드 제거 (2026-08-07).
       원본(daeatdiet.com)은 24x24 이미지(menu_mo_sub.png)다 — 위 234행에 이미 이식돼 있었는데
       그 이미지가 우리 서버에 **없어서**(404) 여기서 막대 3개로 대체해 뒀었다.
       그 3줄바가 32x32 + inline-flex 라 LI 가 39px 을 차지 → 상단줄 75(원본 60),
       헤더 123(원본 107)이 되어 `#content` 오프셋 106 과 **17px 겹쳤다**(사용자 신고).
       이미지를 원본에서 받아 /assets/images/ 에 넣었으므로 이 오버라이드를 걷어낸다. */

    /* ★막대 규칙 상쇄 (2026-08-08 QA). 위에서 `.all_menu` 를 이미지로 되돌렸지만
       sub_common.min.css(momo 클론)의 `.all_menu span{display:block;height:2px;background:#161718}` 은
       234~236행이 건드리지 않는 속성이라 **그대로 살아남아** 24px 햄버거 이미지 위에
       2px×3 = 6px 짜리 검은 덩어리가 겹쳐 보였다(사용자 신고).
       원본은 `<span>전체메뉴</span>` 를 font-size:0 + text-indent 로만 숨긴다 → 그 방식으로 되돌린다. */
    #headerAreaMobile .sub_page .header_inner .header_inner_top .all_menu span {
        display: inline; width: auto; height: auto; background: none;
    }
}