/* ============================================================
   style_v2_add.css  (자동 생성)
   style_v2.css 에서 누락된 기존 style.css 전용 규칙 보강분
   대상: 폼 / 달력(datepicker,timepicker) / 약관동의 / 신청폼 스타일
   주의: style_v2.css 다음에 로드할 것 (v2 -> add 순서)
   제외: v2가 재설계한 .header .gnb 네비게이션 구버전 규칙
   ============================================================ */

/* v2 :root 에서 삭제된 변수 복원 (아래 .ui-datepicker 등이 참조)
   - --rec-secondary : 달력 활성일 배경 / 버튼 색
   - --text-dark     : 달력 제목·날짜 텍스트 색
   (--gray-light 는 v1 원본에서도 미정의였으므로 의도적으로 복원하지 않음) */
:root {
  --rec-secondary: #5680eb;
  --text-dark: #1c1c1c;
}

#agree_wrap { position: relative;}
#agree_wrap .agree-hint {
    margin-top: 8px;
    font-size: 1.2rem;
    color: #d12b3a !important;   
    text-align: center;
    width: 100%;
    min-height: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease;
    position: relative;
    z-index: 1;}
#agree_wrap .agree-hint.is-show {
    opacity: 1;
    visibility: visible;}
#agree_wrap .agree-overlay {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: not-allowed;
    display: none;
    z-index: 2;                 
    touch-action: manipulation;}
.form-box.is-highlight {
    outline: 1px solid #d12b3a;}
.inq-form-box {
    padding: 30px;
    -webkit-box-shadow: 0 -2px 54px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 -2px 54px 0 rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border-radius: 50px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;}
.inq-form-box .row {
    gap: 20px;
    width: 100%;}
.inq-form-box .row .column {
    width: 100%;}
.inq-form-box .form-line-box .inq-terms-box {
    height: 200px;
    overflow: auto;}
.inq-form-box textarea[name="sc_content"] {
    resize: none !important;}
#fapplyform textarea[name="apply_memo"] {
    resize: none !important;
    border-color: #ffd7db;
    border-width: 1px;}
.inq-button-group {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;}
.inq-terms-agreeline {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;}
.inq-terms-agreeline input[disabled] + span {
    opacity: 0.6;}
#fmailform textarea:invalid, #fmailform textarea.invalid, #fmailform input[type=text]:invalid, #fmailform input[type=email]:invalid, #fmailform input[type=tel]:invalid, #fapplyform textarea:invalid, #fapplyform textarea.invalid, #fapplyform input[type=text]:invalid, #fapplyform input[type=email]:invalid, #fapplyform input[type=tel]:invalid, #fmailform select, #fapplyform select {
    border-color: #ffd7db;
    border-width: 1px;}
#fmailform select:invalid, #fmailform select.invalid, #fapplyform select:invalid, #fapplyform select.invalid {
    border-color: #ffd7db;
    border-width: 1px;}
#fmailform select:focus, #fapplyform select:focus {
  border-color: #000 !important;
  border-width: 2px;}
.inq-form-box input[type="text"]::selection, .inq-form-box textarea::selection {
    background: rgba(105, 128, 234, 0.35);
    text-shadow: none;}
.inq-form-box input[type="text"]::-moz-selection, .inq-form-box textarea::-moz-selection {
    background: rgba(105, 128, 234, 0.35);
    text-shadow: none;}
.select-same-bg {
    background-color: #F8F9FC;}
.row-consult-date {
    align-items: flex-start;}
.inq-form-box.is-highlight {
    outline: 1px solid #d12b3a;}
.apply-type-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;}
.apply-type-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;}
.apply-type-row-bottom #apply_content_etc_txt {
    max-width: 750px;
    height: 36px;
    padding: 0 10px;}
.complete-form {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;}
.complete-form .main-graphic {
    width: 380px;
    height: 380px;}
.complete-form h2 {
    font-size: 3.6rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: -1px;}
.complete-form p {
    font-size: 1.6rem;}
.complete-form .button-group {
    margin-top: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;}
.iptDiv {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;}
.input-type-ico {
    position: relative;
    min-height: 36px;
    width: 100%;}
.input-type-ico input {
    padding-right: 40px;}
