@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   향기백신 — 회원(인증) 페이지 공통 디자인
   로그인 / 회원가입 약관 / 가입폼 / 가입완료 / 정보찾기 /
   비밀번호 확인 / 프로필 — 쇼핑몰 본문(hc-shop-*)과 동일한 톤
   ══════════════════════════════════════════════════════════════ */

:root {
    --hca-ink: #111111;
    --hca-sub: #666666;
    --hca-dim: #999999;
    --hca-line: #e6e6e6;
    --hca-soft: #f6f6f6;
    --hca-panel-radius: 30px;
}

/* ── 페이지 베이스 ───────────────────────────────────────────── */
.hc-auth-page {
    background: #fbfbfa;
    font-family: 'Noto Sans KR', 'Nanum Gothic', sans-serif;
    color: var(--hca-ink);
    word-break: keep-all;
}

.hc-auth-page *,
.hc-auth-page *::before,
.hc-auth-page *::after { box-sizing: border-box; }

.hc-auth-page a { text-decoration: none; }
.hc-auth-page a:hover,
.hc-auth-page a:focus { text-decoration: none; }

/* 레거시 테마 폭 제한(#container 875px) 무력화 */
.hc-auth-page,
body #container.hc-auth-container {
    width: auto;
    max-width: none;
    float: none;
    margin: 0;
}

/* ── 히어로(쇼핑몰 서브 히어로와 동일 톤) ────────────────────── */
.hc-auth-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 0 32px;
    background: linear-gradient(180deg, #edf4e8 0%, #f5efe4 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.hc-auth-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.26;
    filter: saturate(0.82) brightness(1.2);
    transform: scale(1.02);
}

.hc-auth-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.58) 100%),
        radial-gradient(circle at top right, rgba(100, 100, 100, 0.18), transparent 34%);
}

.hc-auth-hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.hc-auth-hero__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #7b7b7b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.hc-auth-hero__title {
    margin: 0;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #183021;
    line-height: 1.25;
}

.hc-auth-hero__sub {
    margin: 12px auto 0;
    max-width: 640px;
    font-size: 14px;
    line-height: 1.8;
    color: #555;
}

/* ── 가입 단계 표시 ──────────────────────────────────────────── */
.hc-auth-steps {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.hc-auth-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 12.5px;
    font-weight: 600;
    color: #8a8a8a;
    white-space: nowrap;
}

.hc-auth-step__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #dcdcdc;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.hc-auth-step.is-active {
    background: var(--hca-ink);
    border-color: var(--hca-ink);
    color: #fff;
}

.hc-auth-step.is-active .hc-auth-step__no {
    background: #fff;
    color: var(--hca-ink);
}

.hc-auth-step.is-done { color: #4a4a4a; }
.hc-auth-step.is-done .hc-auth-step__no { background: #8f8f8f; }

.hc-auth-steps__sep {
    color: rgba(0, 0, 0, 0.2);
    font-size: 12px;
}

/* ── 본문 셸 ─────────────────────────────────────────────────── */
.hc-auth-shell { padding: 34px 0 78px; }

.hc-auth-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.hc-auth-inner--narrow { max-width: 560px; }
.hc-auth-inner--mid    { max-width: 860px; }

/* ── 카드(패널) ──────────────────────────────────────────────── */
.hc-auth-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--hca-panel-radius);
    box-shadow: 0 30px 80px rgba(42, 57, 33, 0.08);
    padding: 38px 36px 40px;
}

.hc-auth-card + .hc-auth-card { margin-top: 20px; }

.hc-auth-card__head {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--hca-line);
}

.hc-auth-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--hca-ink);
}

.hc-auth-card__desc {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--hca-sub);
}

/* 2단 그리드(로그인 | 안내) */
.hc-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}

/* ── 폼 요소 ─────────────────────────────────────────────────── */
.hc-auth-field { margin-bottom: 16px; }

.hc-auth-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12.5px;
    font-weight: 700;
    color: #333;
    letter-spacing: -0.01em;
}

