@charset "UTF-8";
/* ============================================================================
 * style_dev.css  —  개발팀 전용 CSS
 * ----------------------------------------------------------------------------
 * - style.css 는 퍼블팀이 별도로 형상관리하므로 개발팀은 절대 수정하지 않는다.
 * - 개발팀이 추가하는 모든 CSS 는 이 파일에만 작성한다.
 * - 본 파일은 config.html 에서 style.css "앞"에 로드된다.
 *   따라서 동일 우선순위(specificity) 충돌 시, 나중에 로드되는 style.css 가 우선 적용된다.
 *   => 신규 컴포넌트 스타일만 추가하고, 기존 style.css 선택자 재정의는 지양한다.
 *      (부득이하게 덮어써야 하면 퍼블팀과 협의 / style.css 에 반영 요청)
 * - 클래스 네이밍은 '-dev' 접미사를 붙여 퍼블 클래스와 충돌을 피한다.
 * ========================================================================== */

/* ----------------------------------------------------------------------------
 * 로그인 상단 메인 비주얼 (캐릭터 이미지 + 안내 배너)
 * 적용 위치: mobile templates/pages/login/login.html
 * -------------------------------------------------------------------------- */
.login-main-dev {
    text-align: center;
}

/* 디자인 스펙: 이미지 width 311 / height 112, top 108 / left 32 (375px 아트보드).
   round-section 좌우 padding(20px) + 311px 중앙정렬 => 375px 기준 좌우 32px 거터로 left:32 일치.
   원본 933x336 = 311:112 비율이므로 height:auto 로 자동 112px. */
.login-main-dev .login-main-img-dev {
    margin: 0 auto;
    font-size: 0; /* inline 이미지 하단 여백 제거 */
}

.login-main-dev .login-main-img-dev img {
    display: block;
    width: 311px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* 안내 배너 버튼 (이미지 '바로 아래' 붙임)
   디자인 스펙(Figma): width 311 / padding 16 / bg #F9D7E0 / radius 8 /
   border 1px #C8072A / 글자색 #C8072A. 색은 브랜드컬러라 var(--primary) 사용. */
.login-notice-banner-dev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 24px;
    padding: 16px;
    box-sizing: border-box;
    background-color: #F9D7E0;
    border: 1px solid var(--primary, #C8072A);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}

.login-notice-banner-dev .login-notice-banner-dev__text {
    display: block;
    line-height: 1.6;
}

.login-notice-banner-dev .login-notice-banner-dev__text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary, #C8072A);
}

.login-notice-banner-dev .login-notice-banner-dev__text small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--primary, #C8072A);
}

/* 우측 화살표(>) — 기존 ico24_arrow_right.svg(회색 #444) 재사용 +
   CSS mask 로 브랜드컬러 틴트. (.ico 는 background-image 방식이라 색 고정이므로 mask 사용) */
.login-notice-banner-dev .login-notice-banner-dev__arrow {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--primary, #C8072A);
    -webkit-mask: url("/assets/images/common/icon/ico24_arrow_right.svg") no-repeat center / contain;
    mask: url("/assets/images/common/icon/ico24_arrow_right.svg") no-repeat center / contain;
}