.input-type-ico .ico {
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 0;
    margin: auto;}
.ico.cal:before {
    width: 24px;
    height: 24px;
    background: url('../images/admin-ico-date.png') no-repeat;
    background-size: contain;}
.ico.cal:before {
    width: 24px;
    height: 24px;
    
    background: url('../images/admin-ico-date.png') no-repeat;
    background-size: contain;}
.ui-widget {
    font-family: 'Pretendard', 'Noto Sans KR', 'Apple SD Gothic Neo',
        -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial,
        'Malgun Gothic', '맑은 고딕', Dotum, 돋움, sans-serif;}
.ui-datepicker td:nth-child(1) a {
    color: #e57373;
    font-weight: bold;}
.ui-datepicker td:nth-child(7) a {
    color: #64b5f6; 
    font-weight: bold;}
.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:last-child a.ui-state-active {
    color: #fff;}
.ui-widget-content {
    background-color: #fff;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    color: var(--text);}
.ui-datepicker {
    border-radius: 8px;
    border: 1px solid var(--border);
    -webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.ui-datepicker th {
    color: var(--text);}
.ui-datepicker .ui-widget-header {
    background-color: transparent;
    border: none;
    padding: 10px;
    border-radius: 8px;
    color: #fff;}
.ui-datepicker .ui-widget-header .ui-datepicker-title {
    margin: 0;
    *zoom: 1;
    display: block;}
.ui-datepicker .ui-widget-header .ui-datepicker-title:after {
    content: '';
    display: block;
    clear: both;}
.ui-datepicker .ui-widget-header .ui-datepicker-title, .ui-datepicker .ui-widget-header .ui-datepicker-title span {
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 700;}
.ui-datepicker .ui-widget-header .ui-datepicker-next, .ui-datepicker .ui-widget-header .ui-datepicker-prev {
    top: 9px;}
.ui-datepicker .ui-widget-header .ui-datepicker-next span, .ui-datepicker .ui-widget-header .ui-datepicker-prev span {
    background: url('../images/cal-arrow-l.png') no-repeat;
    background-size: contain;}
.ui-datepicker .ui-widget-header .ui-datepicker-prev {
    left: 6px;}
.ui-datepicker .ui-widget-header .ui-datepicker-next {
    right: 6px;}
.ui-datepicker .ui-widget-header .ui-datepicker-next span {
    background: url('../images/cal-arrow-r.png') no-repeat;
    background-size: contain;}
.ui-datepicker td {
    color: var(--text);
    padding: 6px 0;
    text-align: center;}
.ui-datepicker th {
    font-size: 1.4rem;
    font-weight: 400;
    opacity: 0.8;
    border-bottom: 1px solid var(--border);}
.ui-datepicker .ui-state-default {
    display: inline-block;
    padding: 0;
    font-size: 1.5rem;
    width: 30px;
    height: 30px;
    line-height: 23px;
    border: 3px solid transparent;
    background: none;
    text-align: center;
    border-radius: 6px;}
.ui-datepicker .ui-state-default.ui-state-highlight {
    color: var(--text);
    font-weight: 700;
    background-color: var(--gray-light);}
.ui-datepicker .ui-state-default.ui-state-highlight.ui-state-hover {
    opacity: 1;}
.ui-datepicker .ui-state-default.ui-state-active {
    border-radius: 6px;
    background-color: var(--rec-secondary);
    color: #fff;
    font-weight: 700;}
.ui-datepicker .ui-state-default.ui-state-active.ui-state-hover {
    opacity: 1;}
.ui-datepicker .ui-state-default.ui-state-hover {
    opacity: 0.5;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    color: #fff;
    font-weight: 700;
    border: none;
    float: left;
    padding-left: 0;
    padding-right: 30px;
    margin-right: 10px;
    font-size: 2rem;
    position: relative;
    z-index: 2;}
.ui-datepicker select.ui-datepicker-year {
    width: 104px;}
.ui-datepicker select.ui-datepicker-month {
    width: 70px;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {
    border: none;
    background: none;}
.datepicker-page {
    margin-top: -16px;}
.datepicker-page .datepicker {
    width: 100%;}
.datepicker-page .datepicker.readonly {
    pointer-events: none;}
.datepicker-page .datepicker .ui-datepicker-inline {
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 0;}
.ui-timepicker-standard a {
    height: 100%;
    padding: 0;
    line-height: 48px;}
.ui-timepicker-standard {
    padding: 0 !important;
    border-radius: 4px !important;
    border: 1px solid #bbb !important;
    margin-top: 2px !important;}
.ui-timepicker-container {
    height: 145px !important;}
.ui-timepicker-standard .ui-menu-item {
    height: 48px;}
.ui-timepicker-standard .ui-menu-item + .ui-menu-item {
    border-top: 1px solid var(--border);}
.ui-timepicker-standard .ui-state-hover {
    height: 100%;
    line-height: 48px;
    padding: 0;
    border: none !important;
    background: #eee !important;}
.ui-widget.ui-widget-content {
    border: none;}
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-gray);}
.ui-widget-content {
    border: 1px solid var(--border);}
.ui-datepicker .ui-datepicker-buttonpane button {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 10px;
    color: var(--rec-secondary);
    padding: 0 !important;
    opacity: 1 !important;
    border: none;}
.ui-state-disabled span, .ui-widget-content .ui-state-disabled span, .ui-widget-header .ui-state-disabled span {
    font-weight: 500;
    color: var(--text-light);}
.inlineDatepicker {
    border-radius: 14px;
    overflow: hidden;}
.inlineDatepicker .ui-datepicker .ui-widget-header .ui-datepicker-title, .inlineDatepicker .ui-datepicker .ui-widget-header .ui-datepicker-title span {
    font-size: 2rem;}
.inlineDatepicker .ui-datepicker .ui-widget-header .ui-datepicker-next, .inlineDatepicker .ui-datepicker .ui-widget-header .ui-datepicker-prev {
    top: 14px;}
.inlineDatepicker .ui-datepicker th {
    border: none;}
.inlineDatepicker .ui-datepicker-inline {
    width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: static;}
.inlineDatepicker .ui-state-default {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-dark);
    max-width: 46px;
    height: 50px;
    line-height: 43px;
    border-radius: 14px;}
.inlineDatepicker .ui-state-default.ui-state-active {
    border-radius: 14px;}
.title-lv3-gui {
  font-size: 3.6rem;
  font-weight: 800;
  color: #000;
  margin-bottom: 20px;}

@media (max-width: 719px) {
  .inq-form-box {
        padding: 20px;
        margin: 0 20px 20px;
        background-color: #fff;
        border: 1px solid #e9ebee;
        border-radius: 20px;
        -webkit-box-shadow: 0 -2px 54px 0 rgba(0, 0, 0, 0.05);
        box-shadow: 0 -2px 54px 0 rgba(0, 0, 0, 0.05);}
  .inq-form-box .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;}
  .inq-button-group {
        padding: 0 20px;}
  .inq-button-group .btn {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        min-width: 0;}
  .inq-terms-agreeline {
        padding: 0 20px;}
  #privacy_terms_box {
          height: 200px;
          overflow: auto;
          -webkit-overflow-scrolling: touch;}
  #privacy_terms_box::-webkit-scrollbar {
          display: block;
          width: 6px;
          height: 6px;}
  #privacy_terms_box::-webkit-scrollbar-thumb {
          background: rgba(0, 0, 0, 0.25);
          border-radius: 10px;}
  #privacy_terms_box::-webkit-scrollbar-track {
          background: transparent;}
  .title-lv3-gui {
          font-size: 2.6rem;
          font-weight: 700;
          margin-bottom: 10px;}
  .row-consult-date {
          align-items: flex-start;}
  .row-consult-date .input-item-inner {
          width: 100%;
          text-align: left;}
}