.hc-auth-label .req { color: #c0392b; margin-left: 3px; }

.hc-auth-page input[type="text"].hc-input,
.hc-auth-page input[type="password"].hc-input,
.hc-auth-page input[type="email"].hc-input,
.hc-auth-page input[type="tel"].hc-input,
.hc-auth-page select.hc-input,
.hc-auth-page textarea.hc-input {
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    background: #fff;
    color: var(--hca-ink);
    font-size: 14.5px;
    font-family: inherit;
    line-height: 48px;
    transition: border-color .16s, box-shadow .16s;
    -webkit-appearance: none;
    appearance: none;
}

.hc-auth-page textarea.hc-input {
    height: auto;
    min-height: 110px;
    padding: 14px 16px;
    line-height: 1.7;
    resize: vertical;
}

.hc-auth-page .hc-input::placeholder { color: #b5b5b5; }

/* 레거시 default.css 의 필수입력 표시 이미지(require.png) 제거 — 라벨의 * 로 대체 */
.hc-auth-page .hc-input.required,
.hc-auth-page textarea.required { background-image: none !important; }

.hc-auth-page .hc-input:focus {
    outline: 0;
    border-color: var(--hca-ink);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.hc-auth-page .hc-input[readonly] {
    background: #f4f4f4;
    color: #777;
}

/* 2분할 입력 */
.hc-auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hc-auth-row--zip {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

/* 입력 하단 안내 / 검증 메시지 */
.hc-auth-help {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.65;
    color: var(--hca-dim);
}

.hc-auth-field .msg_ok,
.hc-auth-field .msg_error {
    display: inline-block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
}
.hc-auth-field .msg_ok { color: #2d7a46; }
.hc-auth-field .msg_error { color: #c0392b; }

/* 체크박스 */
.hc-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #444;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
}

.hc-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #111;
    cursor: pointer;
}

.hc-check--lg { font-size: 15px; font-weight: 700; color: var(--hca-ink); }
.hc-check--lg input[type="checkbox"] { width: 20px; height: 20px; }

/* ── 버튼 ───────────────────────────────────────────────────── */
.hc-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--hca-ink);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all .18s ease;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

.hc-auth-btn:hover,
.hc-auth-btn:focus { background: #333; color: #fff; }

.hc-auth-btn--block { display: flex; width: 100%; }

.hc-auth-btn--ghost {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.18);
    color: var(--hca-ink);
}
.hc-auth-btn--ghost:hover,
.hc-auth-btn--ghost:focus { background: rgba(0, 0, 0, 0.05); color: var(--hca-ink); }

.hc-auth-btn--sm { min-height: 44px; padding: 0 18px; font-size: 13px; }

.hc-auth-btn[disabled] { opacity: .55; cursor: default; }

.hc-auth-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ── 보조 링크 줄 ───────────────────────────────────────────── */
.hc-auth-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
    font-size: 13px;
    color: #777;
}

.hc-auth-links a { color: #666; }
.hc-auth-links a:hover { color: var(--hca-ink); text-decoration: underline; }
.hc-auth-links .sep { color: #dcdcdc; }

/* ── 혜택/안내 리스트(로그인 우측) ──────────────────────────── */
.hc-auth-benefits {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 14px;
}

.hc-auth-benefits li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.hc-auth-benefits li:last-child { border-bottom: 0; padding-bottom: 0; }

.hc-auth-benefits .ico {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hca-soft);
    color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.hc-auth-benefits strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--hca-ink);
    margin-bottom: 3px;
}

.hc-auth-benefits span {
    display: block;
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--hca-sub);
}

/* ── 안내 박스 ──────────────────────────────────────────────── */
.hc-auth-note {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--hca-soft);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--hca-sub);
}

.hc-auth-note strong { color: var(--hca-ink); }

/* ── 약관 박스 ──────────────────────────────────────────────── */
.hc-terms { margin-top: 10px; }

.hc-terms__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.hc-terms__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--hca-ink);
}

.hc-terms__title .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hca-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.hc-terms__box {
    border: 1px solid var(--hca-line);
    border-radius: 14px;
    background: #fcfcfc;
    padding: 18px 20px;
    max-height: 210px;
    overflow-y: auto;
    font-size: 12.5px;
    line-height: 1.85;
    color: #5a5a5a;
    white-space: pre-line;
}

.hc-auth-page .hc-terms__box textarea {
    width: 100%;
    border: 0;
    background: transparent;
    resize: none;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.85;
    color: #5a5a5a;
    min-height: 180px;
    outline: 0;
}

/* 전체동의 */
.hc-agree-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid var(--hca-ink);
    border-radius: 14px;
    background: #fafafa;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.hc-agree-all__txt {
    font-size: 12px;
    color: var(--hca-dim);
    line-height: 1.6;
}

/* 개인정보 수집 테이블 */
.hc-auth-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 12.5px;
    border-top: 2px solid var(--hca-ink);
}

.hc-auth-table caption {
    caption-side: top;
    text-align: left;
    padding: 0 0 8px;
    font-size: 12px;
    color: var(--hca-dim);
}

.hc-auth-table th,
.hc-auth-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--hca-line);
    text-align: left;
    line-height: 1.65;
    vertical-align: middle;
}

.hc-auth-table th {
    background: var(--hca-soft);
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

.hc-auth-table td { color: var(--hca-sub); }

/* 2단 그리드(로그인 옆 비회원 구매) 안에서는 폭이 좁으므로 더 조밀하게 */
.hc-auth-grid .hc-auth-table { font-size: 11.5px; }
.hc-auth-grid .hc-auth-table th,
.hc-auth-grid .hc-auth-table td { padding: 9px 8px; line-height: 1.55; }

/* ── 폼 섹션(회원가입 입력) ─────────────────────────────────── */
.hc-form-section + .hc-form-section {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--hca-line);
}

.hc-form-section__title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--hca-ink);
    letter-spacing: -0.02em;
}

