@charset "utf-8";
/* ==========================================================================
   헤어짱 멤버십 (/hairzzangMembership/Default.aspx)
   - Edge IE 모드(IE11) 호환: CSS 변수 / Grid / gap 사용 금지
   - 색상: brand #6366f1, ink #111, muted #5f6673, wash #f6f6fb, line #e7e8f0
   ========================================================================== */

/* 기본 */
.hzm, .hzm * { box-sizing: border-box; }
.hzm { width: 100%; min-width: 1280px; overflow: hidden; background: #fff; }
.hzm p, .hzm h2, .hzm h3, .hzm ul, .hzm li { margin: 0; padding: 0; list-style: none; }
.hzm, .hzm p, .hzm span, .hzm a, .hzm li, .hzm h2, .hzm h3 { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; color: #111; }
.hzm img { border: 0; vertical-align: top; }
.hzm a { text-decoration: none; }
.hzm a:hover { text-decoration: none; }
.hzm .inner { width: 1280px; margin: 0 auto; position: relative; }
.hzm .clearfix:after { content: ''; display: block; clear: both; }
.hzm .fw-b { font-weight: 700; }
.hzm .fw-m { font-weight: 500; }

/* 섹션 공통 헤딩 */
.hzm .sec-head { text-align: center; }
.hzm .sec-head .eyebrow { font-size: 16px; line-height: 24px; letter-spacing: -0.32px; font-weight: 700; color: #6366f1; }
.hzm .sec-head .title { margin-top: 12px; font-size: 38px; line-height: 55px; letter-spacing: -0.76px; font-weight: 700; color: #111; }
.hzm .sec-head .desc { margin-top: 12px; font-size: 18px; line-height: 27px; letter-spacing: -0.36px; color: #5f6673; }

/* ==========================================================================
   01 · Hero
   ========================================================================== */
.hzm .sec-hero { padding-top: 32px; }
.hzm .sec-hero .panel { height: 640px; background: #0d0d19; overflow: hidden; }
.hzm .sec-hero .hero-box { position: relative; width: 1108px; height: 440px; margin: 0 auto; top: 100px; }
.hzm .sec-hero .hero-copy { position: absolute; left: 0; top: 82px; width: 610px; }
.hzm .sec-hero .hero-eyebrow { font-size: 16px; line-height: 23px; letter-spacing: -0.32px; font-weight: 700; color: #9dff00; }
.hzm .sec-hero .hero-title { margin-top: 24px; font-size: 56px; line-height: 76px; letter-spacing: -1.12px; font-weight: 700; color: #fff; }
.hzm .sec-hero .hero-desc { margin-top: 24px; width: 600px; font-size: 18px; line-height: 27px; letter-spacing: -0.36px; color: #fff; opacity: 0.88; filter: alpha(opacity=88); }

.hzm .sec-hero .hero-illust { position: absolute; left: 646px; top: 0; width: 462px; height: 440px; }
.hzm .sec-hero .hero-illust .backdrop { position: absolute; left: 40px; top: 30px; width: 408px; height: 408px; }
.hzm .sec-hero .hero-illust .sparkle1 { position: absolute; left: 404px; top: 0; width: 72px; height: 72px; }
.hzm .sec-hero .hero-illust .sparkle2 { position: absolute; left: -46px; top: 355px; width: 44px; height: 44px; }

/* 멤버십 인증서 카드 (10.19deg 회전) */
.hzm .cert {
    position: absolute; left: 81px; top: 37px; width: 277px; height: 389px;
    padding: 25px 23px 28px; overflow: hidden;
    background: #6366f1; border: 1.676px solid #8486da; border-radius: 23.471px;
    box-shadow: 0 11.735px 25.147px -8.382px rgba(54, 56, 125, 0.16);
    -ms-transform: rotate(10.19deg); transform: rotate(10.19deg);
}
.hzm .cert .watermark { position: absolute; left: 107px; top: 62px; width: 231.357px; height: 276.622px; }
.hzm .cert .cert-head { position: relative; height: 64px; }
.hzm .cert .cert-logo { position: relative; width: 60.494px; height: 11.708px; overflow: hidden; }
.hzm .cert .cert-logo img { position: absolute; left: -8.06%; top: -81.44%; width: 116.13%; height: 254.55%; }
.hzm .cert .cert-name { margin-top: 10px; font-size: 20.118px; line-height: 1; font-weight: 700; color: #fff; white-space: nowrap; }
.hzm .cert .cert-foot { position: absolute; left: 23px; bottom: 28px; height: 93px; white-space: nowrap; }
.hzm .cert .shop { font-size: 26.824px; line-height: 1.45; letter-spacing: -0.67px; font-weight: 700; color: #fff; }
.hzm .cert .join { margin-top: 15px; height: 22.633px; line-height: 22.633px; }
.hzm .cert .join span { display: inline-block; vertical-align: middle; line-height: 1.45; }
.hzm .cert .join .lbl { font-size: 11.735px; color: rgba(255, 255, 255, 0.72); }
.hzm .cert .join .date { margin-left: 8px; font-size: 13.412px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }

/* 혜택 칩 (-13.93deg 회전) */
.hzm .benefit-chip {
    position: absolute; left: 196px; top: 333px; width: 240px; height: 98px;
    padding: 18px; background: #fff; border-radius: 16px; white-space: nowrap;
    -ms-transform: rotate(-13.93deg); transform: rotate(-13.93deg);
}
.hzm .benefit-chip .t1 { font-size: 14px; line-height: 21px; letter-spacing: -0.28px; font-weight: 500; color: #6366f1; }
.hzm .benefit-chip .t2 { margin-top: 4px; font-size: 20px; line-height: 30px; letter-spacing: -0.4px; font-weight: 700; color: #111; }

/* ==========================================================================
   02 · 멤버십 코드 확인 방법
   ========================================================================== */
.hzm .sec-code { padding: 72px 0; background: rgba(99, 102, 241, 0.04); }
.hzm .sec-code .title { font-size: 38px; line-height: 57px; letter-spacing: -0.76px; font-weight: 700; color: #111; text-align: center; }
.hzm .sec-code .desc { margin-top: 12px; font-size: 18px; line-height: 27px; letter-spacing: -0.36px; color: #5f6673; text-align: center; }
.hzm .sec-code .code-cards { width: 1272px; margin: 68px auto 0; }
.hzm .code-card { float: left; width: 616px; height: 544px; padding: 28px; background: #fff; border-radius: 20px; }
.hzm .code-card + .code-card { margin-left: 40px; }
.hzm .code-card .card-title { height: 74px; white-space: nowrap; }
.hzm .code-card .card-title .name { font-size: 24px; line-height: 1.5; font-weight: 700; color: #111; }
.hzm .code-card .card-title .desc { margin-top: 6px; font-size: 16px; line-height: 1.5; color: #5f6673; }
.hzm .code-card .screen { position: relative; margin-top: 20px; width: 560px; height: 356px; background: #f6f6fb; border-radius: 12px; overflow: hidden; }
.hzm .code-card .screen img { display: block; width: 560px; height: 356px; }
/* 화면 위 강조 박스 (이미지 밖 카드 레이어) */
.hzm .code-card .screen .mark { position: absolute; border: 4px solid #ffe600; }
.hzm .code-card .screen .mark-info { left: 90px; top: 81px; width: 32px; height: 32px; }

/* ==========================================================================
   03 · 제휴 혜택
   ========================================================================== */
.hzm .sec-partner { padding: 88px 0 100px; background: #fafaff; }
.hzm .cate-tabs { margin-top: 32px; text-align: center; font-size: 0; }
.hzm .cate-tabs a {
    display: inline-block; margin: 0 6px; padding: 12px 24px; border-radius: 40px;
    font-size: 16px; line-height: 27px; letter-spacing: -0.32px; font-weight: 700; white-space: nowrap;
    color: #5f6673; background: rgba(99, 102, 241, 0.04); cursor: pointer;
}
.hzm .cate-tabs a.on { color: #fff; background: #6366f1; }

.hzm .partner-list { width: 1300px; margin: 50px -20px 0 0; }
.hzm .partner-list:after { content: ''; display: block; clear: both; }
.hzm .partner-item { float: left; width: 305px; margin: 0 20px 24px 0; text-align: center; cursor: pointer; }
.hzm .partner-item.is-over { display: none; } /* 13번째부터는 전체 보기 클릭 시 노출 (JS) */
.hzm .partner-item:hover .benefit { box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12); }
/* 로고 이미지는 원형 배경·테두리가 포함된 일체형 (160x160, 2배 해상도) */
.hzm .partner-item .logo-circle { position: relative; z-index: 2; width: 80px; height: 80px; margin: 0 auto -40px; }
.hzm .partner-item .logo-circle .logo-src { display: block; width: 80px; height: 80px; }
.hzm .logo-img { display: block; position: relative; overflow: hidden; -ms-flex-negative: 0; flex-shrink: 0; }
.hzm .logo-img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hzm .partner-item .benefit { position: relative; z-index: 1; padding: 56px 28px; background: #fff; border-radius: 16px; }
.hzm .partner-item .name { font-size: 18px; line-height: 1.45; font-weight: 700; color: #111; }
.hzm .partner-item .headline { margin-top: 24px; font-size: 24px; line-height: 1.45; font-weight: 500; color: #6366f1; }
.hzm .partner-item .sub { margin-top: 12px; font-size: 16px; line-height: 21px; letter-spacing: -0.32px; color: #757575; }
/* 영역을 벗어나는 긴 텍스트는 말줄임(...) 처리 */
.hzm .partner-item .name,
.hzm .partner-item .headline,
.hzm .partner-item .sub { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 로고 크기·크롭 (Figma 원본 값) */
.hzm .logo-atium      { width: 62px; height: 14px; }
.hzm .logo-yeosin     { width: 81px; height: 12px; }
.hzm .logo-kmi        { width: 64px; height: 5px; }
.hzm .logo-kmi img        { left: -5.56% !important; top: -491.98% !important; width: 111.11% !important; height: 1082.89% !important; }
.hzm .logo-lessgetmore { width: 76px; height: 15px; }
.hzm .logo-ceragem    { width: 64px; height: 15.36px; }
.hzm .logo-ceragem img    { left: -10.71% !important; top: -206% !important; width: 121.9% !important; height: 512% !important; }
.hzm .logo-heatrun    { width: 64px; height: 11.52px; }
.hzm .logo-heatrun img    { left: -38.1% !important; top: -228.49% !important; width: 176.3% !important; height: 527.93% !important; }
.hzm .logo-tennis     { width: 64px; height: 6.4px; }
.hzm .logo-cheonggiwa { width: 64px; height: 26.24px; }
.hzm .logo-cheonggiwa img { left: -48.36% !important; top: -52.4% !important; width: 196.73% !important; height: 205.69% !important; }
.hzm .logo-sangrok     { width: 64px; height: 12.8px; }
.hzm .logo-sangrok img     { left: -2.04% !important; top: -20.34% !important; width: 105.78% !important; height: 144.07% !important; }
.hzm .logo-nordic     { width: 64px; height: 5.415px; }
.hzm .logo-nordic img     { left: -14.5% !important; top: -363.16% !important; width: 128.89% !important; height: 826.32% !important; }
.hzm .logo-sihyun     { width: 64px; height: 21.953px; }
.hzm .logo-ppolsal    { width: 64px; height: 11px; }
.hzm .logo-ppolsal img    { left: -0.42% !important; top: -46.89% !important; width: 100.7% !important; height: 204.8% !important; }

.hzm .partner-empty { display: none; padding: 60px 0; text-align: center; font-size: 16px; color: #5f6673; }
.hzm .partner-more { margin-top: 8px; text-align: center; }
.hzm .partner-more .count { font-size: 16px; line-height: 21px; letter-spacing: -0.32px; color: #5e6673; }
.hzm .partner-more .btn-more {
    display: inline-block; margin-top: 16px; padding: 16px 50px;
    background: #fff; border: 1px solid #c5c1ec; border-radius: 12px; white-space: nowrap;
}
.hzm .partner-more .btn-more span { display: inline-block; vertical-align: middle; font-size: 18px; line-height: 1.45; font-weight: 700; color: #6366f1; }
.hzm .partner-more .btn-more img { display: inline-block; vertical-align: middle; width: 24px; height: 24px; margin-left: 8px; }

/* ==========================================================================
   04 · Motion (8초 루프: 배경 타이포 + 플로팅 일러스트)
   ========================================================================== */
.hzm .sec-motion { position: relative; height: 720px; background: #6366f1; overflow: hidden; }
.hzm .sec-motion .marquee {
    position: absolute; left: 50%; top: 275px; margin-left: -1140px; width: 4300px;
    font-size: 140px; line-height: 1.35; font-weight: 700; color: #fff; white-space: pre;
    opacity: 0.12; filter: alpha(opacity=12);
    -webkit-animation: hzmMarquee 8s ease-in-out infinite; animation: hzmMarquee 8s ease-in-out infinite;
}
.hzm .sec-motion .m-eyebrow { position: absolute; left: 50%; top: 58px; width: 800px; margin-left: -400px; font-size: 17px; line-height: 1.35; font-weight: 700; color: #9dff00; text-align: center; }
.hzm .sec-motion .m-title { position: absolute; left: 50%; top: 116px; width: 1280px; margin-left: -640px; font-size: 44px; line-height: 1.35; font-weight: 700; color: #fff; text-align: center; }
.hzm .sec-motion .m-desc { position: absolute; left: 50%; top: 570px; width: 900px; margin-left: -450px; font-size: 22px; line-height: 1.35; font-weight: 700; color: #fff; text-align: center; }
.hzm .sec-motion .float-illust {
    position: absolute; left: 50%; top: 180px; width: 480px; height: 390px; margin-left: -240px;
    -webkit-animation: hzmFloat 8s infinite; animation: hzmFloat 8s infinite;
}
.hzm .sec-motion .float-illust img { width: 480px; height: 390px; }

/* 멤버십 배너 롤링 (1920 x 720, 화면 중앙 기준) */
/* 배너 : 화면 가로 폭을 채우고 높이는 원본 비율(1920x720 = 37.5%) 유지 */
.hzm .sec-banner { height: 0; padding-top: 37.5%; }
.hzm .sec-banner .banner-list { margin: 0; padding: 0; list-style: none; }
.hzm .sec-banner .banner-item { display: none; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; }
.hzm .sec-banner .banner-item.prev { display: block; z-index: 1; }
.hzm .sec-banner .banner-item.on { display: block; z-index: 2; }
.hzm .sec-banner .banner-item img { display: block; width: 100%; height: 100%; }
.hzm .sec-banner .banner-dots { position: absolute; left: 0; bottom: 32px; z-index: 3; width: 100%; text-align: center; font-size: 0; }
.hzm .sec-banner .banner-dots a { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 5px; background: #fff; opacity: 0.4; filter: alpha(opacity=40); }
.hzm .sec-banner .banner-dots a.on { width: 28px; opacity: 1; filter: alpha(opacity=100); }

@-webkit-keyframes hzmMarquee {
    0%   { -webkit-transform: translateX(0); }
    50%  { -webkit-transform: translateX(-180px); }
    100% { -webkit-transform: translateX(0); }
}
@keyframes hzmMarquee {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-180px); }
    100% { transform: translateX(0); }
}
@-webkit-keyframes hzmFloat {
    0%   { -webkit-transform: translateY(0) rotate(0deg); -webkit-animation-timing-function: ease-in-out; }
    25%  { -webkit-transform: translateY(-14px) rotate(-2.005deg); -webkit-animation-timing-function: ease-in-out; }
    50%  { -webkit-transform: translateY(0) rotate(0deg); -webkit-animation-timing-function: ease-in-out; }
    75%  { -webkit-transform: translateY(-14px) rotate(2.005deg); -webkit-animation-timing-function: ease-in-out; }
    100% { -webkit-transform: translateY(0) rotate(0deg); }
}
@keyframes hzmFloat {
    0%   { transform: translateY(0) rotate(0deg); animation-timing-function: ease-in-out; }
    25%  { transform: translateY(-14px) rotate(-2.005deg); animation-timing-function: ease-in-out; }
    50%  { transform: translateY(0) rotate(0deg); animation-timing-function: ease-in-out; }
    75%  { transform: translateY(-14px) rotate(2.005deg); animation-timing-function: ease-in-out; }
    100% { transform: translateY(0) rotate(0deg); }
}

/* ==========================================================================
   05 · 전문가 상담
   ========================================================================== */
.hzm .sec-support { padding: 96px 0; }
.hzm .support-cards { margin-top: 32px; padding: 36px 80px 56px; background: #fff; }
.hzm .support-cards:after { content: ''; display: block; clear: both; }
.hzm .support-card { display: block; position: relative; float: left; width: 360px; height: 365px; border: 1px solid #e7e8f0; border-radius: 24px; background: #fff; overflow: hidden; text-decoration: none; cursor: pointer; }
.hzm .support-card:hover { border-color: #c5c1ec; box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12); }
.hzm .support-card + .support-card { margin-left: 20px; }
.hzm .support-card .illust { position: absolute; }
.hzm .support-card.tax .illust   { left: 20px;  top: 159px; width: 430px; height: 233px; } /* Figma: 430x233 늘림(fill) */
.hzm .support-card.legal .illust { left: 94px;  top: 115px; width: 262px; height: 262px; }
.hzm .support-card.ops .illust   { left: 109px; top: 119px; width: 262px; height: 262px; }
.hzm .support-card .card-text { position: absolute; left: 36px; top: 46px; width: 267px; }
.hzm .support-card .name { font-size: 20px; line-height: 28px; letter-spacing: -0.2px; font-weight: 700; color: #111; }
.hzm .support-card .desc { margin-top: 8px; font-size: 13px; line-height: 20px; letter-spacing: -0.065px; color: #5f6673; }

/* 입장코드 확인하기 : 인증 시 같은 자리에 인증키 노출 */
.hzm .support-code-area { height: 52px; text-align: center; }
.hzm .btn-support-code {
    display: inline-block; width: 240px; height: 52px; border-radius: 14px; background: #6366f1;
    font-size: 16px; line-height: 52px; font-weight: 500; color: #fff; text-align: center;
}
.hzm .support-code-area.is-shown .btn-support-code { display: none; }
.hzm .support-code-area.is-shown .support-code { display: inline-block; }
.hzm .support-code {
    display: none; min-width: 240px; height: 52px; padding: 0 32px;
    border: 1px solid #c5c1ec; border-radius: 14px; background: rgba(99, 102, 241, 0.04);
    font-size: 16px; line-height: 50px; font-weight: 500; color: #5f6673; text-align: center;
}
.hzm .support-code strong { font-weight: 700; color: #6366f1; letter-spacing: 0.5px; }

/* ==========================================================================
   07 · 이용 대상
   ========================================================================== */
.hzm .sec-target { padding: 80px 0; background: #f7f7fc; text-align: center; }
.hzm .sec-target .eyebrow { font-size: 17px; line-height: 1.4; font-weight: 700; color: #6366f1; }
.hzm .sec-target .title { margin-top: 20px; font-size: 44px; line-height: 1.4; font-weight: 700; color: #6366f1; }
.hzm .sec-target .desc { margin-top: 20px; font-size: 19px; line-height: 1.4; color: #666; }
.hzm .sec-target .illust { display: block; width: 620px; height: 310px; margin: 20px auto 0; }
.hzm .btn-primary {
    display: inline-block; margin-top: 20px; padding: 16px 28px; border-radius: 10px; background: #6366f1;
    font-size: 18px; line-height: 27px; letter-spacing: -0.36px; font-weight: 700; color: #fff !important; white-space: pre;
}

/* ==========================================================================
   08 · 혜택 이용방법
   ========================================================================== */
.hzm .sec-howto { padding: 168px 0; }
.hzm .usage-cards { margin-top: 24px; }
.hzm .usage-cards:after { content: ''; display: block; clear: both; }
.hzm .usage-card { float: left; width: 410px; padding: 28px; border-radius: 18px; background: rgba(99, 102, 241, 0.04); }
.hzm .usage-card + .usage-card { margin-left: 24px; }
.hzm .usage-card .num { font-size: 28px; line-height: 42px; letter-spacing: -0.56px; font-weight: 700; color: #6366f1; }
.hzm .usage-card .name { margin-top: 14px; font-size: 22px; line-height: 33px; letter-spacing: -0.44px; font-weight: 700; color: #111; }
.hzm .usage-card .desc { margin-top: 14px; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; color: #5f6673; }

/* ==========================================================================
   CTA
   ========================================================================== */
.hzm .sec-cta { padding-bottom: 140px; }
.hzm .cta-box { padding: 50px 0; border-radius: 20px; background: #6366f1; text-align: center; }
.hzm .cta-box .title { font-size: 36px; line-height: 54px; letter-spacing: -0.72px; font-weight: 700; color: #fff; }
.hzm .cta-box .desc { margin-top: 10px; font-size: 18px; line-height: 27px; letter-spacing: -0.36px; color: #fff; }
.hzm .cta-box .btn-cta {
    display: inline-block; margin-top: 28px; height: 56px; padding: 0 32px;
    border: 1px solid #ddd; border-radius: 12px; background: #fff;
    box-shadow: 0 12px 10px rgba(99, 102, 241, 0.2);
    font-size: 18px; line-height: 54px; letter-spacing: -0.36px; font-weight: 700; color: #6366f1; white-space: pre;
}

/* ==========================================================================
   멤버십 인증키 modal
   ========================================================================== */
.hzm .auth-dim { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9000; background: #000; opacity: 0.5; filter: alpha(opacity=50); }
.hzm .auth-modal {
    display: none; position: fixed; left: 50%; top: 50%; z-index: 9001;
    width: 400px; height: 290px; margin: -145px 0 0 -200px; padding: 40px 32px 32px;
    background: #fff; border-radius: 20px; text-align: center;
    box-shadow: 0 12px 40px rgba(13, 13, 25, 0.24);
}
.hzm .auth-modal .btn-close { position: absolute; right: 16px; top: 12px; width: 32px; height: 32px; font-size: 28px; line-height: 32px; color: #9ca3af; text-align: center; }
.hzm .auth-modal .auth-eyebrow { font-size: 14px; line-height: 20px; font-weight: 700; color: #6366f1; letter-spacing: -0.28px; }
.hzm .auth-modal .auth-title { margin-top: 8px; font-size: 22px; line-height: 32px; font-weight: 700; color: #111; letter-spacing: -0.44px; }
.hzm .auth-modal .auth-desc { display: none; margin-top: 8px; font-size: 14px; line-height: 21px; color: #5f6673; letter-spacing: -0.28px; }
.hzm .auth-modal .auth-input {
    display: block; width: 100%; height: 52px; margin-top: 20px; padding: 0 16px;
    border: 1px solid #e7e8f0; border-radius: 12px; background: #fff;
    font-family: 'Noto Sans KR', sans-serif; font-size: 16px; color: #111; text-align: center; outline: 0;
}
.hzm .auth-modal .auth-input:focus { border-color: #6366f1; }
.hzm .auth-modal .auth-msg { height: 20px; margin-top: 6px; font-size: 13px; line-height: 20px; color: #e82e2e; }
.hzm .auth-modal .auth-msg.ok { color: #6366f1; }
.hzm .auth-modal .btn-auth {
    display: block; height: 52px; margin-top: 6px; border-radius: 12px; background: #6366f1;
    font-size: 16px; line-height: 52px; font-weight: 700; color: #fff;
}
.hzm .auth-modal .btn-auth.disabled { opacity: 0.6; filter: alpha(opacity=60); cursor: default; }

/* ==========================================================================
   제휴 혜택 상세 modal (Default.aspx → iframe)
   ========================================================================== */
.hzm .detail-modal {
    display: none; position: fixed; left: 50%; top: 50%; z-index: 9001;
    width: 680px; height: 640px; margin: -320px 0 0 -340px;
    background: #fff; border-radius: 24px; overflow: hidden;
    box-shadow: 0 20px 64px 0 rgba(10, 10, 31, 0.18);
    padding: 8px 4px 8px 8px;
}
.hzm .detail-modal iframe { display: block; width: 100%; height: 100%; border: 0; }
/* 닫기 버튼은 Detail.aspx 고정 헤더(.head-close)에 있음 */

/* ==========================================================================
   제휴 혜택 상세 페이지 (Detail.aspx) - 680 x 975 팝업
   ========================================================================== */
.hzm-detail-body { margin: 0; background: #fff; overflow-x: hidden; }
.hzm.hzm-detail { width: 100%; min-width: 0; overflow: visible; }

/* 브랜드 소개 / 고정 헤더 */
.hzm-detail .detail-head { position: fixed; left: 0; top: 0; z-index: 20; width: 100%; padding: 24px; background: #fff; }
.hzm-detail .head-brand { height: 72px; margin-right: 30px; overflow: hidden; }
.hzm-detail .detail-logo { float: left; width: 72px; height: 72px; }
.hzm-detail .detail-logo .logo-src { display: block; width: 72px; height: 72px; }
.hzm-detail .head-text { margin-left: 92px; padding-top: 5px; }
.hzm-detail .head-cate { font-size: 13px; line-height: 1.5; font-weight: 700; color: #6366f1; }
.hzm-detail .head-name { margin-top: 2px; font-size: 26px; line-height: 1.5; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hzm-detail .head-close { position: absolute; right: 32px; top: 32px; width: 14px; height: 14px; }
.hzm-detail .head-close img { position: absolute; left: 2.2px; top: 2.2px; width: 9.57px; height: 9.6px; }
.hzm-detail .head-desc { margin-top: 16px; font-size: 15px; line-height: 1.5; color: #5f6673; }

/* 혜택 상세 / 스크롤 영역 (하단 고정 버튼 106px 확보) */
.hzm-detail .detail-body { padding: 0 24px 130px; }

.hzm-detail .benefit-box { padding: 20px; border-radius: 16px; background: #eeeeff; }
.hzm-detail .benefit-box .box-eyebrow { font-size: 13px; line-height: 1.5; font-weight: 700; color: #6366f1; }
.hzm-detail .benefit-box .box-title { margin-top: 4px; font-size: 21px; line-height: 1.5; font-weight: 700; color: #111; }
.hzm-detail .benefit-box .box-sub { margin-top: 4px; font-size: 14px; line-height: 1.5; color: #5f6673; }

.hzm-detail .usage { margin-top: 24px; }
.hzm-detail .usage:first-child { margin-top: 0; }
.hzm-detail .usage-title { font-size: 17px; line-height: 1.5; font-weight: 700; color: #111; }
.hzm-detail .usage-list { margin: 0; padding: 0; list-style: none; }
.hzm-detail .usage-list li { position: relative; min-height: 26px; margin-top: 10px; padding: 2px 0 0 38px; }
.hzm-detail .step-num { position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 13px; background: #f6f6fb; font-size: 12px; line-height: 26px; font-weight: 700; color: #6366f1; text-align: center; }
.hzm-detail .step-text { font-size: 14px; line-height: 1.5; color: #111; }
.hzm-detail .step-point { margin-left: 10px; font-size: 13px; line-height: 1.5; font-weight: 700; color: #6366f1; white-space: nowrap; }

.hzm-detail .notice-box { margin-top: 24px; padding: 16px; border-radius: 12px; background: #f6f6fb; }
.hzm-detail .notice-box:first-child { margin-top: 0; }
.hzm-detail .notice-box .box-title { font-size: 14px; line-height: 1.5; font-weight: 700; color: #111; }
.hzm-detail .notice-box .box-desc { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #5f6673; }

.hzm-detail .contact { margin-top: 24px; padding: 24px 0 4px; border-top: 1px solid #e7e8f0; }
.hzm-detail .contact-row { height: 24px; line-height: 24px; white-space: nowrap; }
.hzm-detail .contact-icon { display: inline-block; vertical-align: middle; width: 20px; height: 20px; margin-top: -2px; }
.hzm-detail .contact-row + .contact-row { margin-top: 10px; }
.hzm-detail .contact-label { display: inline-block; vertical-align: middle; font-size: 14px; line-height: 21px; font-weight: 500; color: #5f6673; }
.hzm-detail .contact-tel { display: inline-block; vertical-align: middle; margin-left: 12px; font-size: 16px; line-height: 24px; font-weight: 700; color: #111; }
/* 사이트바로가기 : 긴 주소는 말줄임 */
.hzm-detail .contact-link { display: inline-block; vertical-align: middle; max-width: 75%; margin-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 21px; font-weight: 500; color: #464cff; text-decoration: none; }
.hzm-detail .contact-link:hover { text-decoration: underline; }

.hzm-detail .similar { margin-top: 40px; }
.hzm-detail .similar-title { font-size: 16px; line-height: 1.5; font-weight: 700; color: #111; }
.hzm-detail .similar-list { margin: 12px 0 0; padding: 0; list-style: none; }
.hzm-detail .similar-list:after { content: ''; display: block; clear: both; }
/* 최대 3개 한 줄 노출 (스크롤바 생겨도 줄바꿈 안 되도록 % 폭) */
.hzm-detail .similar-list li { float: left; width: 32%; margin-right: 2%; }
.hzm-detail .similar-list li:last-child { margin-right: 0; }
.hzm-detail .similar-list a { position: relative; display: block; height: 66px; padding: 12px; border: 1px solid #e7e8f0; border-radius: 14px; background: #fff; }
.hzm-detail .similar-logo { float: left; width: 40px; height: 40px; }
.hzm-detail .similar-logo .logo-src { display: block; width: 40px; height: 40px; }
.hzm-detail .similar-info { position: relative; display: block; margin-left: 50px; }
.hzm-detail .similar-name { display: block; margin-right: 22px; font-size: 14px; line-height: 20px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hzm-detail .similar-arrow { position: absolute; right: 0; top: 0; width: 20px; height: 20px; }
.hzm-detail .similar-headline { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; font-weight: 500; color: #6366f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 전용페이지 이동 / 고정 하단 */
.hzm-detail .detail-foot { position: fixed; left: 0; bottom: 0; z-index: 20; width: 100%; padding: 24px; border-top: 1px solid #e7e8f0; background: #fff; }
.hzm-detail .detail-cta { display: block; height: 56px; border-radius: 12px; background: #6366f1; font-size: 16px; line-height: 56px; font-weight: 700; color: #fff; text-align: center; }
.hzm-detail .detail-cta.disabled { opacity: 0.6; filter: alpha(opacity=60); cursor: default; }
/* 발행된 쿠폰번호 (복사할 수 있도록 텍스트 선택 허용) */
.hzm-detail .detail-cta.coupon-number { border: 1px solid #c5c1ec; background: #eeeeff; color: #6366f1; letter-spacing: 0.5px; line-height: 54px; cursor: text; }

/* 미인증 / 없는 제휴사 안내 */
.hzm-detail .detail-guide { padding: 120px 0; text-align: center; }
.hzm-detail .detail-guide .guide-title { font-size: 22px; line-height: 32px; font-weight: 700; color: #111; }
.hzm-detail .detail-guide .guide-desc { margin-top: 8px; font-size: 15px; line-height: 22px; color: #5f6673; }
.hzm-detail .detail-guide .guide-btn { display: inline-block; margin-top: 24px; padding: 0 28px; height: 48px; border-radius: 10px; background: #6366f1; font-size: 16px; line-height: 48px; font-weight: 700; color: #fff; }

/* ==========================================================================
   멤버십 인증서 (/hairzzangMembership/Certificate.aspx)
   - 단독 페이지 (Header3 / Footer 없음), 모바일 / 웹 반응형
   - .hzm(min-width 1280) 미사용
   ========================================================================== */
.hzm-cert-body { margin: 0; background: #fafafc; }
.hzm-cert, .hzm-cert * { box-sizing: border-box; }
.hzm-cert p { margin: 0; padding: 0; }
.hzm-cert, .hzm-cert p, .hzm-cert span, .hzm-cert a { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; color: #111; }
.hzm-cert img { border: 0; vertical-align: top; }
.hzm-cert a { text-decoration: none; }
.hzm-cert { position: relative; min-height: 100vh; padding: 217px 30px 60px; background: #fafafc; }

/* 닫기 */
.hzm-cert .cert-close { position: absolute; top: 48px; right: 24px; z-index: 2; display: block; width: 44px; height: 44px; padding: 10px; }
.hzm-cert .cert-close img { display: block; width: 24px; height: 24px; }

/* 인증서 카드 */
.hzm-cert .cert-card { position: relative; overflow: hidden; width: 100%; max-width: 400px; height: 464px; margin: 0 auto; padding: 30px 28px 34px; border: 2px solid #8486da; border-radius: 28px; background: #6366f1; box-shadow: 0 14px 30px -10px rgba(54, 56, 125, 0.16);
    display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: justify; justify-content: space-between; }
.hzm-cert .cert-watermark { position: absolute; top: 72px; right: -74px; width: 276px; height: 330px; }

.hzm-cert .cert-head { position: relative; }
.hzm-cert .cert-logo { position: relative; display: block; overflow: hidden; width: 72px; height: 14px; }
.hzm-cert .cert-logo img { position: absolute; top: -11.4px; left: -5.8px; width: 83.6px; height: 35.6px; max-width: none; }
.hzm-cert .cert-title { margin-top: 12px; font-size: 24px; line-height: 1; font-weight: 700; color: #fff; }

.hzm-cert .cert-info { position: relative; }
.hzm-cert .cert-store { font-size: 32px; line-height: 1.45; letter-spacing: -0.8px; font-weight: 700; color: #fff; word-break: keep-all; word-wrap: break-word; }
.hzm-cert .cert-date { margin-top: 18px; height: 27px; line-height: 27px; white-space: nowrap; }
.hzm-cert .cert-date .date-label { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.hzm-cert .cert-date .date-value { margin-left: 10px; font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.95); }

/* 미인증 / 매장 정보 없음 안내 */
.hzm-cert .cert-guide { max-width: 400px; margin: 0 auto; text-align: center; }
.hzm-cert .cert-guide .guide-title { font-size: 20px; line-height: 30px; font-weight: 700; color: #111; word-break: keep-all; }
.hzm-cert .cert-guide .guide-desc { margin-top: 8px; font-size: 15px; line-height: 22px; color: #5f6673; word-break: keep-all; }
.hzm-cert .cert-guide .guide-btn { display: inline-block; margin-top: 24px; padding: 0 28px; height: 48px; border-radius: 10px; background: #6366f1; font-size: 16px; line-height: 48px; font-weight: 700; color: #fff; }

/* 작은 화면 (높이 낮은 모바일) */
@media screen and (max-height: 760px) {
    .hzm-cert { padding-top: 120px; }
}
@media screen and (max-width: 359px) {
    .hzm-cert { padding-left: 20px; padding-right: 20px; }
    .hzm-cert .cert-card { padding: 26px 22px 30px; }
    .hzm-cert .cert-store { font-size: 28px; }
}

/* 웹 */
@media screen and (min-width: 768px) {
    .hzm-cert { padding-top: 140px; }
    .hzm-cert .cert-close { top: 40px; right: 40px; }
}