@charset "utf-8";

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* [Variables] */
:root {
    --brown: #247553;
    --red: #e21c11;
    --yellow: #f5a100;
    --beige: #f5ebd4;
    --bg: #f6f7fb;
    --max-w: 1400px;
    --font-bk: 'Paperozi', 'Paperozi', sans-serif;
}

/* [Reset] */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Paperozi', sans-serif; background-color: var(--bg); color: #222; line-height: 1.4; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block;  width: 100%;  height: 100%; object-fit: cover; }
button { border: none; background: none; cursor: pointer; }
#captcha_img {width:180px}

/* [Layout] */
.inner { width: 100%; padding: 0 20px; margin: 0 auto; position: relative; }
@media (min-width: 1200px) { .inner { max-width: var(--max-w); padding: 0; } }

section { margin-bottom: 60px; }

/* [Header] */
header { background: #fff; height: 77px; position: sticky; top: 0; z-index: 1000; }
.header-wrap { display: flex; align-items: center; justify-content: space-between; height: 100%; position: relative; }
.logo a { font-family: var(--font-bk); font-size: 28px; color: var(--red); line-height: 1; text-shadow: 1px 1px 0px rgba(0,0,0,0.1); }

/* PC Menu (Hidden on Mobile) */
.gnb, .header-right { display: none; }

/* Mobile Menu Button */
.btn-mo-menu { width: 30px; height: 20px; position: relative; display: block; z-index: 1001; }
.btn-mo-menu span { display: block; width: 100%; height: 3px; background: var(--brown); position: absolute; left: 0; transition: 0.3s; border-radius: 2px; }
.btn-mo-menu span:nth-child(1) { top: 0; }
.btn-mo-menu span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.btn-mo-menu span:nth-child(3) { bottom: 0; }

/* [★ Mobile Menu Layer Style - 필수 추가] */
/* 평소에는 화면 오른쪽 밖(-100%)에 숨겨두고 안보이게 처리 */
.mo-menu-layer { 
    position: fixed; 
    top: 0; 
    right: -100%; /* 화면 밖으로 보냄 */
    width: 100%; 
    height: 100vh; 
    background: rgba(0,0,0,0.5); 
    z-index: 2000; 
    transition: 0.3s; 
    visibility: hidden; /* 눈에 안보이게 */
    opacity: 0;
}
/* active 클래스가 붙으면 화면 안으로 들어옴 */
.mo-menu-layer.active { 
    right: 0; 
    visibility: visible; 
    opacity: 1;
}
.mo-menu-inner {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 300px;
    height: 100%;
    background: #fff;
    padding: 20px;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}
.mo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.mo-head h2 { color: var(--red); font-family: var(--font-bk); font-size: 22px; }
.btn-close { font-size: 24px; font-weight: bold; }
.mo-gnb li a { display: block; padding: 15px 0; font-size: 18px; font-weight: 800; border-bottom: 1px solid #eee; color: #333; }

/* [PC View Media Query] */
@media (min-width: 1024px) {
    header { height: 90px; background: #fff; }
    
    .header-wrap { justify-content: center; } 
    .logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
    
    /* [수정] 상위 메뉴 (GNB List Item) */
    .gnb { display: flex; margin-left:120px; align-items: center; gap: 45px; height: 100%;  font-weight: 500;}
    .gnb > li { 
        position: relative; /* 서브메뉴의 기준점 */
        height: 100%; 
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    .gnb > li > a { 
        font-family: var(--font-bk); 
        font-size: 22px; 
        color: #512314; 
        transition: color 0.3s; 
        letter-spacing: -0.5px;
        padding: 0 10px; /* 클릭 영역 확보 */
        cursor: pointer;
    }
    .gnb > li:hover > a { color: var(--red); }
	
    /* [수정] PC 서브메뉴 (Dropdown) - 핵심 수정 부분 */
    .submenu { 
        display: none; /* 평소엔 숨김 */
        position: absolute; /* 공중에 띄움 (레이아웃 영향 X) */
        top: 80px; /* 헤더 높이 바로 아래 위치 */
        left: 50%; 
        transform: translateX(-50%); /* 가운데 정렬 */
        background: #fff; 
        border: 1px solid #eee; 
        min-width: 180px; 
        z-index: 5000; /* 슬라이드보다 무조건 위에 */
        padding: 15px 0; 
        border-radius: 10px; 
        box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* 그림자 추가 */
        white-space: nowrap; /* 줄바꿈 방지 */
        flex-direction: column;
        gap: 0;
    }
    
    /* 마우스 올렸을 때 보이기 */
    .gnb > li:hover .submenu { display: flex; }
	
    /* 서브메뉴 항목 스타일 */
    .submenu li { width: 100%; }
    .submenu li a { 
        font-family: 'Paperozi', sans-serif; 
        display: block; 
        padding: 12px 25px; 
        font-size: 17px; 
        color: #444; 
        font-weight: 500; 
        text-align: center;
        transition: all 0.2s;
    }
    .submenu li a:hover { 
        color: var(--red); 
        background: #f9f2e8; /* 호버 시 연한 베이지 배경 */
    }	

    .header-right { display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
    .btn-franchise { background: #eaddcf; color: #512314; padding: 10px 20px; border-radius: 30px; font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 5px; transition: 0.3s; }
    .btn-franchise:hover { background: #dcc4b0; }

    .btn-mo-menu, .mo-menu-layer { display: none; } /* PC에서는 모바일 메뉴 숨김 */
}

/* [Style for Sections] */
.sec-tit { font-family: var(--font-bk); font-size: 26px; color: #512314; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; letter-spacing: -1px; }
.sec-tit .more { font-family: 'Paperozi', sans-serif; font-size: 14px; color: #666; font-weight: bold; }
@media (min-width: 1024px) { .sec-tit { font-size: 34px; margin-bottom: 30px; } }

/* Top Section */
.top-sec { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.main-swiper { width: 100%; border-radius: 20px; overflow: hidden; position: relative; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.side-cards { display: flex; flex-direction: column; gap: 20px; }
.side-card { border-radius: 20px; padding: 25px; min-height: 160px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.card-app { background: #fff; border: 1px solid #eee; }
.card-app h3 { font-family: var(--font-bk); font-size: 22px; color: var(--brown); margin-bottom: 15px; text-align: center; position: relative; z-index: 2; line-height: 1.2; }
.app-btns { display: flex; gap: 10px; justify-content: center; position: relative; z-index: 2; }
.btn-store { background: #f2f2f2; padding: 10px 15px; border-radius: 30px; font-size: 13px; font-weight: bold; color: #333; display: flex; align-items: center; gap: 5px; }
.deco-img { position: absolute; right: -10px; bottom: 0; width: 100px; height: auto; z-index: 1; opacity: 0.9; }
.card-shop { background: var(--brown); color: #fff; text-align: center; }
.card-shop h3 { font-family: var(--font-bk); font-size: 22px; margin-bottom: 15px; }
.shop-icon { font-size: 50px; margin-bottom: 10px; }
.search-input { background: #fff; border-radius: 30px; padding: 12px 20px; display: flex; width: 100%; max-width: 320px; margin: 0 auto; }
.search-input input { border: none; width: 100%; outline: none; font-size: 16px; font-family: 'Paperozi', sans-serif; }
.search-input button { font-size: 18px; color: var(--brown); }

@media (min-width: 1024px) {
    .top-sec { flex-direction: row; height: 500px; }
    .main-swiper { width: 68%; height: 100%; }
    .side-cards { width: 32%; height: 100%; }
    .side-card { flex: 1; }
    .card-app h3, .card-shop h3 { font-size: 26px; }
}

/* Info Grid */
.info-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.info-card { background: #fff; border-radius: 16px; padding: 30px; height: 340px; position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.badge { background: #f2f2f2; padding: 6px 12px; border-radius: 4px; font-size: 13px; font-weight: 800; color: #666; width: fit-content; margin-bottom: 15px; font-family: 'Paperozi', sans-serif; }
.badge.white { background: #fff; border: 1px solid #eee; }
.info-card h3 { font-family: var(--font-bk); font-size: 22px; color: #333; margin-bottom: 20px; line-height: 1.3; z-index: 2; word-break: keep-all; }
.link-arrow { margin-top: auto; text-align: right; font-weight: 900; color: var(--brown); font-size: 16px; z-index: 2; display: flex; justify-content: flex-end; align-items: center; gap: 5px; font-family: var(--font-bk); }
.card-bg-img { position: absolute; bottom: 0; left: 0; width: 100%; height: 55%; object-fit: cover; object-position: bottom; z-index: 1; }
.swiper-card { padding: 0; }
.why-swiper { width: 100%; height: 100%; }
.why-slide { padding: 30px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
.why-pg { position: absolute; top: 30px !important; left: 310px !important; bottom: auto !important; width: auto !important; display: flex; gap: 6px; }
.why-pg .swiper-pagination-bullet { width: 8px; height: 8px; background: #ddd; opacity: 1; margin: 0; }
.why-pg .swiper-pagination-bullet-active { background: var(--brown); width: 16px; border-radius: 4px; }
@media (min-width: 768px) { .info-grid { grid-template-columns: repeat(3, 1fr); } }

/* Delivery Banner */
.delivery-banner { background: var(--brown); border-radius: 16px; padding: 30px; color: #fff; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.deli-tit { font-family: var(--font-bk); font-size: 32px; margin-bottom: 10px; }
.deli-sub { font-size: 20px; opacity: 0.8; font-weight: 500; }
.deli-tel { font-family: var(--font-bk); font-size: 36px; color: var(--bg); display: flex; align-items: center; gap: 10px; text-shadow: 2px 2px 0px #000; }
@media (min-width: 1024px) { .delivery-banner { flex-direction: row; justify-content: space-between; text-align: left; padding: 35px 80px; } }

/* Growth Grid */
.growth-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.growth-card { background: #fff; border-radius: 16px; padding: 30px; min-height: 200px; position: relative; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.03); }
.growth-card h3 { font-family: 'Paperozi', sans-serif; font-size: 20px; font-weight: 800; color: #333; position: relative; z-index: 2; line-height: 1.4; word-break: keep-all; }
.growth-card img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; max-height: 60%; object-fit: cover; z-index: 1; }
@media (min-width: 1024px) { 
    .growth-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(2, 200px); gap: 20px; }
    .gc-brand { grid-column: 1; grid-row: 1; } .gc-esg { grid-column: 1; grid-row: 2; }
    .gc-qsr { grid-column: 2; grid-row: 1 / 3; } .gc-qsr img { height: 75%; max-height: 75%; }
    .gc-award { grid-column: 3; grid-row: 1 / 3; } .gc-award img { height: 55%; max-height: 55%; }
}

/* Video Section */
.video-card { border-radius: 15px; overflow: hidden; background: #fff; position: relative; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.video-thumb { position: relative; aspect-ratio: 16/9; }
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--red); box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: 0.3s; }
.video-card:hover .play-btn { transform: translate(-50%,-50%) scale(1.1); }
.video-tit { padding: 20px; text-align: center; font-weight: 800; color: var(--brown); font-size: 18px; font-family: var(--font-bk); }
@media (min-width: 768px) { .video-grid-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100% !important; transform: none !important; } .video-swiper { overflow: visible; } .video-card { width: auto !important; margin-right: 0 !important; } .video-pg { display: none; } }
@media (max-width: 767px) { .video-swiper { padding-bottom: 30px; } }

/* Bottom App */
.bottom-app-sec { background: var(--beige); padding: 60px 0; margin-top: 80px; }
.app-banner-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; }
.app-phone-img { width: 300px; max-width: 100%; }
.app-txt h2 { font-family: var(--font-bk); font-size: 32px; color: var(--brown); margin-bottom: 25px; line-height: 1.3; }
.app-txt h2 span { color: var(--red); }
.app-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 35px; }
.app-tags span { background: var(--brown); color: #fff; padding: 8px 15px; font-size: 16px; font-weight: 800; border-radius: 4px; font-family: var(--font-bk); }
.qr-area { display: flex; gap: 20px; justify-content: center; align-items: center; }
.qr-img { width: 110px; height: 110px; background: #fff; padding: 5px; border-radius: 8px; }
.dn-btns { display: flex; flex-direction: column; gap: 10px; }
.dn-btn { background: #222; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 14px; width: 180px; display: flex; align-items: center; gap: 10px; font-weight: bold; transition: 0.3s; }
.dn-btn:hover { background: #000; transform: translateY(-2px); }
@media (min-width: 1024px) { .app-banner-inner { flex-direction: row; justify-content: center; text-align: left; gap: 100px; } .app-txt h2 { font-size: 40px; } .app-tags, .qr-area { justify-content: flex-start; } }

/* Footer */
footer { background: #222; color: #888; padding: 50px 0; font-size: 14px; }
.f-links { margin-bottom: 25px; }
.f-links a { color: #ccc; margin-right: 25px; font-weight: bold; transition: color 0.3s; }
.f-links a:hover { color: #fff; }
.f-links a.bold { color: #fff; }
.f-info { line-height: 1.7; font-size: 13px; }

/* PC에서 이미지 드래그 방지 */
.swiper-slide img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; }
.swiper-slide { pointer-events: auto; }

/* [모바일 서브메뉴 스타일] */
.mo-depth1 {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.mo-depth1 .arrow {
    font-size: 12px;
    color: #bbb;
    transition: transform 0.3s;
}
/* 메뉴가 열렸을 때 화살표 회전 */
.mo-depth1.active .arrow {
    transform: rotate(180deg);
    color: var(--red);
}

/* 서브메뉴 영역 (기본 숨김) */
.mo-submenu {
    display: none; /* JS로 열기 위해 숨김 */
    background-color: #f9f9f9;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}
.mo-submenu li a {
    font-size: 15px !important; /* 상위 메뉴보다 작게 */
    padding: 10px 20px !important;
    color: #666;
    border-bottom: none !important; /* 구분선 제거 */
    font-weight: 500 !important;
}
.mo-submenu li a:hover {
    color: var(--red);
    background: #f0f0f0;
}

.ftel { position: absolute;    top: 5%;    right: 4%;    font-size: 22px;    color: #fff; }

/* ✅ 기존 CSS에 추가하면, 지금 카드 스타일(둥근 모서리/깔끔한 박스감)과 잘 맞습니다 */
.card-open .open-title{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.card-open .open-list{
  background: rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 14px;
}

.card-open .open-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.card-open .open-item:last-child{
  border-bottom: 0;
  padding-bottom: 6px;
}

.card-open .open-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.16);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.card-open .open-date{
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.card-open .open-bottom{
  margin-top: 20px;
}

.card-open .open-points .pt{
  color: rgba(0,0,0,0.92);
  font-size: 16px;
  line-height: 1.45;
  padding: 6px 0;
  margin: 10px 0;
}

.card-open .open-cta{
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.card-open .btn-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #0b7f7a; /* 카드 배경이 청록 계열일 때 글자가 예쁘게 뜹니다 */
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
}

.card-open .btn-cta.ghost{
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.28);
}


/* ===========================
   로그인 스킨 (mb_login) 카드 스타일
   =========================== */

/* 전체 레이아웃 */
#mb_login {
  max-width: 420px;
  margin: 60px auto 100px;
  padding: 0 20px;
  box-sizing: border-box;
  font-family: 'Paperozi', sans-serif;
}

/* 메인 로그인 카드 */
#mb_login .mbskin_box {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  padding: 28px 24px 30px;
}

/* 상단 제목 */
#mb_login .mbskin_box > h1 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #512314;
  font-weight: 800;
  margin-bottom: 18px;
}

/* "로그인 / 회원가입" 라인 */
.mb_log_cate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.mb_log_cate h2 {
  font-size: 18px;
  color: #5b3a22;
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* 회원가입 버튼 */
.mb_log_cate .join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #ead4be;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #7a4e2b;
}

.mb_log_cate .join:hover {
  background: #fdf6ef;
}

/* 로그인 필드셋 */
#login_fs {
  border: none;
  padding: 0;
  margin: 0;
}

/* 인풋 공통 스타일 */
#mb_login .frm_input {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #ead4be;
  padding: 0 14px;
  font-size: 14px;
  font-family: 'Paperozi', sans-serif;
  color: #512314;
  box-sizing: border-box;
}

#mb_login .frm_input::placeholder {
  color: #c1a48a;
}

/* 아이디, 비밀번호 간격 */
#login_id {
  margin-bottom: 10px;
}

#login_pw {
  margin-bottom: 14px;
}

/* 로그인 버튼 */
#mb_login .btn_submit {
  width: 100%;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: var(--red);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Paperozi', sans-serif;
  margin-top: 2px;
  cursor: pointer;
}

#mb_login .btn_submit:hover {
  background: #c7170d;
}

/* 자동로그인 / 아이디·비번 찾기 줄 */
#login_info {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
}

/* 자동로그인 체크박스 */
.login_if_auto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #7a4e2b;
}

.login_if_auto input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

/* 아이디/비밀번호 찾기 링크 */
.login_if_lpl a {
  font-size: 13px;
  color: #b28a63;
}

.login_if_lpl a:hover {
  color: #91502a;
}

/* 소셜 로그인 영역 위 여백 */
#mb_login .sns-wrap,
#mb_login .sns-login {
  margin-top: 18px;
}

/* ===========================
   비회원 구매 / 주문조회 (쇼핑몰)
   =========================== */

/* 비회원 구매 안내 카드 */
#mb_login_notmb {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 22px 20px 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  font-size: 13px;
  color: #5b3a22;
  box-sizing: border-box;
}

#mb_login_notmb h2 {
  font-size: 16px;
  font-weight: 800;
  color: #512314;
  margin-bottom: 6px;
}

#mb_login_notmb p {
  margin-bottom: 10px;
  line-height: 1.5;
}

/* 비회원 개인정보 동의 체크 */
#guest_privacy {
  max-height: 160px;
  overflow-y: auto;
  margin: 10px 0 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #f0e0cf;
  background: #fffdf8;
  font-size: 12px;
}

#mb_login_notmb .chk_box {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #7a4e2b;
}

/* 비회원 구매 버튼 */
#mb_login_notmb .btn_confirm {
  margin-top: 12px;
  text-align: right;
}

#mb_login_notmb .btn_confirm .btn_submit {
  width: auto;
  padding: 0 16px;
  height: 40px;
  border-radius: 999px;
  font-size: 13px;
}

/* 비회원 주문조회 카드 */
#mb_login_od_wr {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 22px 20px 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
  box-sizing: border-box;
}

#mb_login_od_wr h2 {
  font-size: 16px;
  font-weight: 800;
  color: #512314;
  margin-bottom: 10px;
}

#mb_login_od {
  border: none;
  padding: 0;
  margin: 0 0 10px;
}

#mb_login_od .frm_input {
  margin-bottom: 8px;
}

/* 주문조회 버튼 */
#mb_login_od .btn_submit {
  margin-top: 2px;
}

/* 주문조회 안내 문장 */
#mb_login_odinfo p {
  font-size: 12px;
  color: #7a4e2b;
  line-height: 1.5;
}

/* 반응형 조정 */
@media (max-width: 480px) {
  #mb_login {
    margin: 40px auto 70px;
  }

  #mb_login .mbskin_box {
    padding: 24px 18px 26px;
    border-radius: 16px;
  }

  #mb_login .mbskin_box > h1 {
    font-size: 20px;
  }

  .mb_log_cate h2 {
    font-size: 16px;
  }

  #mb_login_notmb,
  #mb_login_od_wr {
    padding: 18px 16px 20px;
    border-radius: 14px;
  }
}