/* ============================================================
   [데스크톱] GNB 메가메뉴 - 각 드롭다운을 자기 메뉴 항목 바로 아래 정렬
   각 .menu-container 를 자기 .gnb-item 기준(left:0)으로 두어 항목 바로 아래에 붙인다.
   단, 라벨 간격(기본 38px)보다 컬럼이 넓으면 옆 컬럼과 겹치므로
   메뉴 항목 간격(gap)을 넓혀 겹침을 방지한다. (겹치면 gap 값을 키우세요)
   (모바일 max-width:719px 는 세로 나열/클릭 토글이라 정상 → 건드리지 않음)
   ============================================================ */
@media (min-width: 720px) {
  /* 메뉴 항목 간격 — 블로그 대메뉴 추가로 항목이 늘어 간격/글씨를 줄임
     (겹치면 gap 값을 키우세요) */
  .header .gnb > ul {
    gap: 60px;
  }
  /* 대메뉴 글씨 크기 축소 (기본 1.7rem → 1.5rem) */
  .header .gnb > ul > .gnb-item > .gnb-link {
    font-size: 1.5rem;
  }
  /* 소메뉴(드롭다운) 글씨도 동일하게 축소 (기본 1.7rem → 1.5rem) */
  .header .gnb .menu-container ul li a {
    font-size: 1.5rem;
  }
  /* 각 드롭다운을 자기 항목 기준 바로 아래에 정렬 */
  .header .gnb > ul > .gnb-item {
    position: relative;
  }
  .header .gnb .menu-container {
    left: 0;
    min-width: 0;
    width: -webkit-max-content;
    width: max-content;
  }
}