.hc-form-section__title small {
    font-size: 12px;
    font-weight: 500;
    color: var(--hca-dim);
    letter-spacing: 0;
}

.hc-form-check-list {
    display: grid;
    gap: 13px;
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--hca-soft);
}

/* 인증 완료 배지 */
.hc-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #eef5ef;
    color: #2d7a46;
    font-size: 12px;
    font-weight: 700;
}

/* 파일 입력 */
.hc-auth-page .hc-auth-field input[type="file"] {
    width: 100%;
    padding: 13px 14px;
    border: 1px dashed #d4d4d4;
    border-radius: 10px;
    background: #fcfcfc;
    font-size: 13px;
    color: #666;
}

.hc-auth-thumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.hc-auth-thumb img {
    max-width: 90px;
    border-radius: 8px;
    border: 1px solid var(--hca-line);
}

/* 캡차 */
.hc-auth-captcha {
    padding: 16px 18px;
    border-radius: 14px;
    background: var(--hca-soft);
}

.hc-auth-captcha #captcha,
.hc-auth-captcha .captcha_box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hc-auth-page #captcha img {
    vertical-align: middle;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
}

.hc-auth-page #captcha input#captcha_key {
    width: 120px;
    height: 42px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    background-image: none !important;
}

.hc-auth-page #captcha input#captcha_key:focus {
    outline: 0;
    border-color: var(--hca-ink);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}

.hc-auth-page #captcha_info {
    display: block;
    width: 100%;
    margin-top: 8px;
    font-size: 12px;
    color: var(--hca-dim);
}

/* ── 소셜 로그인 ────────────────────────────────────────────── */
.hc-auth-social {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--hca-line);
}

.hc-auth-social__label {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hca-dim);
    margin-bottom: 14px;
}

.hc-auth-social:empty { display: none; }

/* ── 결과(가입완료) 패널 ────────────────────────────────────── */
.hc-auth-result { text-align: center; }

.hc-auth-result__icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--hca-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.hc-auth-result__title {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.hc-auth-result__lead {
    margin: 0 auto;
    max-width: 520px;
    font-size: 14px;
    line-height: 1.8;
    color: var(--hca-sub);
}

.hc-auth-result__data {
    display: grid;
    gap: 10px;
    max-width: 440px;
    margin: 24px auto 0;
    padding: 20px 22px;
    border-radius: 14px;
    background: var(--hca-soft);
    text-align: left;
}

.hc-auth-result__data div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 13px;
}

.hc-auth-result__data span { color: var(--hca-dim); }
.hc-auth-result__data strong { color: var(--hca-ink); }

/* ── 팝업(프로필 / 정보찾기 보조) ───────────────────────────── */
.hc-auth-popup {
    max-width: 560px;
    margin: 30px auto;
    padding: 0 16px;
}

.hc-auth-profile-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.hc-auth-profile-head img,
.hc-auth-profile-head .no_profile {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--hca-line);
}

.hc-auth-profile-head strong {
    font-size: 1.05rem;
    font-weight: 800;
}

.hc-auth-dl {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0;
    border-top: 2px solid var(--hca-ink);
    font-size: 13px;
}

.hc-auth-dl dt,
.hc-auth-dl dd {
    margin: 0;
    padding: 13px 14px;
    border-bottom: 1px solid var(--hca-line);
}

.hc-auth-dl dt {
    background: var(--hca-soft);
    font-weight: 700;
    color: #333;
}

.hc-auth-dl dd { color: var(--hca-sub); }

/* ── 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .hc-auth-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .hc-auth-hero { padding: 28px 0 24px; }
    .hc-auth-hero__title { font-size: 1.5rem; }
    .hc-auth-hero__sub { font-size: 13px; }

    .hc-auth-steps { gap: 6px; margin-top: 18px; }
    .hc-auth-step { padding: 6px 12px 6px 8px; font-size: 11.5px; }
    .hc-auth-step__no { width: 19px; height: 19px; font-size: 10px; }
    .hc-auth-steps__sep { display: none; }

    .hc-auth-shell { padding: 20px 0 54px; }
    .hc-auth-inner { padding: 0 14px; }

    .hc-auth-card {
        padding: 26px 20px 30px;
        border-radius: 22px;
        box-shadow: 0 16px 40px rgba(42, 57, 33, 0.08);
    }

    .hc-auth-row { grid-template-columns: 1fr; }
    .hc-auth-row--zip { grid-template-columns: minmax(0, 1fr) auto; }

    .hc-auth-btns { flex-direction: column-reverse; }
    .hc-auth-btns .hc-auth-btn { width: 100%; }

    .hc-agree-all { flex-direction: column; align-items: flex-start; gap: 8px; }

    .hc-auth-table th,
    .hc-auth-table td { padding: 10px 8px; font-size: 12px; }

    .hc-auth-dl { grid-template-columns: 92px 1fr; font-size: 12.5px; }

    .hc-auth-result__title { font-size: 1.25rem; }
    .hc-auth-result__icon { width: 64px; height: 64px; font-size: 26px; }
}