.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* =========================
   비밀번호 확인 카드
========================= */

.pw-wrap{
  max-width:600px;
  margin:40px auto 60px;
  padding:0 var(--gutter);
}

.pw-card{
  padding:22px 22px 20px;
  border-radius:var(--radius-xl);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}

.pw-head{
  border-bottom:1px solid rgba(231,238,247,.9);
  padding-bottom:14px;
  margin-bottom:14px;
}

.pw-label{
  margin:0;
  font-size:12px;
  font-weight:500;
  letter-spacing:-.2px;
  color:var(--muted);
}
.pw-title{
  margin:6px 0 0;
  font-size:20px;
  font-weight:950;
  letter-spacing:-.6px;
}

.pw-desc{
  margin-bottom:16px;
  font-size:14px;
  font-weight:500;
  color:rgba(11,18,32,.82);
  line-height:1.6;
}
.pw-desc strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
}

.pw-form fieldset{
  margin:0;
  padding:0;
  border:none;
}

.pw-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pw-field-label{
  font-size:13px;
  font-weight:500;
  letter-spacing:-.2px;
  color:var(--ink);
}

.pw-input-wrap input.frm_input{
  width:100%;
  height:42px;
  border-radius:14px;
  border:1px solid rgba(15,43,69,.18);
  padding:0 12px;
  font-size:14px;
  font-weight:500;
}
.pw-input-wrap input.frm_input:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 1px rgba(10,99,216,.25);
}

.pw-actions{
  margin-top:16px;
  text-align:right;
}
.pw-submit{
  min-width:96px;
  height:40px;
  padding:0 18px;
  border-radius:999px;
  border:none;
  background:var(--brand);
  color:#fff;
  font-weight:950;
  letter-spacing:-.3px;
  cursor:pointer;
}
.pw-submit:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}

/* 모바일 */
@media (max-width: 560px){
  .pw-wrap{
    margin:26px auto 40px;
  }
  .pw-card{
    padding:18px 16px 18px;
  }
}