/* ============================================================
   [드롭다운 접힘 애니메이션] 글자가 부드럽게 페이드아웃되도록 (v1 방식 복원)
   v2 는 .menu-container 의 max-height 만 줄이고(overflow:hidden) 안쪽 ul 에는
   opacity 전환이 없어서, 접힐 때 글자가 아래 줄부터 한 줄씩 잘려 사라진다.
   v1 처럼 ul 에 opacity 전환을 줘서 글자 전체가 동시에 부드럽게 사라지게 한다.
   ============================================================ */
.header .gnb .menu-container ul {
  opacity: 0;
  -webkit-transition: opacity 0.18s ease;
  transition: opacity 0.18s ease;
}
.header .gnb .menu-container.on ul {
  opacity: 1;
}

/* ============================================================
   [백드롭 부드럽게 접힘] v1 방식 복원
   v2 는 .gnb.menu-open:before 만 있어서 백드롭이 즉시 나타났다 사라진다.
   v1 처럼 항상 존재하는 기본 상태(height:0, opacity:0) + transition 을 줘서
   백드롭도 글자와 함께 부드럽게 열리고 닫히게 한다.
   (모바일에서는 v2 가 .menu-open:before 를 display:none 처리하므로 영향 없음)
   ============================================================ */
.header .gnb::before {
  content: "";
  display: block;
  width: 100vw;
  height: 0;
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 70px;
  border-bottom: 1px solid #e9ebee;
  z-index: 6;
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  opacity: 0;
  -webkit-transition: height 0.4s ease, opacity 0.4s ease;
  transition: height 0.4s ease, opacity 0.4s ease;
}
.header .gnb.menu-open::before {
  height: var(--gnb-backdrop-height, 360px);
  opacity: 1;
}

/* ============================================================
   [access-management 커버] 상단 '서비스 신청' 버튼 클릭 막힘 수정
   .product-img(position:absolute, max-width:1280px)가 DOM상 headline 뒤라
   headline 위를 덮어 버튼 클릭이 가로막힌다.
   headline 을 이미지 위로 올려(z-index) 버튼이 눌리게 한다.
   ============================================================ */
.viewport .app-section.cover.access-management .headline {
  position: relative;
  z-index: 2;
}

/* ============================================================
   [attend_check 커버] 태블릿 이미지 왼쪽에 L자 스탠드 모델(.stand-model) 추가
   기존 attendance-management.png(태블릿)은 그대로 두고,
   새 이미지를 그 왼쪽·앞쪽에 겹쳐 배치한다.
   product-img 는 position:absolute 이므로 그 자체가 기준 컨테이너가 된다.
   (좌표/크기는 디자인에 맞춰 left/bottom/width 값으로 미세조정)
   ============================================================ */
