:root {
  /*App 테마*/
  & {
    /* color */
    --primary: #00cf78;
    --sub-yellow: #ffd53f;
    --sub-red: #ff6067;

    --sys-caption: #0aa464;
    --sys-red: #f0101b;

    --col-white: #ffffff;
    --col-gray6: #e0e2e4;
    --col-gray5: #c5c7ca;
    --col-gray4: #9b9da1;
    --col-gray3: #63656a;
    --col-gray2: #48494d;
    --col-black: #232426;

    /* background */
    --bg-white: var(--col-white);
    --bg-gray6: #f8f9fb;
    --bg-gray5: #f2f4f6;
    --bg-gray4: #e0e2e4;
    --bg-gray3: #9c9d9f;
    --bg-gray2: #63656a;
    --bg-black: #232426;
    --bg-active: #E6FAF1;
    --bg-error: rgba(255, 96, 103, 0.05);
    --bg-blackRGB: rgba(35, 36, 38, 0.4);

    --dim-black: rgba(35, 36, 38, 0.7);
    --dim-white: rgba(255, 255, 255, 0.7);

    /* border / shadow */
    --bor-primary: var(--primary);
    --bor-gray: #f8f9fb;
    --bor-blackRGB: rgba(35, 36, 38, 0.05);
    --box-shadow: 0px 0px 16px 0px rgba(35, 36, 38, 0.1);
  }

  & {
      /*jquery 캘린더 관련 테마*/
    --calendar-date-title-color: #232426;
    --calendar-date-select-color: #ffffff;
    --calendar-date-select-bg: #232426;
    --calendar-date-today-bg: #E6FAF1;
    --calendar-day-name-color: #9b9da1;
    --calendar-date-disable-color: #E0E2E4;
    --calendar-date-default-color: #48494D;
    --calendar-date-sun-color: #FF6067;
    --calendar-date-sat-color: #63656a;
  }

  & {
      /* font */
    --h1-f: 1.5rem;
    --h2-f: 1.25rem;
    --h3-f: 1.125rem;

    --p1-f: 1.25rem;
    --p2-f: 1.125rem;
    --p3-f: 1rem;
    --p4-f: .875rem;
    --p5-f: .8125rem;
    --p6-f: .75rem;

    --span1-f: 1rem;
    --span2-f: .875rem;
    --span3-f: .8125rem;
    --span4-f: .75rem;
    --span5-f: .625rem;

    --misc1-f: 1rem;
    --misc2-f: .8125rem;
    --misc3-f: .75rem;

    --line-th: line-through;
    --line-under: underline;
    --bold-f: 700;
    --line12-h: 1.2;
    --line16-h: 1.6;
  }
}