.viewport .app-section.cover.attendance-management .product-img .stand-model {
  position: absolute;
  left: 5%;
  top: 35%;
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
          transform: translateY(-20%);
  width: 30%;
  height: auto;
  z-index: 2;
  -webkit-filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
          filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

@media (max-width: 719px) {
  .viewport .app-section.cover.attendance-management .product-img {
    position: relative;
  }
  .viewport .app-section.cover.attendance-management .product-img .stand-model {
    left: 0;
    width: 40%;
  }
}

/* ============================================================
   [access_check 커버] 태블릿 이미지 오른쪽에 L자 스탠드 모델(.stand-model) 추가
   attend_check 과 동일한 방식. 단, access 는 태블릿(product-img)이
   왼쪽(left:-34%)에 있으므로 새 기기는 오른쪽(right 기준)에 배치한다.
   (좌표/크기는 디자인에 맞춰 right/top/width 값으로 미세조정)
   ============================================================ */
.viewport .app-section.cover.access-management .product-img .stand-model {
  position: absolute;
  right: 7%;
  top: 37%;
  -webkit-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
          transform: translateY(-20%);
  width: 27%;
  height: auto;
  z-index: 2;
  -webkit-filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
          filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.35));
}

@media (max-width: 719px) {
  .viewport .app-section.cover.access-management .product-img {
    position: relative;
  }
  .viewport .app-section.cover.access-management .product-img .stand-model {
    right: 0;
    width: 40%;
  }
}

/* ============================================================
   [attend_check overview] 두 번째 스펙 블럭(L자 스탠드 모델) 기기 사진
   기존 이미지(attendance-management-left, 1070x1000)는 컨테이너(535x500)와
   비율이 같아 크기 지정이 필요 없었으나, 새 이미지는 세로형(1517x2023)이라
   그대로 두면 박스를 넘겨 아래가 잘린다.
   -> 컨테이너 크기(535x500) 안에 비율 유지하며 맞춰(contain) 잘림 방지.
   ============================================================ */
.list-product .card .product-img.l-stand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.list-product .card .product-img.l-stand img {
  width: auto;
  height: 82%;        /* 박스(500px) 대비 82% -> 기기 축소 + 상하 여백 */
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

/* ============================================================
   [price_meal] 급식 관리 가격 구성기
   좌: 서비스 안내(설명 + 수량/약정 선택 + 서비스이용/제품구매 박스)
   우: 식수 데이터 보드(제품 구매가)
   ============================================================ */
.meal-config {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  margin-top: 30px;
}
.meal-config .card {
  border: 1px solid #CADDF0;
  border-radius: 20px;
  background: #fff;
  padding: 30px;
}
.meal-config .meal-main {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.meal-config .meal-board {
  -ms-flex: none;
      flex: none;
  width: 300px;
  text-align: center;
}
.meal-config .plan-label {
  display: inline-block;
  background: #0096FF;
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  border-radius: 100px;
  padding: 5px 16px;
  margin-bottom: 20px;
}
.meal-config .meal-main-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.meal-config .meal-desc {
  font-size: 1.5rem;
  line-height: 26px;
  color: var(--text-light);
}
.meal-config .meal-note {
  color: #0096FF;
  font-weight: 600;
  margin-top: 14px;
}
.meal-config .meal-selects {
  -ms-flex: none;
      flex: none;
  width: 240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
.meal-config .meal-selects .sel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.meal-config .meal-selects .sel > label {
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  -ms-flex: none;
      flex: none;
  width: 36px;
}
.meal-config .meal-selects .sel select {
  width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
}
.meal-config .meal-prices {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.meal-config .meal-prices .price-block {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.meal-config .board-desc {
  font-size: 1.4rem;
  line-height: 22px;
  color: var(--text-light);
  margin-bottom: 24px;
}
.meal-config .price-block {
  background: #F8F9FC;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
}
.meal-config .price-block .tit {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.meal-config .price-block .price {
  font-size: 3.2rem;
  font-weight: 800;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: baseline;
  gap: 4px;
  line-height: 1.2;
}
.meal-config .price-block .price em {
  font-size: 1.8rem;
  font-weight: 700;
  font-style: normal;
}
.meal-config .price-block .list-tag {
  margin-top: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}
.meal-config .price-block .list-tag li {
  font-size: 1.15rem;
  /* color: var(--text-light); */
  color: #6980EA;
  /* position: relative; */
}
/* .meal-config .price-block .list-tag li + li {
  padding-left: 9px;
} */
.meal-config .price-block .list-tag li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background: #ccc;
}

@media (max-width: 719px) {
  .meal-config {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .meal-config .meal-board {
    width: 100%;
  }
  .meal-config .meal-main-top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .meal-config .meal-selects {
    width: 100%;
  }
  .meal-config .meal-prices {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

/* ============================================================
   [price_attend] 출결·출입 관리 가격 구성기
   좌: 타입/장비/수량/약정 선택 + 안내 태그 / 우: 서비스 이용 금액 · 제품 구매가
   ============================================================ */
.attend-config {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  margin-top: 30px;
  padding: 40px;
  border: 1px solid #CADDF0;
  border-radius: 20px;
  background: #fff;
}
.attend-config .config-left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.attend-config .config-right {
  -ms-flex: none;
      flex: none;
  width: 360px;
}
.attend-config .config-head .tit {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.attend-config .config-head .sub {
  font-size: 1.5rem;
  color: var(--text-light);
  margin-bottom: 24px;
}
.attend-config .plan-label {
  margin-top: 6px;
}
.attend-config .config-selects {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 20px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  margin-bottom: 28px;
}
.attend-config .config-selects .sel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.attend-config .config-selects .sel > label {
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  -ms-flex: none;
      flex: none;
  width: 36px;
}
.attend-config .config-selects .sel select {
  width: auto;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin: 0;
}
.attend-config .config-guide {
  margin-top: 2px;
}
.attend-config .config-right .price-block {
  background: #F8F9FC;
  border-radius: 16px;
  padding: 30px 24px;
  text-align: center;
}
.attend-config .config-right .price-block + .price-block {
  margin-top: 20px;
}
.attend-config .config-right .price-block .tit {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}
.attend-config .config-right .price-block .price {
  font-size: 3.6rem;
  font-weight: 800;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: baseline;
  gap: 4px;
  line-height: 1.2;
}
.attend-config .config-right .price-block .price em {
  font-size: 1.8rem;
  font-weight: 700;
  font-style: normal;
}
.attend-config .config-right .price-block .list-tag {
  margin-top: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
}
.attend-config .config-right .price-block .list-tag li {
  font-size: 1.2rem;
  color: #6980EA;
  /* color: var(--text-light); */
  /* position: relative; */
}
/* .attend-config .config-right .price-block .list-tag li + li {
  padding-left: 9px;
} */
.attend-config .config-right .price-block .list-tag li + li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 1px;
  height: 10px;
  background: #ccc;
}

@media (max-width: 719px) {
  .attend-config {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 24px;
    gap: 24px;
  }
  .attend-config .config-right {
    width: 100%;
  }
  .attend-config .config-selects {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   [apply/attend_access_config] 출결·출입 관리 3단계 구성기
   (약정 · 수량 선택 → 서비스 이용 / 기기 구매가)
   .plan-contents 기본 스타일 위에 구성기 전용 요소만 보강
   ============================================================ */
.service-box .paper .plan-contents.attend-cfg .head .desc {
  color: #0096FF;
  font-weight: 700;
  margin-bottom: 0;
}
.attend-cfg .cfg-sel-label {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 20px 0 12px;
}
.attend-cfg .cfg-note {
  font-size: 1.3rem;
  font-weight: 600;
  color: #0096FF;
  margin: 16px 0;
}
.attend-cfg .cfg-selects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.attend-cfg .cfg-selects select {
  width: 160px;
}
/* 서비스 이용 / 기기 구매가 두 박스 (선택 아님, 둘 다 적용값 표시) */
.attend-cfg .cfg-prices {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}
.attend-cfg .cfg-prices .box {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-radius: 14px;
  padding: 24px;
}
.attend-cfg .cfg-prices .box.svc,
.attend-cfg .cfg-prices .box.dev {
  border: 2px solid #6980EA;
  background: #F4F6FF;
}
/* record.php 형식에 맞춘 글자 크기 (제목 2rem / 금액 3.8rem / 단위 2.4rem) */
.attend-cfg .cfg-prices .box .label {
  font-size: 2rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 14px;
}
.attend-cfg .cfg-prices .box .amount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
}
.attend-cfg .cfg-prices .box .amount em {
  font-size: 2.4rem;
  font-weight: 700;
  font-style: normal;
}
.attend-cfg .cfg-prices .box.dev .amount {
  color: #6980EA;
}
/* 태그는 record 와 동일한 글로벌 .list-tag li 스타일을 그대로 사용 (별도 override 제거) */
.attend-cfg .cfg-prices .box .list-tag {
  margin-top: 14px;
}
.attend-cfg .cfg-guide {
  margin-top: 24px;
}

/* [2단계] 스크린 선택 화면 파란 안내 문구 */
.service-box .paper .plan-contents .head .cfg-guide-desc {
  color: #0096FF;
  font-weight: 700;
  margin-top: 6px;
  margin-bottom: 0;
}

/* ============================================================
   [2단계] 스크린 선택 카드(.list-plan-main.screen-select)만 폰트 개별 조정
   공용 규칙(.list-plan-main li .desc/.side)은 건드리지 않고,
   attend.php / access.php 의 스크린 선택 카드에만 적용된다.
   ▼ 아래 font-size 값만 바꾸면 이 화면 카드 글자 크기가 바뀜
   ============================================================ */
.service-box .paper .plan-contents .list-plan-main.screen-select li .desc {
  font-size: 1.3rem;   /* 설명문(층마다…) 크기 */
}
.service-box .paper .plan-contents .list-plan-main.screen-select li .side {
  font-size: 1.5rem;   /* 스펙(10.1 터치 스크린…) 크기 */
}

@media (max-width: 719px) {
  .attend-cfg .cfg-prices {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .attend-cfg .cfg-selects select {
    width: 100%;
  }
}

/* ============================================================
   [visit_book 커버] 히어로 태블릿 이미지 크기 조절
   .tablet 에 width 미지정이라 원본 크기로 커 보임 → 폭 지정.
   ▼ width 값만 바꾸면 크기 조절됨
   ============================================================ */
.viewport .app-section.cover.visit-reservation .product-img .tablet {
  width: 620px;
  height: auto;
}

/* 태블릿+휴대폰 묶음 전체를 우측으로 이동 (간격 유지). 기존 right:-15%
   ▼ right 를 덜 음수로 = 더 오른쪽 (예: -8% → -4% 더 오른쪽) */
.viewport .app-section.cover.visit-reservation .product-img {
  right: -25%;
}

/* 휴대폰 이미지를 태블릿에서 조금 더 왼쪽으로 → 두 이미지 간격 확대 (기존 -400px) */
/* .viewport .app-section.cover.visit-reservation .product-img .mobile {
  left: -440px;
} */

/* [meal_check] 폰 주변 4카드 — 상단·하단 카드를 세로 중앙으로 당겨 사이 여백 축소
   기존: 상단 top:0 / 하단 bottom:0  →  각 8% 안쪽으로 (값 ↑ = 더 좁아짐) */
.app-section.screenDetails .device .item.item1,
.app-section.screenDetails .device .item.item3 {
  top: 8%;
}
.app-section.screenDetails .device .item.item2,
.app-section.screenDetails .device .item.item4 {
  bottom: 8%;
}

/* ============================================================
   [visit_book overview] 서비스 사용 카드(.card.reverse)
   - 이미지가 컨테이너(535×500)보다 커서 넘침 → 박스 안에 맞춤(contain)
   - 카드에 상하 여백이 없어 글자가 꽉 참 → 상하 padding 추가
   ▼ padding 값 / 이미지는 width 로 더 줄일 수 있음
   ============================================================ */
.list-product .card.reverse {
  padding-top: 40px;
  padding-bottom: 40px;
}
.list-product .card.reverse .product-img.visit-reservation img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ============================================================
   [visit_book 광고] 4개 블럭 이미지 크기 통일
   기존 .advertisement .row img 는 width:560px(폭 고정)이라
   비율이 다른 이미지끼리 높이가 제각각 → 행 정렬이 어긋남.
   visit 광고 섹션(.visit-ad)만 '높이 고정'으로 바꿔 통일한다.
   ▼ height 값만 바꾸면 크기 조절됨
   ============================================================ */
.viewport .app-section.advertisement.visit-ad .row img {
  width: 460px;
  height: 320px;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 719px) {
  .viewport .app-section.advertisement.visit-ad .row img {
    width: 100%;
    height: auto;
  }
}