/* Reset */
@font-face {
  font-family: 'Pretendard Variable';
  src: url('../font/PretendardVariable.woff2');
}
html { font-size: 16px; scroll-behavior: smooth; }
body, input, select, textarea, pre, button { font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; }
body * { outline: none; box-sizing: border-box; font-synthesis: none; }
* { -webkit-tap-highlight-color: transparent; }
html, body, h1, h2, h3, h4, h5, h6, div, p, blockquote, pre, code, address, ul, ol, li, menu, nav, section, article, aside, dl, dt, dd, table, thead, tbody, tfoot, label, caption, th, td, form, fieldset, legend, hr, input, button, textarea, object, figure, figcaption, hr { margin: 0; padding: 0; }
body { font-size: 1rem; -webkit-text-size-adjust: none; word-wrap: break-word; line-height: 1.2; font-weight: 500; }
body, input, select, textarea, pre { border: none; font-size: 1rem; color: var(--col-gray2); margin: 0 auto; }
button { border: none; outline: none; cursor: pointer; background-color: transparent; font-size: 1rem; }
ul, ol, li { list-style: none; }
table { border-spacing: 0; }
img, fieldset { border: 0; }
address, cite, code, em { font-style: normal; }
label, img, input, select, textarea, button { vertical-align: middle; }
.hide, legend { overflow: hidden; display: block; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); }
hr { border: none; height: 1px; background-color: transparent; }
main, header, section, nav, footer, aside, article, figure { display: block; }
a { color: var(--col-gray2); text-decoration: none; }
pre { white-space: pre-wrap; word-wrap: break-word; color: var(--col-gray2); line-height: 1.5; font-size: 1rem; }
img { max-width: 100%; }
strong, em { display: inline-block; font-weight: var(--bold-f); }
input[type='password'], input[type='tel'], input[type='time'], input[type='text'], input[type='search'], input[type='email'], input[type='file'], input[type='url'], input[type='number'], input[type='date'], textarea { transition: all 0.3s; box-sizing: border-box; vertical-align: middle; -webkit-appearance: none; -moz-appearance: none; appearance: none; caret-color: var(--primary); }
input[type='password']::-moz-reveal, input[type='password']::-ms-reveal { display: none; width: 0; height: 0; }
input[type='number']::-webkit-outer-spin-button, input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type='text']::-ms-clear { display: none; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: var(--col-gray2); -webkit-box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s; border: 1px solid #f5f5f5; }
input::placeholder { color: var(--col-gray5); font-weight: 500; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select::-ms-expand { display: none; }
textarea { width: 100%; resize: none; border-radius: 0.75rem; padding: 1rem; border: 1px solid var(--bor-blackRGB); font-size: var(--p5-f); line-height: var(--line16-h); font-weight: var(--bold-f); }
textarea::placeholder { color: var(--col-gray5); font-size: var(--p5-f); line-height: var(--line16-h); font-weight: 500; }
textarea:valid { background-color: var(--bg-gray6); }
textarea:focus { background-color: var(--bg-active); }

/* rem rule */
@media (max-width: 359px)
{
    html { font-size: 15px; }
}
@media (max-width: 346px)
{
    html { font-size: 14px; }
}
@media (max-width: 321px)
{
    html { font-size: 13px; }
}

/* swiper */
.swiper-horizontal.dot_pagenation > .swiper-pagination-bullets { bottom: 1rem; }
.dot_pagenation .swiper-pagination-bullet { background-color: #F2F4F6; width: 0.375rem; height: 0.375rem; opacity: 1; margin: 0 2px !important; }
.dot_pagenation .swiper-pagination-bullet-active { background-color: rgba(35, 36, 38, 0.4); opacity: 1; }

/* font-size */
.h1_f { font-size: var(--h1-f); }
.h2_f { font-size: var(--h2-f); }
.h3_f { font-size: var(--h3-f); }
.p1_f { font-size: var(--p1-f); line-height: var(--line16-h); }
.p2_f { font-size: var(--p2-f); line-height: var(--line16-h); }
.p3_f { font-size: var(--p3-f); line-height: var(--line16-h); }
.p4_f { font-size: var(--p4-f); line-height: var(--line16-h); }
.p5_f { font-size: var(--p5-f); line-height: var(--line16-h); }
.p6_f { font-size: var(--p6-f); line-height: var(--line16-h); }
.span1_f { font-size: var(--span1-f); }
.span2_f { font-size: var(--span2-f); }
.span3_f { font-size: var(--span3-f); }
.span4_f { font-size: var(--span4-f); }
.span5_f { font-size: var(--span5-f); }
.misc1_f { font-size: var(--misc1-f); }
.misc2_f { font-size: var(--misc2-f); }
.misc3_f { font-size: var(--misc3-f); }

/* font-style */
.line_th { text-decoration: var(--line-th); }
.line_under { text-decoration: var(--line-under); }
.bold_f { font-weight: var(--bold-f); }

/* line-height */
.line12_h { line-height: var(--line12-h); }
.line16_h { line-height: var(--line16-h); }

/* color */
.primary { color: var(--primary); }
.sub_yellow { color: var(--sub-yellow); }
.sub_red { color: var(--sub-red); }
.sys_caption { color: var(--sys-caption); }
.sys_red { color: var(--sys-red); }
.col_white { color: var(--col-white); }
.col_gray6 { color: var(--col-gray6); }
.col_gray5 { color: var(--col-gray5); }
.col_gray4 { color: var(--col-gray4); }
.col_gray3 { color: var(--col-gray3); }
.col_gray2 { color: var(--col-gray2); }
.col_black { color: var(--col-black); }
.col_sky { color: #6F98C9; }
.col_blue { color: #0062FF; }
.col_yellow { color: #FFD53F; }

/* background-color */
.bg_primary { background-color: var(--primary); }
.bg_white { background-color: var(--bg-white); }
.bg_gray6 { background-color: var(--bg-gray6); }
.bg_gray5 { background-color: var(--bg-gray5); }
.bg_gray4 { background-color: var(--bg-gray4); }
.bg_gray3 { background-color: var(--bg-gray3); }
.bg_gray2 { background-color: var(--bg-gray2); }
.bg_black { background-color: var(--bg-black); }

.bg_active { background-color: var(--bg-active); }
.bg_error { background-color: var(--bg-error); }
.bg_blackRGB { background-color: var(--bg-blackRGB); }

/* border / box-shadow */
.bor_primary { border: 1px solid var(--bor-primary); }
.bor_gray { border: 1px solid var(--bor-gray); }
.bor_blackRGB { border: 1px solid var(--bor-blackRGB); }
.box_shadow { box-shadow: var(--box-shadow); }

/* button size */
.btn_large { width: 100%; border-radius: 0.5rem; font-size: var(--p3-f); padding-block: 1rem; font-weight: var(--bold-f); line-height: 1.625rem; transition: 0.3s; }
.btn_medium { display: flex; gap: .5rem; border-radius: 0.5rem; font-size: var(--p4-f); padding: .75rem 1rem; font-weight: var(--bold-f); line-height: 1.375rem; }
.btn_small { display: flex; gap: .5rem; align-items: center; border-radius: 0.25rem; font-size: var(--p5-f); padding: .6875rem .75rem; font-weight: var(--bold-f); line-height: 1.125rem; }
.btn_small img { width: 1.25rem; }
.btn_round { display: flex; gap: .25rem; align-items: center; border-radius: 6.25rem; font-size: var(--p5-f); padding: .625rem 1rem; font-weight: var(--bold-f); line-height: 1.125rem; }
.btn_round img { width: 1.25rem; }
.btn_misc { display: inline-block; border-radius: .25rem; font-size: var(--span4-f); padding: .5rem .75rem; font-weight: var(--bold-f); line-height: .875rem; }

/* button color */
.btn_active { background-color: var(--primary); color: var(--col-white); }
button:disabled,
.btn_disable { background-color: var(--bg-gray4); color: var(--col-gray4); }
.btn_line { background-color: var(--bg-white); color: var(--sys-caption); border: 1px solid var(--bor-primary); }
.btn_gray { background-color: var(--bg-gray6); color: var(--col-gray2); }
.btn_white { background-color: var(--bg-gray8); color: var(--col-gray3); border: 1px solid var(--bor-blackRGB); }
.btn_red { background-color: var(--sub-red); color: var(--col-white); }

/* 더보기 버튼 */
.more_btn { display: flex; justify-content: center; } 
.more_btn button img { transition: 0.3s; } 
.more_btn button.up img { transform: rotate(-180deg); }

/* dim */
.dim_black { background-color: var(--dim-black); }
.dim_white { background-color: var(--dim-white); }

/* tag */
.tag_box { display: flex; gap: .25rem; }
.tag_active { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: var(--primary); color: var(--col-white); border: 1px solid transparent; }
.tag_grline { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: var(--bg-white); border: 1px solid var(--primary); color: var(--sys-caption); }
.tag_gray { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: var(--bg-gray4); color: var(--col-gray3); border: 1px solid transparent; }
.tag_grayline { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: var(--bg-white); border: 1px solid var(--bg-gray4); color: var(--col-gray3); }
.tag_black { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: var(--bg-black); color: var(--col-white); border: 1px solid transparent; }
.tag_pink { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: var(--bg-error);  color: var(--sys-red); border: 1px solid transparent; }
.tag_red { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: var(--sub-red);  color: var(--col-white); border: 1px solid transparent; }
.tag_green { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: #E6FAF1; color: var(--sys-caption); border: 1px solid transparent; }
.tag_orange { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: #FFF5ED; color: #ED5332; }
.tag_blue { display: inline-block; border-radius: .25rem; padding: .25rem .5rem; font-size: var(--span4-f); font-weight: var(--bold-f); background-color: #F3F9FF; color: #6F98C9; }

/* content-guide */
.main { max-width: 500px; margin: 0 auto; }
.pd_b60 { padding-inline: 1.25rem; padding-bottom: 3.75rem; }
.pd_b150 { padding-inline: 1.25rem; padding-bottom: 9.375rem; }
.bg_grayWrap { background-color: var(--bg-gray6); min-height: calc(100svh - 3rem); }

/* margin / padding */
.mt_8 { margin-top: .5rem; }
.mt_12 { margin-top: .75rem; }
.mt_20 { margin-top: 1.25rem; }
.mt_32 { margin-top: 2rem; }
.mt_40 { margin-top: 2.5rem; }
.pt_24 { padding-top: 1.5rem; }
.pt_40 { padding-top: 2.5rem; }
.px_20 { padding-inline: 1.25rem; }
.py_40 { padding-block: 2.5rem; }

/* align */
.txt_right { text-align: right; }

/* display */
.flex { display: flex; }
.flex_wrap { flex-wrap: wrap; }
.relative { position: relative; }
.dis_none { display: none; }

/* fix-button */
.btn_fix { max-width: 500px; margin: 0 auto; padding-top: 1.5rem; padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 0.5rem; display: flex; position: fixed; bottom: 0; left: 0; right: 0; gap: 0.25rem; z-index: 30; background-image: linear-gradient(180deg, transparent 0%, #FFFFFF 25%); }
.btn_fix > * { width: 100%; }

/* input grid */
.inp_flexBox { display: flex; gap: .25rem; }
.inp_flexBox .input_ptck { width: 100%; }
.input_block { width: 100%; position: relative; }
.input_block label:not(.chk_label) { font-size: var(--span2-f); display: block; margin-bottom: .75rem; font-weight: var(--bold-f); }
.input_error { color: var(--sys-red); font-size: var(--span4-f); margin-top: 0.5rem; }
.input_info { position: relative; padding-left: .5rem; color: var(--col-gray5); font-size: var(--span4-f); margin-top: 0.5rem; }
.input_info::before { content: ""; position: absolute; display: block; width: 2px;
  height: 2px; left: 2px; top: 0.4rem; background: var(--col-gray5); border-radius: 50%; }
.input_ok { position: relative; padding-left: .5rem; color: var(--sys-caption); font-size: var(--span4-f); margin-top: 0.5rem; }
.input_ok::before { content: ""; position: absolute; display: block; width: 2px;
  height: 2px; left: 2px; top: 0.4rem; background: var(--sys-caption); border-radius: 50%; }

.input_ptck { position: relative; }
.input_ptck input { padding-left: 1rem; padding-right: 1rem; border-radius: 0.5rem; height: 3rem; width: 100%; border: 1px solid #f5f5f5; font-size: var(--span3-f); font-weight: var(--bold-f); }
.input_ptck input:focus { background-color: var(--bg-active); }
.input_ptck input.inp_gray { background-color: var(--bg-gray6); }
.input_ptck input.inp_gray::placeholder { color: var(--col-gray2); font-weight: var(--bold-f); }

.input_ptck .inp_icons { position: absolute; right: 1rem; top: 50%; display: flex; gap: 0.25rem; align-items: center; transform: translateY(-50%); }
.input_ptck .inp_icons .btnClear { opacity: 0; width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_delite_round_dim.svg') no-repeat center / 1.5rem; cursor: pointer; }
.input_ptck .inp_icons .pass_view { display: block; width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_view_on.svg') no-repeat center / 1.5rem; }
input[type=password]:placeholder-shown + .inp_icons .pass_view { opacity: 0; }
.input_ptck .inp_icons .pass_view.active { background-image: url('../images/icons/ic_view_off.svg'); }
.input_ptck .inp_icons .btn_active_mic { margin-right: -0.25rem; }

.input_ptck input.alert { background-color: var(--bg-error); border-color: var(--sub-red); }
.input_ptck input.alert + .inp_icons .btnClear { opacity: 0; }
.input_ptck .input_time { display: none; font-size: var(--span2-f); color: var(--col-gray3); }

.alertIcon_ja5h4 { display: none; width: 1.5rem; height: 1.5rem; background: url('../images/icons/ic_exclam_round.svg') no-repeat center / 1.5rem; }
.alertIcon_ja5h4.show { display: block; }

.chk_inp:checked + .chk_label { background-image: url('../images/icons/ic_check_round_on.svg'); }
.chk_inp:checked + .chk_label:not(.big) { color: var(--col-gray2); font-weight: var(--bold-f); }
.chk_label { display: block; color: var(--col-gray4); line-height: 1.6rem; background: url('../images/icons/ic_check_round_off.svg') no-repeat left center; }
.chk_label:not(.big) { padding-left: 1.5rem; background-size: 1.25rem; font-size: var(--p5-f); }
.chk_label.big { padding-left: 2.25rem; color: var(--col-black); font-size: var(--p4-f); font-weight: var(--bold-f); line-height: var(--line16-h); background-size: 1.5rem; } 

/* header */
header { position: sticky; background-color: var(--bg-white); top: 0; height: 3rem; padding-inline: 1rem; z-index: 50; transition: 0.2s; display: flex; justify-content: space-between; max-width: 500px; margin: 0 auto; }
header .header_left { display: flex; align-items: center; }
header .header_back { width: 2rem; }
header .title { font-size: var(--p4-f); font-weight: var(--bold-f); }
header .header_right { display: flex; align-items: center; }
header #topCloseBtn { display: block; width: 2rem; height: 2rem; }
.logout_btn { font-size: var(--misc3-f); text-decoration: var(--line-under); color: var(--col-gray3); }

/* popup */
body.open { overflow: hidden; }
.popup,
.modal { position: fixed; top: 0; left: calc(50% - 15.625rem); bottom: 0; right: 0; -webkit-transition: all 0.3s; transition: all 0.3s; z-index: -1; opacity: 0; max-width: 500px; }
.popup .overlay,
.modal .overlay { background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; width: 100%; bottom: 0; z-index: 0; overflow: hidden; }
.popup .popup_msg,
.modal .popup_msg { position: fixed; width: calc(100% - 2.5rem); max-width: 20rem; background-color: #fff; border-radius: 0.75rem; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 1.5rem 1rem 1rem; }
.popup.open,
.modal.open { z-index: 99; opacity: 1; }
.popup .popup_msg .popup_t,
.modal .popup_msg .popup_t { font-size: var(--p2-f); font-weight: var(--bold-f); text-align: center; color: var(--col-black); padding-bottom: .5rem; }
.popup .popup_msg .popup_con .popup_txt,
.modal .popup_msg .popup_con .popup_txt,
.popup .popup_msg .popup_con,
.modal .popup_msg .popup_con { color: var(--col-gray3); font-size: var(--p3-f); line-height: var(--line16-h); text-align: center; }
.popup .popup_btn,
.modal .popup_btn { display: flex; gap: 0.25rem; }
.popup .popup_btn,
.modal .popup_btn { padding-top: 1.25rem; }

.modal .modal_block { position: absolute; left: 0; right: 0; bottom: 0; background-color: var(--bg-white); padding: 0 1.25rem .5rem 1.25rem; border-radius: 1.5rem 1.5rem 0 0; transition: all 0.5s; }
.modal .modal_block .modal_header { padding-top: 2rem; padding-bottom: 0.75rem; }
.modal .modal_block .modal_header .m_title { font-size: var(--p1-f); font-weight: var(--bold-f); line-height: var(--line16-h); color: var(--col-black); }
.modal .modal_block .modal_header .m_sub { font-size: var(--p3-f); line-height: var(--line16-h); color: var(--col-gray3); padding-top: 0.75rem; }
.modal .modal_block .modal_header .m_sub.col_gray3 { color: var(--col-gray3); }
.popup .modal_block .modal_con, 
.modal .modal_block .modal_con { margin-top: 0.5rem; overflow-y: auto; max-height: 52svh; }

.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); width: calc(100% - 2.5rem); background: rgba(0, 0, 0, 0.75); font-size: var(--p4-f); line-height: var(--line-h); text-align: center; padding: 0.75rem; color: #fff; border-radius: 3rem; z-index: 100; max-width: 435px; }

/* 설계서 확인 팝업 */
.dim_closeBtn { width: 2rem; height: 2rem; position: absolute; right: 1rem; top: 1rem; background: url(../images/icons/ic_delite_round_dim.svg) no-repeat center / 2rem; }
.info_wrap { padding-top: 0.5rem; margin-inline: -1.25rem; max-height: calc(89svh - 6.75rem); padding-bottom: 7.375rem; }
.modal .modal_block .modal_con.info_wrap { max-height: calc(89svh - 6.75rem); }
.info_wrap .box { border-radius: 1rem; padding-top: 1.5rem; padding-bottom: 1.5rem; padding-inline: 1.25rem; }
.info_wrap .box.box ~ .box { margin-top: 1.25rem; }
.info_wrap .box .num { display: inline-block; width: 2rem; height: 2rem; border-radius: 50%; text-align: center; background-color: var(--col-white); box-shadow: var(--box-shadow); font-size: var(--h3-f); color: var(--sys-caption); font-weight: var(--bold-f); line-height: 2rem; }
.info_wrap .box .comp_bodytitle_01 { padding-top: 0.5rem; padding-bottom: 1.5rem; }
.info_wrap > .bg_gray6 { padding-inline: 1.25rem; padding-top: 1.5rem; padding-bottom: 1.5rem; margin-top: 2.5rem; margin-bottom: 2.5rem; }
.info_wrap:after { position: absolute; bottom: 0; width: 100%; content: ""; height: 5.625rem; background-image: linear-gradient(180deg, transparent 0%, #fff 75%); }

/* 리스트 팝업 */
.sel_tit { padding-top: 2rem; padding-bottom: 0.5rem; display: block; color: var(--col-gray4); font-size: var(--span3-f); padding-inline: 0.125rem; }
.sel_list li { padding: 1rem 0.25rem; width: 100%; font-size: var(--p4-f); color: var(--col-black); background: no-repeat center right 0.25rem / 1.25rem; cursor: pointer; } 
.sel_list li.active { color: var(--sys-caption); background-image: url(../images/icons/ic_check_on.svg); font-weight: var(--bold-f); }
.sel_list li .title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: var(--p3-f); }

/* 툴팁 */
.tool_position { position: absolute; left: 50%; width: auto; bottom: 75%; transform: translateX(-50%); }
.tool_tip { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; white-space: nowrap; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); color: var(--col-gray3); font-size: var(--p6-f); background-color: var(--bg-white); border-radius: 0.625rem; animation: bounce 1.5s ease-in-out infinite; }
.tool_tip > * { white-space: nowrap; }
.tool_tip::after { position: absolute; content: ''; border-top: 0.625rem solid #fff; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; bottom: -0.375rem; left: calc(50% - 0.375rem); }
.tool_tip.black { background-color: var(--bg-black); color: var(--col-white); }
.tool_tip.black:after { border-top-color: var(--bg-black); }

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(0.5rem); }
    100% { transform: translateY(0); }
}

/* 리스트 활성화 스타일 */
.active_list { border: 1px solid var(--bor-primary); color: var(--col-gray2); background-color: var(--bg-active); }

/* 리스트 기본 스타일 */
.default_list { border-radius: 0.5rem; border: 1px solid var(--bor-blackRGB); color: var(--col-gray4); }

/* 하단 회색 라인 */
.btm_line { border-bottom: 0.5rem solid #f8f9fb; }

/* 물음표 버튼, 텍스트 */
.question_btn { width: 1.5rem; height: 1.5rem; background: url(../images/icons/ic_question_round_black.svg) no-repeat center / 1.5rem; }
.question_info { border-radius: 0.5rem; padding: 1rem; font-size: var(--p5-f); background-color: var(--bg-gray5); }
.question_info strong { display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; }
.question_info p { color: var(--col-gray3); line-height: var(--line16-h); }

/* title */
.comp_title_01 { font-size: var(--p1-f); font-weight: var(--bold-f); line-height: var(--line16-h); color: var(--col-black); }
.comp_title_02 { display: block; font-size: var(--span3-f); color: var(--col-black); }
.comp_title_03 { display: block; font-size: var(--p2-f); font-weight: var(--bold-f); }
.comp_bodytitle_01 { color: var(--col-black); font-size: var(--p3-f); font-weight: var(--bold-f); line-height: var(--line16-h); }

.comp_bodytext_01 { font-size: var(--p3-f); line-height: var(--line16-h); color: var(--col-gray3); } /* 16px gray */
.comp_bodytext_02 { font-size: var(--p4-f); line-height: var(--line16-h); color: var(--col-gray4); } /* 14px gray */

/* 로그인 폼 */
.form_wrap { padding-top: 2.5rem; background-color: var(--bg-white); }
.form_wrap .find_infoTxt { padding-top: 2.5rem; text-align: center; color: var(--col-gray4); font-size: var(--misc2-f); text-decoration: underline; cursor: pointer; }
.form_wrap .input_block ~ .input_block { padding-top: 2rem; }

.login_btn { position: relative; margin-top: 7.5rem; }
.login_btn .tool_position { bottom: auto; top: -3.0625rem; }
.login_btn button ~ button { margin-top: .75rem; }
.btn_kakao { background-color: #FEE500; color: var(--col-gray2); }
.btn_apple { background-color: var(--bg-black); color: var(--col-white); }

/* 완료 화면 */
.cpl_wrap { padding-top: 5.5rem; }
.cpl_wrap.pt_40 { padding-top: 2.5rem; }
.cpl_wrap .cpl_icon { width: 3rem; margin-bottom: .75rem; position: relative; }
.cpl_wrap .cpl_title { font-size: var(--p1-f); line-height: var(--line16-h); font-weight: var(--bold-f); margin-bottom: 0.75rem; color: var(--col-black);}
.cpl_wrap .cpl_txt { font-size: var(--p3-f); line-height: var(--line16-h); color: var(--col-gray3); }
.cpl_wrap .cpl_banner { width: 100%; margin-top: 1rem; }
.cpl_wrap .cardround { padding: 1.25rem 1.5rem; margin-bottom: 0; }

.info_table { display: flex; align-items: center; padding: 0.25rem 0; }
.info_table .table_l { font-size: var(--p3-f); line-height: var(--line-h); margin-right: 1rem; color: #9F9F9F; width: 32%; max-width: 5rem; }
.info_table .table_r { font-size: var(--p3-f); line-height: var(--line-h); width: 68%; }

.use_banner { padding: 1rem; border-radius: 0.5rem; display: flex; align-items: center; gap: 0.5rem; margin-block: 2.5rem 1.25rem; font-size: var(--p5-f); color: var(--col-gray2); background-color: #f3f9ff; cursor: pointer; }
.use_banner strong { margin-top: .1875rem; }

/* 회원정보 찾기 완료 */
.pd_b150 .card_list .list_item ~ .list_item { margin-top: .75rem; }
.pd_b150 .list_item { border-radius: 0.5rem; padding: 1rem; background-color: var(--bg-gray6); display: flex; justify-content: start; align-items: flex-start; }
.pd_b150 .list_item .title { font-size: var(--p5-f); line-height: var(--line16-h); color: var(--col-gray4); width: 4.875rem; }
.pd_b150 .list_item .txt { font-size: var(--p5-f); line-height: var(--line16-h); width: calc(100% - 4.875rem); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; display: -webkit-box;text-overflow: ellipsis; }

.gray_txtbox { display: flex; flex-direction: column; gap: .5rem; background-color: var(--bg-gray5); border-radius: .5rem; padding: 1rem; }
.gray_txtbox .tit_txt { display: flex; align-items: center; gap: .5rem; font-size: var(--p5-f); }
.gray_txtbox .txt { font-size: var(--p5-f); color: var(--col-gray3); line-height: var(--line16-h); }

/* 이메일로 회원가입 하단 체크 */
.input_check input { overflow: hidden; display: block; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); }
.input_check label { display: block; background: url(../images/icons/ic_check_round_off.svg) no-repeat left center / 1.25rem; padding-left: 1.5rem; font-size: var(--p5-f); color: var(--col-gray4); line-height: var(--line16-h); cursor: pointer; }
.input_check input:checked + label { background-image: url(../images/icons/ic_check_round_on.svg); font-weight: var(--bold-f); color: var(--col-gray2); }
.input_check label a { text-decoration: underline; color: var(--col-gray4); font-size: var(--misc2-f); font-weight: 500; }
.check_all .input_check label { background-size: 1.5rem; padding-left: 1.75rem; font-size: var(--p4-f); }
.register_check { background-color: var(--bg-gray6); padding-top: 2.5rem; }
.register_check .check_list .input_check { padding-left: 1.5rem; margin-top: .75rem; }
.register_check .check_list label { display: flex; align-items: center; justify-content: space-between; padding-right: 1.5rem; }

/* 약관 */
.plc_wrap { padding: 1.5rem 0; }
.plc_wrap .plc_item { margin-bottom: 2.5rem; }
.plc_wrap .plc_item:last-child { margin-bottom: 0; }
.plc_wrap .plc_title { font-size: var(--p1-f); line-height: var(--line16-h); font-weight: var(--bold-f); margin-bottom: .75rem; color: var(--col-black); }
.plc_wrap h3 { margin-bottom: 0.75rem; line-height: var(--line16-h); }
.plc_wrap .plc_txt { font-size: var(--p3-f); line-height: var(--line16-h); color: var(--col-gray3); margin-bottom: 1rem; }
.plc_wrap .plc_txt:last-child { margin-bottom: 0; }
.plc_wrap table { border-right: 1px solid var(--bg-gray5); }
.plc_wrap table th { background-color: var(--bg-gray5); color: var(--col-gray3); border-left: 1px solid var(--bg-gray5); padding: 0.75rem 1rem; font-size: var(--p5-f); line-height: var(--line16-h); font-weight: var(--bold-f); text-align: left; }
.plc_wrap table td { font-size: var(--p5-f); line-height: var(--line16-h); color: var(--col-gray3); padding: 0.75rem 0.75rem; border-left: 1px solid var(--bg-gray5); border-bottom: 1px solid var(--bg-gray5); }
.plc_wrap .plc_li { list-style: disc; padding-left: 1.5rem; }
.plc_wrap .plc_li li { font-size: var(--p4-f); line-height: var(--line16-h); color: var(--col-gray3); }
.plc_wrap .mb_1 { margin-bottom: 1.25rem; }
.plc_wrap .mb_1_5 { margin-bottom: 2.5rem; }

.select_block { width: 100%; position: relative; }
.select_block .selectBtn { width: 100%; border-radius: 0.5rem; font-size: var(--span3-f); color:var(--col-gray5); padding: 1rem; text-align: left; border: 1px solid var(--bor-blackRGB); }
.select_block .selectBtn::after { position: absolute; right: 1rem; height: 1.25rem; width: 1.25rem; content: ""; top: calc(50% - 0.625rem); background: url('../images/icons/ic_arrow_down_black.svg') no-repeat center / 1.25rem; transition: all 0.3s; }
.select_block .selectBtn.optSlt { color: var(--col-gray2); font-weight: var(--bold-f); }
.select_block .optionList { position: absolute; left: 0; top: 3.75rem; width: 100%; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; max-height: 0; overflow: hidden; z-index: 10; box-shadow: var(--box-shadow); border-radius: .75rem; }
.select_block .optionList .optionItem { color: var(--col-gray2); font-size: var(--span3-f); background-color: #fff; padding: 1rem 0.75rem; cursor: pointer; font-weight: var(--bold-f); }
.select_block .optionList .optionItem ~ .optionItem { border-top: 1px solid var(--bor-blackRGB); }
.select_block .optionList .optionItem:hover { background-color: var(--bg-gray5); }
.select_block.active .selectBtn::after { transform: rotate(180deg); }
.select_block.active .optionList { max-height: 31.25rem; }
.select_block .btn_misc { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

/* 맞춤설계 인트로 */
.intro_wrap .btm_line { padding: 2.5rem 1.25rem; }
.intro_wrap .btm_line .comp_bodytext_01 { padding-block: 0.75rem 2.5rem; }
.intro_wrap .btm_line .arrow_ani { margin-inline: auto; width: 1.25rem; }
.intro_wrap .bg_gray6 { padding-block: 2.5rem; border-radius: 1.25rem; }
.intro_wrap .bg_gray6.bg_gray6 ~ .bg_gray6 { margin-top: 1.25rem; }
.intro_wrap .bg_gray6 .tag_grline { margin-bottom: 1.25rem; }
.intro_wrap .bg_gray6 .comp_bodytext_02 { padding-block: 0.5rem 2.5rem; }
.intro_wrap .custom_img { display: flex; justify-content: center; padding-bottom: 1.25rem; }
.intro_wrap .tool_position { bottom: 100%; }

/* 맞춤설계 건강분석 카드 */
#surveyList .result_box ~ .result_box { margin-top: .75rem; }
.result_box { padding: 1.25rem; border-radius: .75rem; border: 1px solid var(--bor-blackRGB); background-color: var(--bg-white); background-image: url(../images/icons/ic_check_round_off.svg); background-repeat: no-repeat; background-size: 1.5rem; background-position: right 1.25rem top 1.25rem; width: 100%; transition: all 0.2s; cursor: pointer; } 
.result_box > .title { display: flex; align-items: center; gap: 0.25rem; } 
.result_box > .title .point { font-size: var(--h1-f); font-weight: var(--bold-f); color: var(--sys-caption); }
.result_box > .title .name { font-size: var(--p2-f); font-weight: var(--bold-f); color: var(--col-black); } 
.result_box > .txt { font-size: var(--p4-f); margin-top: 1.25rem; } 
.table_info { display: flex; background-color: var(--bg-gray6); border-radius: 0.5rem; margin-top: .5rem; padding: 1rem; transition: all 0.2s; } 
.table_info .title { font-size: var(--p5-f); line-height: 1.5; color: var(--col-gray4); width: 4.875rem; } 
.table_info .txt { font-size: var(--p5-f); line-height: 1.5; max-width: calc(100% - 4.875rem); } 
.result_box > .date { font-size: var(--span3-f); color: var(--col-gray4); margin-top: 1.25rem; }
.table_info .txt .bar::after { content: ""; display: inline-block; width: 2px; height: .625rem; background-color: var(--col-gray4); margin-inline: .375rem; }

.result_box.active { background-color: #E6FAF1; border-color: var(--primary); background-image: url(../images/icons/ic_check_round_on.svg); }
.result_box.active .table_info { background-color: var(--bg-white); }
.result_box.bg_none { background-image: none; cursor: default; }
.result_box.arrow { background-image: url(../images/icons/ic_arrow_right_black.svg); }
.table_info.flex_wrap .mt_8 { display: flex; width: 100%; }
.table_info.flex_wrap .title { width: 5.375rem; }
.table_info.flex_wrap .txt { display: flex; flex-wrap: wrap; gap: .25rem; max-width: calc(100% - 5.375rem); }

/* 페이지 중간 로딩 */
.loading_wrap { padding-top: 5.5rem; }
.loading_wrap .comp_title_01 { margin-bottom: 2.5rem; }
.loading_wrap .lottie_box { margin-inline: -1.25rem; }

/* 로딩 */
.loading_ani { background: rgba(255, 255, 255, 0.9); z-index: 101; position: fixed; top: 0; left: 0; bottom: 0; right: 0; }
.loading_ani .ld_in { width: 7rem; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; }

/* 이미지 등록 */
.add_swiper { overflow: hidden; width: 100%; }
.info_txt { padding-top: 0.5rem; padding-bottom: 1.25rem; font-size: var(--span3-f); color: var(--col-gray4); }
.inp_file { display: flex; gap: 0.75rem; }
.inp_file label { display: block; border-radius: 0.5rem; width: 4.75rem; height: 4.75rem; background: url(../images/icons/ic_add_round_dim.svg) no-repeat center / 1.5rem #f8f9fb; }
.inp_file .file_up { display: flex; border-radius: 0.5rem; overflow: hidden; position: relative; width: 4.75rem; height: 4.75rem; }
.inp_file .file_up::after { content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: var(--bg-blackRGB); }
.inp_file .file_up .file_delete { position: absolute; right: 0.25rem; top: 0.25rem; width: 1.25rem; height: 1.25rem; z-index: 10; background: url(../images/icons/ic_delite_round_dim.svg) no-repeat center / 1.25rem; }
.inp_file .file_up img { object-fit: cover; min-width: 100%; }

/* 맞춤설계 선택지 */
.caption_txt { font-size: var(--p5-f); color: var(--col-gray5); margin-top: .75rem; }
.caption_txt.mt_8 { margin-top: .5rem; }
.survey_qst { margin-top: 2.5rem; }
.qst_data { background-color: var(--bg-white); border: 1px solid var(--bor-blackRGB); border-radius: .5rem; padding: 1rem 3.125rem 1rem 1rem; background: url(../images/icons/ic_check_round_off.svg) no-repeat right 1rem top 1rem / 1.5rem; color: var(--col-gray4); font-size: var(--p3-f); font-weight: var(--bold-f); cursor: pointer; }
.survey_qst .qst_data ~ .qst_data { margin-top: .75rem; }
.qst_data.active { background-image: url(../images/icons/ic_check_round_on.svg); border-color: var(--bor-primary); background-color: var(--bg-active); color: var(--col-black); }

.medicine_name { color: var(--col-gray3); font-size: var(--p6-f); padding-top: .5rem; }
.list_img { display: flex; width: 4rem; height: 4rem; border-radius: 0.375rem; overflow: hidden; margin-top: 0.5rem; }

.noti_txt { margin-top: 2.5rem; border-radius: 0.5rem; padding: 1rem; background-color: var(--bg-gray5); color: var(--col-gray3); font-size: var(--p5-f); line-height: var(--line16-h); }
.s_red { color: var(--sub-red); }

.reformation_wrap { padding-top: 2.5rem; background-color: var(--bg-white); }
.reformation_wrap .comp_title_01 { padding-bottom: 2.5rem; }
.reformation_wrap textarea { margin-top: 1.25rem; margin-bottom: 2.5rem; }
.reformation_wrap .tool_position { left: 0; top: -1.875rem; transform: translate(0); z-index: 1; }
.reformation_wrap .inp_file .swiper-slide { margin-right: 0.75rem; width: 4.75rem; }

.apply_chk { padding-bottom: 9.375rem; padding-top: 2.5rem; padding-inline: 1.25rem; background-color: var(--bg-gray6); }
.apply_chk .dot_list li { position: relative; padding-left: 0.5rem; margin-top: 0.75rem; font-size: var(--p4-f); color: var(--col-gray4); line-height: 1.25rem; }
.apply_chk .dot_list li::before { border-radius: 50%; position: absolute; left: 0; background-color: var(--col-gray2); content: ''; width: 2px; height: 2px; top: 0.625rem; }

/* 기본정보 */
.birth_slide { height: 16.375rem; margin-top: 5rem; position: relative; }
.birth_slide::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2.5rem; z-index: 10; background: linear-gradient(180deg, #FFFFFF 0, transparent 100%); }
.birth_slide::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2.5rem; z-index: 10; background: linear-gradient(0deg, #FFFFFF 0, transparent 100%); }
.birth_slide .swiper-slide { width: 100%; text-align: center; color: #C5C7CA; font-size: var(--h2-f); font-weight: var(--bold-f); display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.birth_slide .swiper-slide-active { color: var(--sys-caption); font-size: 2rem; }

.inp_tall { display: flex; justify-content: center; align-items: center; font-weight: var(--bold-f); padding-top: 7.5rem; }
.inp_tall input { width: 5rem; text-align: right; margin: 0; color: var(--sys-caption); font-size: 2rem; font-weight: var(--bold-f);}
.inp_tall input::placeholder { font-weight: var(--bold-f); }
.inp_tall input:placeholder-shown + .cm_txt { color: var(--col-gray5); }
.inp_tall span:not(.cm_txt) { padding-left: 0.75rem; color: var(--col-gray4); font-size: var(--span1-f); }
.inp_tall .cm_txt { color: var(--sys-caption); font-size: 2rem; }

.gender_btn { display: flex; gap: 0.5rem; margin-top: 7.5rem; }
.gender_btn button { display: block; width: 100%; padding-top: 6rem; text-align: center; background: no-repeat center 1.5rem / 4rem; font-size: var(--p3-f); font-weight: var(--bold-f); height: 9.125rem; border-radius: .5rem; border: 1px solid var(--bor-blackRGB); color: var(--col-gray4); }
.gender_btn button.active { border-color: var(--bor-primary); color: var(--bg-gray2); background-color: var(--bg-active); }
.gender_btn .man { background-image: url(../images/icons/icon_man_off.svg); }
.gender_btn .man.active { background-image: url(../images/icons/icon_man_on.svg); }
.gender_btn .woman { background-image: url(../images/icons/icon_woman_off.svg); }
.gender_btn .woman.active { background-image: url(../images/icons/icon_woman_on.svg); }

.health_list { padding-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.health_list li { display: flex; align-items: center; flex-direction: column; padding: 0.75rem; position: relative; border-radius: .5rem; border: 1px solid var(--bor-blackRGB); color: var(--col-gray4); width: calc(33.33% - 0.34rem); cursor: pointer; }
.health_list li.active { border-color: var(--bor-primary); color: var(--bg-gray2); background-color: var(--bg-active); }
.health_list li img { width: 4rem; }
.health_list li p { font-size: var(--p5-f); font-weight: var(--bold-f); }
.health_list li .rank_tag { padding: 0.25rem 0.5rem; border-radius: 0.25rem; position: absolute; background-color: var(--bg-black); color: var(--col-white); font-size: var(--span4-f); font-weight: var(--bold-f); left: -0.25rem; top: -0.25rem; }

/* 건강목표 */
.survey_loc { padding: 1.5rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; margin-bottom: 2.5rem; }
.survey_loc .loc_div { width: 100%; }
.survey_loc .loc_div .loc_bar { width: 100%; height: 0.375rem; border-radius: 62.4375rem; background-color: var(--bg-gray6); position: relative; overflow: hidden; }
.survey_loc .loc_div .loc_bar .bar { position: absolute; left: 0; top: 0; border-radius: 3rem; width: 0; height: 100%; background-color: var(--primary); }
.survey_loc .loc_div .txt { text-align: center; font-size: var(--span4-f); color: var(--col-gray5); margin-top: 0.25rem; }
.survey_loc .loc_div.now .loc_bar .bar { background-color: var(--primary); }
.survey_loc .loc_div.now .txt { color: var(--sys-caption); font-weight: var(--bold-f); }
.slide_list .title_icon { width: 3rem; padding-bottom: .75rem; }
.survey_noti { background-color: var(--bg-gray5); padding: 1rem; font-size: var(--p5-f); line-height: 1.5rem; color: var(--col-gray3); border-radius: .5rem; margin-top: 2.5rem; }

/* 날짜 표출 배너 */
.banner_info_01 { margin-left: auto; margin-right: auto; border-radius: 0.75rem; color: var(--col-gray2); font-size: var(--p5-f); font-weight: var(--bold-f); background: url(../images/icons/ic_contentsicon03_filled.svg) no-repeat left 1rem center / 1.5rem #F3F9FF; padding: 1rem 1rem 1rem 3rem; }
.banner_info_01.green { background-color: var(--bg-active); }

/* 건강분석 */
.dot_pagenation { overflow: hidden; position: relative; }
.dot_pagenation .swiper-slide { padding-block: 1rem 2.75rem; margin-inline: 0.25rem; width: calc(100% - 3.5rem); }
.dot_pagenation .swiper-slide .question_btn { position: absolute; top: 3rem; right: 1.25rem; z-index: 10; }
.dot_pagenation .card_data { position: relative; padding-left: 2.5rem; padding-right: 2.5rem; border-radius: 0.75rem; box-shadow: var(--box-shadow); padding-top: 3.75rem; height: 26.875rem; }
.dot_pagenation .card_data::after { position: absolute; left: 50%; top: 0; content: ''; transform: translateX(-50%); background: url(../images/bg/bg_note.svg) no-repeat center top / contain; width: calc(100% - 2.25rem); height: 1.4375rem; max-width: 16.75rem; }
.dot_pagenation .card_data .circle { position: relative; border-radius: 50%; overflow: hidden; margin-left: auto; margin-right: auto; width: 11.25rem; height: 11.25rem; }
.dot_pagenation .card_data .circle.circle:not(.bg_style)::after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; content: ''; background-color: #f2f4f6; z-index: -2; }
.dot_pagenation .card_data .circle .circle_inner { position: absolute; left: 50%; top: 50%; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--bg-white); transform: translate(-50%, -50%); width: 8.57144rem; height: 8.57144rem; z-index: 1; }
.dot_pagenation .card_data .circle .circle_inner .total_percent { font-size: var(--p5-f); }
.dot_pagenation .card_data .circle .circle_inner .total_point { font-size: 3.125rem; }
.dot_pagenation .card_data .circle .circle_inner .total_txt { font-size: 1.875rem; }
.dot_pagenation .card_data .circle .water_bg { position: absolute; left: 50%; transform: translateX(-50%); width: 170%; z-index: -1; }
.dot_pagenation .card_data .text_con { text-align: center; padding-top: 1.5rem; }
.dot_pagenation .card_data .text_con .comp_bodytext_02 { padding-top: 0.5rem; }
.dot_pagenation .card_data.green_type .bg_style { background-color: var(--primary); }
.dot_pagenation .card_data.green_type .accent_txt, .dot_pagenation .card_data.green_type .circle_inner { color: var(--sys-caption); }
.dot_pagenation .card_data.yellow_type .bg_style { background-color: #ffd53f; }
.dot_pagenation .card_data.yellow_type .accent_txt, 
.dot_pagenation .card_data.yellow_type .circle_inner { color: #f69e35; }
.dot_pagenation .card_data.orange_type .bg_style { background-color: #ff974a; }
.dot_pagenation .card_data.orange_type .accent_txt, .dot_pagenation .card_data.orange_type .circle_inner { color: #f6723d; }
.dot_pagenation .card_data.red_type .bg_style { background-color: #ff6067; }
.dot_pagenation .card_data.red_type .accent_txt, 
.dot_pagenation .card_data.red_type .circle_inner { color: var(--sys-red); }

.line_box { border-radius: 0.75rem; padding: 1.5rem 1.25rem; margin-block: 1.25rem 2.5rem; border: 1px solid var(--bor-blackRGB); }
.line_box .eating_tit { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 1.25rem; font-size: var(--h3-f); font-weight: var(--bold-f); }
.line_box .eating_tit img { width: 2rem; }

.recommend_pill { position: relative; border-radius: 0.75rem; margin-top: 1.25rem; margin-bottom: 0.75rem; border: 1px solid var(--bor-primary); }
.recommend_pill::before { position: absolute; left: 50%; height: 0.75rem; content: ''; transform: translateX(-50%); top: -1px; width: calc(100% - 2.5rem); max-width: 17.8rem; background: #fff url(../images/bg/bg_green_line.png) no-repeat center top / 100%; }
.recommend_pill::after { right: 1.25rem; text-align: center; font-size: var(--span5-f); color: var(--col-white); content: '권장'; position: absolute; top: -0.5rem; width: 1.625rem; height: 2.375rem; background: url(../images/icons/tag_pill.svg) no-repeat center / 1.625rem; padding-top: 0.925rem; }

.result_wrap { padding-bottom: 9.375rem; }
.result_wrap .bg_gray6 { padding: 2.5rem 1.25rem; }
.result_wrap .bg_gray6 .comp_bodytext_01 { padding-top: 0.75rem; padding-bottom: 1.25rem; }
.help_pill { padding-left: 1.25rem; padding-top: 2.5rem; }
.help_pill .tab_box { padding-top: 1rem; padding-bottom: 1.25rem; }
.help_pill .tab_panel { padding-right: 0.5rem; overflow: hidden; }
.help_pill .tab_panel .swiper-slide { width: auto; margin-right: 0.75rem; height: auto; }
.consulting_btn { display: flex; padding-bottom: 0.5rem; gap: 0.5rem; }
.consulting_btn button { display: flex; width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; padding-left: 1rem; padding-right: 1rem; align-items: center; flex-direction: column; gap: 0.5rem; border-radius: 0.75rem; border: var(--bor-blackRGB); font-size: var(--p4-f); color: var(--col-gray4); }
.consulting_btn button img { width: 4rem; }

.tab_box { overflow: hidden; }
.tab_box .swiper-slide { margin-right: 0.25rem; width: auto; }  
.tab_box button { border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: var(--p4-f); color: var(--col-gray4); font-weight: var(--bold-f); border: 1px solid var(--bor-blackRGB); }  
.tab_box button.active { color: var(--sys-caption); border-color: var(--primary); }

.top_btn { width: 2.75rem; height: 2.75rem; position: fixed; right: calc((50% - 14.8438rem) + 1.25rem); border-radius: 9999px; opacity: 1; z-index: 10; bottom: 1.25rem; background: url(../images/icons/ic_arrow_up_black.svg) no-repeat center / 2rem #fff; transition: 0.3s; box-shadow: var(--box-shadow); }  
.top_btn.none { opacity: 0; }

/* 영양제 리스트 */
.list_pill_04 .pill_box,
.list_pill_02 .pill_box,
.list_pill_01 .pill_box { display: flex; gap: 0.5rem; padding: 1.5rem 1.25rem; }  
.list_pill_04 .pill_box .txt_box,
.list_pill_02 .pill_box .txt_box,
.list_pill_01 .pill_box .txt_box { max-width: calc(100% - 5rem); }  
.list_pill_04 .pill_box .img_box,
.list_pill_02 .pill_box .img_box,
.list_pill_01 .pill_box .img_box { border-radius: 0.5rem; padding: 0.5rem; overflow: hidden; display: flex; justify-content: center; background-color: var(--bg-gray6); width: 4.5rem; height: 4.5rem; }  
.list_pill_05 .pill_box .img_box img,
.list_pill_04 .pill_box .img_box img,
.list_pill_02 .pill_box .img_box img,
.list_pill_01 .pill_box .img_box img { object-fit: contain; }

.list_pill_01 .pill_box { background-color: var(--bg-white); border-radius: .75rem; border: 1px solid var(--bor-blackRGB); align-items: center; }
.list_pill_01 .pill_box .title { padding-top: 0.5rem; }

.list_pill_02 .pill_box .title { padding-top: 0.5rem; padding-bottom: 0.75rem; }
.list_pill_02 .pill_box .list { font-size: var(--p5-f); }  
.list_pill_02 .pill_box .list li ~ li { padding-top: .25rem; }

.list_pill_03 { border-radius: 0.75rem; height: 100%; border: 1px solid var(--bor-blackRGB); width: 8.75rem; overflow: hidden; }  
.list_pill_03 .txt_box { padding: 0.75rem; }  
.list_pill_03 .txt_box .title { padding-bottom: 0.5rem; font-size: var(--span3-f); color: var(--col-gray4); }  
.list_pill_03 .txt_box .txt { font-size: var(--span2-f); color: var(--col-black); }  
.list_pill_03 .img_box { padding: 0.5rem; display: flex; justify-content: center; align-items: center; background-color: var(--bg-gray6); height: 5.75rem; }  
.list_pill_03 .img_box img { width: 100%; max-width: 5.25rem; max-height: 100%; }

.list_pill_04 .pill_box { position: relative; } 
.list_pill_04 .pill_box:not(:last-child)::after { position: absolute; bottom: 0; left: 0; content: ''; height: 1px; width: 100%; background: url(../images/bg/line_01.svg) center; }  
.list_pill_04 .pill_box .txt_box .tag_box { padding-top: 0.5rem; padding-bottom: 0.5rem; } 
.list_pill_04 .pill_box .txt_box .txt { font-size: var(--span4-f); color: var(--col-gray4); } 
.list_pill_04 .pill_box .txt_box .price { padding-top: 0.75rem; color: var(--sys-caption); }
.list_pill_04 .pill_box.active .img_box { border: 2px solid var(--primary); } 
.list_pill_04 .pill_box.soldout { color: var(--col-gray4); } 
.list_pill_04 .pill_box.soldout .img_box img { filter: grayscale(100%); opacity: 0.7; } 
.list_pill_04 .pill_box.soldout .txt_box .price { color: var(--col-gray4); }

.list_pill_04.chk_type .pill_box .img_box { position: relative; }
.list_pill_04.chk_type .pill_box::before { content: ""; width: 2rem; height: 2rem; position: absolute; left: 1.25rem; top: 1.5rem; background: url(../images/icons/ic_check_round_off.svg) no-repeat left center / contain; z-index: 1; }
.list_pill_04.chk_type .pill_box.active .img_box { border: none; }
.list_pill_04.chk_type .pill_box.active::before { background-image: url(../images/icons/ic_check_round_on.svg); }

.list_pill_05 { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem 0.5rem; }
.list_pill_05 .pill_box { display: flex; flex-direction: column; align-items: center; width: 5rem; } 
.list_pill_05 .pill_box .img_box { overflow: hidden; display: flex; justify-content: center; width: 3rem; height: 3rem; border-radius: 624.9375rem; background-color: var(--bg-gray6); } 
.list_pill_05 .pill_box .title { margin-top: 0.5rem; text-align: center; overflow: hidden; display: -webkit-box; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--col-gray3); font-size: var(--p6-f); }
.pill_wrap { position: relative; }
.pill_wrap ~ .pill_wrap::after { position: absolute; top: 0; left: 0; content: ''; height: 1px; width: 100%; background: url(../images/bg/line_01.svg) center; }

/* 영양제 상세 팝업 */
.modal_tit { padding-top: 1.5rem; } 
.modal_tit .fix { position: absolute; display: flex; gap: 0.25rem; top: 1.5rem; right: 1.25rem; } 
.modal_tit .fix img { width: 2rem; height: 2rem; } 
.modal_tit .img img { width: 2.8125rem; } 
.modal_tit .comp_title_01 { padding-block: 0.5rem 0.25rem; line-height: 1.5; } 
.modal_tit .pill_info { display: flex; gap: 0.25rem; align-items: center; font-size: 0.9375rem; } 
.modal_tit .pill_info .tag { display: inline-block; border-radius: 0.25rem; padding: 0.25rem 0.5rem; font-size: var(--span4-f); font-weight: var(--bold-f); border: 1px solid var(--bg-gray4); background-color: #fff; color: var(--col-gray3); } 
.detail_info { padding-block: 1rem 5rem; max-height: calc(52svh + 6rem); overflow: auto; } 
.detail_info .data ~ .data { padding-top: 1.25rem; } 
.detail_info .data .title { padding-bottom: 0.25rem; font-weight: bold; font-size: var(--p5-f); line-height: 1.5; } 
.detail_info .data .txt { color: var(--col-gray4); font-size: var(--p5-f); line-height: 1.5; } 
.detail_info .data li { padding-left: 1rem; position: relative; color: var(--col-gray3); font-size: var(--p6-f); line-height: var(--line16-h); }
.detail_info .data li::before { content: ""; border-radius: 50%; position: absolute; top: 0.4rem; left: 0.4rem; width: 3px; height: 3px; background-color: var(--bg-gray2); } 
.detail_info .data .col_gray3 { font-size: var(--p6-f); } 
.detail_info .data table { width: 100%; border-left: 1px solid var(--bg-gray4); border-right: 1px solid var(--bg-gray4); } 
.detail_info .data table td, .detail_info .data table th { padding: 0.5rem 0.75rem; text-align: left; font-size: var(--p6-f); font-weight: 500; border-bottom: 1px solid var(--bg-gray4); } 
.detail_info .data table th { background-color: var(--bg-gray4); } 
.detail_info .data table td:first-child { border-right: 1px solid var(--bg-gray4); } 
.detail_info .info_notice { border-radius: 0.5rem; padding: 0.75rem; margin-top: 1.25rem; background-color: var(--bg-gray6); font-size: var(--p6-f); color: var(--col-gray3); } 
.detail_info .info_notice p { padding-left: 1rem; position: relative; line-height: var(--line16-h); } 
.detail_info .info_notice p::before { content: ""; border-radius: 50%; position: absolute; top: 0.4rem; left: 0.4rem; width: 3px; height: 3px; background-color: var(--bg-gray2); }

/* 이미지 상세 팝업 */
/* inset: 0; */
.img_pop { position: fixed; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); z-index: -1; opacity: 0; background-color: #111111; transition: all 0.3s; width: 100%; max-width: 500px; } 
.img_pop.open { z-index: 100; opacity: 1; } 

.img_pop .tit_box { position: relative; padding-left: 1.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 1rem; display: flex; justify-content: space-between; align-items: center; background-color: var(--bg-black); color: var(--col-white); font-size: var(--p4-f); } 
.img_pop .tit_box .close_btn { width: 2rem; height: 2rem; background: url(../images/icons/ic_delite_wt.svg) no-repeat; } 
.img_pop .img_box { padding-left: 1.25rem; padding-right: 1.25rem; overflow: auto; height: calc(100% - 3rem); } 
.img_pop .img_box .img_scroll { display: flex; align-items: center; height: auto; min-height: 100%; } 
.img_pop .img_box .img_scroll img { width: 100%; }

/* 맞춤설계 */
.chemist_video { position: fixed; left: calc((50% - 14.8438rem) + 1.25rem); top: 4.25rem; width: 6.875rem; height: 8.75rem; border-radius: .75rem; background-color: var(--BG-bg_dim70, rgba(35, 36, 38, 0.70)); backdrop-filter: blur(3px); z-index: 49; overflow: hidden; }
.chemist_video .user_videobox { position: absolute; right: .375rem; bottom: .375rem; width: 32px; height: 32px; border: 1px solid #fff; border-radius: 100%; overflow: hidden; background: none; }
.chemist_video .user_videobox:after { content: ""; display: none; width: 100%; height: 100%; background: url(../images/icons/ic_camera_filled_wt_off.svg) no-repeat center / 1.25rem rgba(35, 36, 38, 0.70); position: absolute; left: 0; top: 0; z-index: 10; }
.chemist_video .user_videobox.my_camera_off:after { display: block; }

.subscribe_topbanner { position: sticky; top: 3rem; padding-block: .5rem; background-color: #E5EFFF; z-index: 1; text-align: center; font-size: var(--span3-f); }
.subscribe_topbanner p { display: flex; align-items: center; justify-content: center; }
.subscribe_topbanner strong { color: #004DC9; padding-left: .25rem; }
.subscribe_topbanner p:before { content: ""; width: 1.5rem; height: 1.5rem; background: url(../images/icons/ic_blue_price.svg) no-repeat; margin-right: .5rem; }

.consult_detailWrap .chemist_info { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; box-shadow: var(--box-shadow); border-bottom: 1px solid rgba(35, 36, 38, 0.05); }
.info_box { display: flex; align-items: center; gap: 0.5rem; } 
.info_box .profile,
.chemist_info .profile { overflow: hidden; border-radius: 50%; width: 3rem; height: 3rem; display: flex; align-items: center; border: 1px solid var(--bor-gray); background: url(../images/icons/ic_profile_01.svg) no-repeat center / 3rem; } 
.chemist_info .txt_box p { font-size: var(--span3-f); color: var(--col-gray3); padding-top: .5rem; }
.chemist_info .txt_box .flex { align-items: center; gap: .5rem; }

.intake_conbox { position: relative; margin: 2.5rem 1.25rem 0; padding: 1.5rem 1rem; border-radius: 1.25rem; box-shadow: var(--box-shadow); } 
.intake_conbox::before, 
.intake_conbox::after { content: ''; position: absolute; top: 1.22rem; width: 1.25rem; height: 3.125rem; background: url(../images/bg/img_square.svg) no-repeat center / 1.3125rem; } 
.intake_conbox::before { right: -0.625rem; } 
.intake_conbox::after { left: -0.625rem; } 
.intake_conbox .intake_info { position: relative; margin-bottom: 1.25rem; padding: 1.125rem 0 1.125rem 3.25rem; background: var(--bg-gray6) no-repeat; font-size: var(--p5-f); background-image: url(../images/icons/ic_pharmacist_01.svg), url(../images/icons/ic_arrow_right_black.svg); background-position: left 1rem top 0.9rem, right 1rem center; background-size: 1.5rem auto, 1.25rem auto; border-radius: 0.5rem; } 
.intake_conbox .intake_info::after { content: ''; position: absolute; bottom: -1.25rem; left: 0; width: 100%; height: 1px; background: url(../images/bg/line_01.svg) center; } 
.intake_conbox .btn_box { display: flex; justify-content: center; position: relative; padding-top: 1.25rem; margin-bottom: 0.75rem; } 
.intake_conbox .btn_box button { background-color: #f3f9ff; color: #6F98C9; border-radius: 62.4375rem; display: flex; gap: 0.25rem; align-items: center; border-radius: 6.25rem; font-size: var(--p5-f); padding: 0.625rem 1rem; font-weight: var(--bold-f); line-height: 1.125rem; } 
.intake_conbox .btn_box button img { width: 1.25rem; }
.intake_conbox .recommend_tit { text-align: center; font-weight: bold; color: var(--col-black); } 
.intake_conbox .list_pill_05 { margin-top: 1.25rem; } 
.intake_conbox .date { text-align: end; padding-top: 1.25rem; font-size: var(--span4-f); color: var(--col-gray4); } 

.recommend_detail { padding-block: 2.5rem 1.25rem; margin: 1.25rem 1.25rem 0; border-radius: 1.25rem; box-shadow: var(--box-shadow); } 
.recommend_detail .comp_title_01 { padding-left: 1.25rem; } 
.recommend_detail .bg_gray6 { display: flex; justify-content: space-between; align-items: center; margin: 1.25rem 1rem 1rem; padding: 1rem 0.75rem; background: var(--bg-gray6); border-radius: 0.75rem; } 
.recommend_detail .bg_gray6 p { font-size: var(--span3-f); color: var(--col-gray2); } 
.recommend_detail .top_line { position: relative; } 
.recommend_detail .top_line ~ .top_line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: url(../images/bg/line_01.svg) center; } 
.recommend_detail .comp_title_03 { position: relative; padding-left: 1.25rem; padding-top: 1.5rem; } 
.recommend_detail .info_pay { position: relative; padding: 1.25rem; } 
.recommend_detail .info_pay > div { display: flex; justify-content: space-between; } 
.recommend_detail .info_pay .col_gray3 { padding-top: 0.75rem; font-size: var(--p4-f); } 
.recommend_detail .info_pay::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: url(../images/bg/line_01.svg) center; } 
.consult_detailWrap .gray_txt { padding: 1.25rem 1.25rem 3.75rem; font-size: var(--p5-f); color: var(--col-gray5); line-height: var(--line16-h); }
.banner_box { padding: 0 1.25rem 3.75rem; margin-top: -1.25rem; }
.txt_banner { padding: 0.75rem 1.25rem; font-size: var(--span3-f); color: var(--col-white); background-color: #0aa464; } 
.txt_banner.finish { background-color: #6f98c9; } 

.init_question { padding-block: 2.5rem; } 
.init_question .bubble_txt { padding: 1.25rem 1rem; margin-top: 1.25rem; border-radius: 0.625rem; border-top-left-radius: 0; box-shadow: var(--box-shadow); font-size: var(--p5-f); color: var(--col-gray3); border: 1px solid var(--bor-blackRGB); line-height: var(--line16-h); } 
.init_question + .question_inpbox::before { display: none; } 
.question_inpbox::before { content: ''; display: block; height: 0.5rem; margin: 0 -1.25rem 2.5rem; width: calc(100% + 2.5rem); background-color: #f8f9fb; } 
.question_inpbox .inpbox_tit { display: flex; justify-content: space-between; padding-bottom: 0.75rem; } 
.question_inpbox textarea { margin-bottom: 1.25rem; } 
.question_list .inner { position: relative; padding: 2.5rem 0; } 
.question_list .inner ~ .inner::before { content: ''; position: absolute; top: 0; left: -1.25rem; width: calc(100% + 2.5rem); height: 1px; background-color: var(--bor-blackRGB); } 
.question_list .inner .txt { padding: 1.25rem 0; font-size: var(--p4-f); color: var(--col-gray3); line-height: var(--line16-h); } 
.question_list .inner .img_box { display: flex; align-items: center; margin-bottom: 1.25rem; border-radius: 0.5rem; overflow: hidden; width: 4.75rem; height: 4.75rem; } 
.question_list .inner .img_box img { min-height: 100%; object-fit: cover; } 
.question_list .inner .date { font-size: var(--p6-f); color: var(--col-gray5); } 
.question_list .line_box { padding: 1rem 1.25rem; margin-block: 1.25rem 0; border-radius: 0.625rem; border: 1px solid var(--bor-blackRGB); } 
.question_list .inner .txt_box .flex { align-items: center; gap: .5rem; }
.question_list .inner .txt_box { font-size: var(--span3-f); color: var(--col-gray3); padding-top: .5rem; }

.more_btn { padding-bottom: 2.5rem; } 
.time_remaining { position: fixed; left: 50%; padding: 0.5rem 0.75rem 0.5rem 1rem; border-radius: 1.25rem; display: flex; align-items: center; gap: 0.5rem; width: max-content; background-color: var(--bg-black); color: var(--col-white); font-size: var(--span4-f); bottom: 5.375rem; transform: translateX(-50%); } 
.time_remaining > p { display: flex; align-items: center; gap: 0.25rem; } 
.time_remaining img { width: 1.5rem; } 

.subscribe_state { padding: 0.75rem 1.25rem 0.5rem; margin-block: -0.25rem 1.25rem; display: flex; background-color: var(--bg-white); gap: 1.125rem; } 
.subscribe_state span { display: flex; align-items: center; gap: 0.5rem; font-size: var(--span3-f); color: var(--col-gray4); } 
.subscribe_state span::before { width: 1.25rem; height: 1.25rem; border-radius: .25rem; background-color: var(--bg-gray6); border: 1px solid var(--bor-blackRGB); content: ''; } 
.subscribe_state span.active::before { border: 2px solid var(--bor-primary); } 
.final_price { position: relative; display: flex; justify-content: space-between; align-items: center; margin: 1.25rem .75rem 0; padding: 1.5rem 0.75rem; border-radius: 0.75rem; background-color: #f3f9ff; color: var(--col-black); } 
.final_price::before { position: absolute; height: 1px; top: -1.25rem; left: -0.75rem; content: ''; width: calc(100% + 1.5rem); background: url(../images/bg/line_01.svg) center; }
.final_price .flex { align-items: center; gap: .25rem; }

/* qr 팝업 */
.qr_pop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 2.5rem); max-width: 20rem; border-radius: 1.25rem; background-color: #fff; overflow: hidden; padding: 1rem; text-align: center; }
.qr_pop .img_box { background-color: var(--bg-gray6); padding-block: 2.5rem; border-radius: 1.25rem; }
.qr_pop .img_box img { display: block; margin: 0 auto; width: 6.25rem; border: .5rem solid #fff; }
.qr_pop strong { display: block; font-size: var(--p2-f); padding-block: 1.25rem .5rem; color: var(--col-black); }
.qr_pop p { font-size: var(--p3-f); color: var(--col-gray3); line-height: var(--line16-h); }
.qr_pop .pop_btn { gap: .5rem; padding-top: 2rem; border: none; }
.qr_pop .close_pop { position: absolute; right: 1rem; top: 1rem; width: 2rem; height: 2rem; background: url(../images/icons/ic_delite_sol.svg) no-repeat center / contain; z-index: 3; }

.qr_btnBox { display: flex; gap: .5rem; align-items: center; padding-top: 1.25rem; }
.btn_app,
.btn_google { flex: 1; background: no-repeat center / auto calc(100% - 1.3rem) #fff; height: 2.75rem; transition: all 0.3s; border-radius: .625rem; border: 1px solid var(--bg-gray2); }
.btn_app { background-image: url('../images/icons/btn_app_g.svg'); }
.btn_google { background-image: url('../images/icons/btn_google_g.svg'); }
.btn_app:hover,
.btn_google:hover { background-color: var(--primary); border-color: var(--sys-caption); }
.btn_app:hover { background-image: url('../images/icons/btn_app_w.svg'); }
.btn_google:hover { background-image: url('../images/icons/btn_google_w.svg'); }

/* 나의 내역 */
.btn_floating { padding-block: .75rem; padding-inline: 1rem; border-radius: 9999px; position: fixed; right: calc((50% - 14.8438rem) + 1.25rem); bottom: 1.25rem; font-size: var(--p4-f); color: var(--col-white); box-shadow: var(--box-shadow); background-color: #FF974A; }
.btn_fillter { display: flex; align-items: center; border-radius: 9999px; font-size: var(--p5-f); color: var(--col-gray4); border: 1px solid var(--bor-blackRGB); padding: .5rem 1.875rem .5rem .75rem; gap: .125rem; background: url(../images/icons/ic_arrow_down_black.svg) no-repeat right .625rem center / 1.25rem var(--bg-gray6); }
.btn_fillter.active { background-color: var(--bg-black); color: var(--col-white); background-image: url(../images/icons/ic_arrow_down_wt.svg); }

.my_listWrap { padding-bottom: 9.375rem; }
.progress_box { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1.25rem; padding-bottom: 2.5rem; background-color: var(--bg-gray6); } 
.progress_box .pharm_info { border-radius: 0.75rem; margin-top: 1.25rem; border: 1px solid var(--bor-blackRGB); background: url(../images/icons/ic_arrow_right_black.svg) no-repeat right 1.25rem top 1.5rem / 1.25rem var(--bg-white); } 
.select_box { display: flex; align-items: center; justify-content: space-between; padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1.25rem; } 
.select_box span { color: var(--col-gray4); font-size: var(--span3-f); } 
.pharm_info { padding-top: 1.5rem; padding-bottom: 1.5rem; padding-left: 1.25rem; padding-right: 1.25rem; border-bottom: 1px solid var(--bor-blackRGB); } 
.pharm_info .chemist_info { display: flex; align-items: center; gap: 0.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.pharm_info .banner_info_01 { margin-bottom: 0.5rem; } 
.pharm_info .banner_info_01 span { font-weight: 500; } 
.pharm_info .card_my_info { padding: 1rem; border-radius: 0.5rem; display: flex; background-color: var(--bg-gray6); } 
.pharm_info .card_my_info .title { width: 5rem; font-size: var(--p5-f); color: var(--col-gray4); } 
.pharm_info .card_my_info .title + .txt { max-width: calc(100% - 5rem); } 
.pharm_info .card_my_info .txt { font-size: var(--p5-f); color: var(--col-gray2); } 
.pharm_info .date { padding-top: 1.25rem; color: var(--col-gray4); font-size: var(--span3-f); }

/* 리스트 없는 경우 */
.empty_wrap { padding-block: 7.5rem; } 
.empty_wrap p { text-align: center; font-size: var(--p3-f); color: var(--col-gray4); padding-top: 6.25rem; background: url(../images/icons/ic_empty_black.svg) no-repeat center top; } 

/* 구독 결제 */
.delivery_banner { border-radius: 0.75rem; padding-left: 3rem; padding-block: 1.125rem; margin-top: 1.25rem; font-size: var(--p5-f); font-weight: var(--bold-f); background: url(../images/icons/ic_car_on.svg) no-repeat left 1rem center / 1.5rem var(--bg-active); }
.con_box { padding: 1.5rem 1.25rem; border-bottom: .5rem solid var(--bg-gray6); } 
.con_box.none_tg { padding-block: 2.5rem; }
.con_box .tg_tit { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.con_box .tg_tit .summary { display: flex; align-items: center; gap: 0.25rem; } 
.con_box .tg_tit .summary .txt { opacity: 0; color: var(--col-gray4); font-size: var(--span3-f); transition: 0.3s; display: flex; align-items: center; gap: .25rem; } 
.con_box .tg_tit .summary .txt img { width: 3rem; }
.con_box .tg_tit .summary .tg_btn { width: 1.25rem; height: 1.25rem; background: url(../images/icons/ic_arrow_up_black.svg) no-repeat center / 1.25rem; transition: all 0.3s; } 
.con_box .tg_panel { padding-top: 1.5rem; transition: all 0.3s; } 
.con_box .tg_panel .sub_tit { padding-bottom: 1.5rem; font-size: var(--p3-f); color: var(--col-gray3); margin-top: -0.75rem; line-height: var(--line16-h); }
.con_box.fold .tg_tit .tg_btn { transform: rotate(180deg); } 
.con_box.fold .tg_tit .txt { opacity: 1; } 
.con_box.fold .tg_panel { height: 0; overflow: hidden; padding-top: 0; } 
.con_box.fold .tg_panel .sub_tit { margin-top: 0; } 

.con_box .flex { display: flex; align-items: center; gap: .25rem; }
.flex .question_btn { cursor: pointer; }
.comp_title_02 .question_btn { background-size: 1.25rem; }

.oder_info { padding-top: 1.25rem; font-size: var(--p4-f); }
.oder_info > div { display: flex; }
.oder_info span:not(.col_black) { width: 5rem; }

.subscribe_date { border-radius: 0.75rem; padding: 1.5rem 1rem 1.5rem 2.75rem; background: url(../images/bg/subscribe_dot.svg) no-repeat left 1rem center; border: 1px solid var(--bor-blackRGB); }
.subscribe_date > div { padding: 1rem; border-radius: 0.75rem; font-size: var(--p5-f); } 
.subscribe_date > div .col_gray4 { width: 5rem; display: inline-block; } 
.subscribe_date .bg_active { margin-top: 0.5rem; } 
.alarm_txt { padding: 1rem 1rem 1rem 3rem; border-radius: 0.75rem; font-size: var(--p5-f); background: url(../images/icons/ic_alram_filled.svg) no-repeat left 1rem center / 1.5rem var(--bg-gray5); line-height: var(--line16-h); }
.subscribe_wrap .box_shadow { padding-top: 1.5rem; border-radius: 1.25rem; } 
.subscribe_wrap .box_shadow .comp_title_03 { padding-left: 1.25rem; } 
.total_price { position: relative; margin-top: 1.25rem; padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; } 
.total_price::before { height: 1px; position: absolute; top: 0; content: ''; left: -1.25rem; width: calc(100% + 2.5rem); background: url(../images/bg/line_01.svg) center; } 
.total_price span { color: var(--col-gray4); font-size: var(--p5-f); }
.subscribe_wrap .comp_title_02 { padding-block: 2rem 0.75rem; }
.subscribe_wrap .comp_title_02.pd_top0 { padding-top: 0; }
.have_price { padding-bottom: 0.75rem; color: var(--sys-caption); font-size: var(--span4-f); } 

.pay_slide { margin-right: -1.1875rem; } 
.pay_slide .swiper-slide { max-width: 17.5rem; } 
.pay_slide .swiper-slide ~ .swiper-slide { margin-left: 1.25rem; } 
.pay_slide .swiper-slide .pay_item { position: relative; border-radius: 0.75rem; height: 100%; background-color: var(--bg-black); border: 2px solid transparent; aspect-ratio: 1.75 / 1; } 
.pay_slide .swiper-slide .pay_item .del_btn { position: absolute; right: 1rem; top: 1rem; width: 2rem; height: 2rem; background: url(../images/icons/ic_delite_round_wt.svg) no-repeat center / 2rem; } 
.pay_slide .swiper-slide .pay_item .pay_title { position: absolute; bottom: 1rem; left: 1rem; } 
.pay_slide .swiper-slide .pay_item .pay_title .pay_name { color: var(--col-white); font-size: var(--span3-f); } 
.pay_slide .swiper-slide .pay_item .pay_title .pay_num { padding-top: 0.5rem; color: var(--col-gray4); font-size: var(--span3-f); } 
.pay_slide .swiper-slide .pay_item .tag_red { margin-top: 1rem; margin-left: 1rem; } 

.pay_add { aspect-ratio: 1.75 / 1; max-width: 17.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; background-color: var(--bg-gray6); margin: 0 auto; } 
.pay_add .ic_add { padding-top: 2rem; color: var(--col-gray4); font-size: var(--p5-f); background: url(../images/icons/ic_add_round_dim.svg) no-repeat center top / 1.5rem; line-height: var(--line16-h); } 

.pay_slide .swiper-slide .error_msg { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.75rem; font-size: var(--span4-f); color: var(--sys-red); } 
.pay_slide .swiper-slide.swiper-slide-active .pay_item { border-color: var(--primary); } 
.pay_slide .swiper-slide .pay_item.error { border-color: var(--sys-red); } 
.pay_slide + .dot_txt { margin-top: 1.5rem; } 

.price_wrap .txt_box { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 0.75rem; font-size: var(--p4-f); line-height: var(--line16-h); }
.price_wrap .total { display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem; padding-top: 1.25rem; padding-inline: 1.25rem; margin-inline: -1.25rem; border-top: 1px solid var(--bg-gray5); } 
.price_wrap .total span { font-size: var(--p4-f); } 
.price_wrap .total strong { font-size: var(--h3-f); } 
.next_payment { padding: 1rem; border-radius: 0.75rem; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; background-color: var(--bg-gray5); } 
.next_payment .tit { display: flex; align-items: center; justify-content: space-between; font-size: var(--p5-f); } 
.next_payment .tit strong { display: flex; align-items: center; gap: 0.5rem; } 
.next_payment .txt { color: var(--col-gray4); font-size: var(--p6-f); } 

.dot_txt { display: flex; align-items: flex-start; gap: 0.25rem; margin-top: 0.75rem; color: var(--col-gray4); font-size: var(--p5-f); } 
.dot_txt::before { border-radius: 9999px; margin-top: 0.5rem; content: ''; width: 2px; height: 2px; background-color: var(--bg-gray2); }

.pay_btn_list { display: flex; align-items: center; gap: .5rem; padding-bottom: 1.25rem; }
.pay_btn_list button { font-size: var(--span2-f); color: var(--col-gray3); border: 1px solid var(--bor-blackRGB); border-radius: .25rem; width: 5rem; height: 2.5rem; font-weight: var(--bold-f); }
.pay_btn_list .pay_kakao { background: url(../images/icons/kakaopay_g.png) no-repeat center / 2.375rem; } 
.pay_btn_list .active { border-color: transparent; }
.pay_btn_list .pay_card.active { background-color: var(--primary); color: var(--col-white); }
.pay_btn_list .pay_kakao.active { background-image: url(../images/icons/kakaopay_b.png); background-color: #FFEB00; }

.kakao_card { display: flex; flex-direction: column; gap: .75rem; }
.kakao_card li { position: relative; display: flex; align-items: center; gap: .5rem; padding: 1rem; border: 1px solid var(--bor-blackRGB); border-radius: .5rem; color: var(--col-gray3); cursor: pointer; }
.kakao_card li strong { font-size: var(--p4-f); }
.kakao_card li .del_btn { position: absolute; right: 1rem; top: 1.375rem; width: 1.25rem; height: 1.25rem; background: url(../images/icons/ic_delite_round_dim.svg) no-repeat center / 1.25rem; }
.kakao_card li.active { border-color: var(--primary); background-color: var(--bg-active); color: var(--col-gray2); }
.kakao_card li.error { border-color: var(--sub-red); background-color: var(--bg-error); color: var(--col-gray2); }

/* 쿠폰 모달 */
.coupon_check { position: relative; margin-right: 4.625rem; border-radius: .75rem; border: 1px solid var(--bor-blackRGB); padding: 1rem; color: var(--col-gray4); }
.modal .coupon_check ~ .coupon_check { margin-top: 1.25rem; }
.coupon_check:after { content: ""; position: absolute; right: -4.625rem; top: 1px; width: 4.625rem; height: 100%; border: 1px solid var(--bor-blackRGB); border-radius: .75rem; box-sizing: border-box; background: url(../images/icons/ic_check_round_off.svg) no-repeat center / 2rem; }
.coupon_check strong { padding-bottom: .75rem; font-size: var(--h1-f); color: var(--sys-caption); }
.coupon_check strong span { font-size: var(--p2-f); }
.coupon_check li { position: relative; padding-left: .5rem; color: var(--col-gray3); font-size: var(--p5-f); display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; line-height: var(--line16-h); }
.coupon_check li ~ li { margin-top: .5rem; }
.coupon_check li::before { content: ""; position: absolute; left: 2px; top: .375rem; width: 2px; height: 2px; border-radius: 100%; background-color: var(--bg-gray2); }
.coupon_check p { padding-top: .75rem; font-size: var(--span3-f); }
.coupon_check.active:after,
.coupon_check.active { border-color: var(--bor-primary); background-color: var(--bg-active); }
.coupon_check.active:after { background-image: url(../images/icons/ic_check_round_on.svg); }
.coupon_check.disable:after,
.coupon_check.disable { background-color: var(--bg-gray4); }
.coupon_check.disable:after { content: '사용\A불가'; white-space: pre; background-image: none; display: flex; align-items: center; justify-content: center; }
.coupon_check.disable strong { color: var(--col-gray4); }

.modal .modal_con.gray_txtbox { margin-top: -0.25rem; }
.gray_txtbox li { display: flex; align-items: flex-start; gap: 0.25rem; font-size: var(--p5-f); line-height: var(--line16-h); color: var(--col-gray3); } 
.gray_txtbox li ~ li { margin-top: 0.75rem; }
.gray_txtbox li:before { border-radius: 50%; margin-top: 0.5rem; content: ''; width: 2px; height: 2px; background-color: var(--bg-gray2); }

.coupon_underTxt { display: flex; align-items: center; justify-content: space-between; }
.coupon_underTxt button { text-decoration: underline; color: #63656A; font-size: var(--misc2-f); font-weight: 500; }

/* 카드등록 */
.chk_tit { display: flex; align-items: baseline; gap: .25rem; }

/* 모바일 */
@media (max-width: 500px)
{
  .top_btn,
  .btn_floating { right: 1.25rem; }
  .chemist_video { left: 1.25rem; }
  .popup,
  .modal { left: 0; }
}