/* =========================================================
   nownsurvey Auth Pages – Handoff CSS
   Edukon design tokens · nownsurvey BI
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');

/* ----- Reset & base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Barlow', sans-serif; font-size: 16px; color: #101115; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0;}
input, select { font-family: inherit; }
ul, ol { list-style: none; padding-left: 0;  margin: 0; }
fieldset {
    border: 0;
    min-width: 0;
  }

:root {
    /* color */
    --color-bg: #ffffff;
    --color-text: #222222;
    --color-text-sub: #666666;
    --color-text-desc: #767676;
    --color-placeholder: #b3b3b3;
   
    --color-border: #d0d5dd;
    --color-border-dashed: #cfd4dc;
   
    --color-primary: #ed5c23;
    --color-primary-light: #f3a07e;
    --color-primary-dark: #d94f18;
   
    --color-error: #ff3b30;
   
    --color-gray-bg: #eeeeee;
    --color-gray-text: #999999;
    --color-gray-text-dark: #767676;
   
    --color-radio-border: #cfcfcf;
   
    /* layout */
    --form-max-width: 460px;
    --radius: 4px;
    --radius-round: 999px;
}

/* =========================================================
   SHARED AUTH SECTION (login & signup)
   ========================================================= */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff url('../assets/images/shape-img/02.png') no-repeat center center;
    background-size: cover;
}

/* ------ Simple top header shell ------ */
.auth-header {
    height: 68px;
    display: flex;
	justify-content: center;/*2026-08-08 by nccho 가로 중앙정렬*/
    align-items: center;
    padding: 0 32px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #ecf0f3;
    position: sticky;
    top: 0;
    z-index: 100;
}
.auth-header .logo img { height: 36px; width: auto; }

/* ------ Centered card wrapper ------ */
.auth-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.auth-card {
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 16px;
    padding: 44px 40px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.09);
}

@media (max-width: 480px) {
    .auth-card { padding: 32px 20px; }
}

/* ------ Card header ------ */
.auth-card-header { text-align: center; margin-bottom: 24px; }
.auth-card-title { font-size: 1.65rem; font-weight: 700; color: #101115; margin-bottom: 8px; }
.auth-card-sub { font-size: 0.9rem; color: #555555; }
.auth-card-sub a { color: #f16126; font-weight: 600; }
.auth-card-sub a:hover { text-decoration: underline; }

/* ------ Unified info box ------ */
.unified-info {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    background: #f5f9ff;
    border: 1.5px solid #dce8ff;
    border-radius: 8px;
    padding: 14px 16px;
    text-align: left;
}
.unified-info.top { margin-bottom: 20px; }
.unified-info.bottom { margin-top: 20px; }
.unified-info .info-icon { color: #4a90e2;flex-shrink: 0; margin-top: 2px; }
.unified-info-title { font-size: 0.85rem; font-weight: 700; color: #101115; margin-bottom: 4px; }
.unified-info-desc { font-size: 0.82rem; color: #555555; line-height: 1.6; }
.unified-info-desc strong { color: #101115; font-weight: 600; }
.unified-info .info-icon img{
    filter: invert(53%) sepia(88%) saturate(1632%) hue-rotate(188deg) brightness(96%) contrast(90%);
    width: 90%;
}

/* ------ Circle social buttons ------ */
.social-circles {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.circle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    flex-shrink: 0;
}
.circle-btn:hover { transform: translateY(-3px); }

.circle-google  { background: #fff; border: 1.5px solid #dadce0; }
.circle-google:hover  { background: #f8f9fa; box-shadow: 0 6px 16px rgba(66,133,244,0.22); }

.circle-kakao   { background: #FEE500; }
.circle-kakao:hover   { background: #e6ce00; box-shadow: 0 6px 16px rgba(254,229,0,0.5); }
.circle-kakao span { font-size: 9px; font-weight: 900; color: #191919; letter-spacing: -0.5px; }

.circle-naver   { background: #03C75A; }
.circle-naver:hover   { background: #02a84c; box-shadow: 0 6px 16px rgba(3,199,90,0.4); }
.circle-naver span  { font-size: 16px; font-weight: 900; color: #fff; }

.circle-facebook { background: #1877F2; }
.circle-facebook:hover { background: #1260cc; box-shadow: 0 6px 16px rgba(24,119,242,0.4); }

.circle-apple   { background: #000; color: #fff; }
.circle-apple:hover   { background: #222; box-shadow: 0 6px 16px rgba(0,0,0,0.32); }

/* ------ Divider ------ */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 0.82rem;
    color: #555555;
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ecf0f3;
}

/* ------ Form fields ------ */
.form-group { margin-bottom: 14px; }
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #101115;
    margin-bottom: 6px;
}
.form-group input,
.form-group select {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid #ecf0f3;
    border-radius: 8px;
    font-size: 0.92rem;
    color: #101115;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.form-group input::placeholder { color: #a0a6bc; }
.form-group input:focus,
.form-group select:focus {
    border-color: #f16126;
    box-shadow: 0 0 0 3px rgba(241,97,38,0.12);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

/* Password field */
.input-password { position: relative; }
.input-password input { padding-right: 44px; }
.pw-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #a0a6bc;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    padding: 4px;
}
.pw-toggle:hover { color: #f16126; }

/* Form options row */
.form-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #555555;
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #f16126;
    flex-shrink: 0;
}
.forgot-link { font-size: 0.83rem; color: #f16126; }
.forgot-link:hover { text-decoration: underline; }

/* ------ Primary submit button (Edukon lab-btn token) ------ */
.btn-primary {
    display: block;
    width: 100%;
    height: 50px;
    background: #f16126;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    margin-top: 18px;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
    line-height: 50px;
    padding: 0;
}
.btn-primary:hover {
    background: #c94f1e;
    box-shadow: 0 6px 18px rgba(241,97,38,0.38);
    transform: translateY(-2px);
}
.btn-primary:active { transform: translateY(0); }

/* ------ Terms line ------ */
.terms {
    font-size: 0.78rem;
    color: #a0a6bc;
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}
.terms a { color: #555555; text-decoration: underline; }
.terms a:hover { color: #f16126; }

/* ------ Agreements block (signup) ------ */
.agreements {
    border: 1.5px solid #ecf0f3;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 4px;
}
.agree-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #101115;
    font-size: 0.88rem;
    cursor: pointer;
    padding-bottom: 10px;
    border-bottom: 1px solid #ecf0f3;
    margin-bottom: 10px;
}
.agree-all input[type="checkbox"] { width: 16px; height: 16px; accent-color: #f16126; }
.agree-items { display: flex; flex-direction: column; gap: 8px; }
.agree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #555555;
    cursor: pointer;
}
.agree-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #f16126; flex-shrink: 0; }
.agree-item a { margin-left: auto; font-size: 0.78rem; color: #555555; text-decoration: underline; }
.agree-item a:hover { color: #f16126; }

/* =========================================================
   ONBOARDING PAGE
   ========================================================= */
.ob-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff url('../assets/images/shape-img/02.png') no-repeat center center;
    background-size: cover;
}

.ob-topbar {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 40px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #ecf0f3;
}
.ob-topbar img { height: 32px; width: auto; }

.ob-body {
    flex: 1;
    display: flex;
    align-items: stretch;
}

/* Left panel */
.ob-left {
    width: 38%;
    padding: 60px 50px 60px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #ecf0f3;
}
@media (max-width: 768px) { .ob-left { display: none; } }

.ob-left-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #101115;
    line-height: 1.45;
    margin-bottom: 14px;
    white-space: pre-line;
}
.ob-left-desc {
    font-size: 0.95rem;
    color: #555555;
    line-height: 1.7;
    white-space: pre-line;
}

/* Right panel */
.ob-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}
@media (max-width: 480px) { .ob-right { padding: 32px 20px; } }

.ob-form {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
}

.ob-field2 label {
  display: block;
  font-size: 0.88rem;
  font-weight: 400;
  color: #101115;
  margin-bottom: 8px;
  cursor: pointer;
}

.ob-field2-label {
  font-weight: 600 !important;
  cursor: default !important;
}

.ob-field2 input {
    cursor: pointer !important;
}

.ob-field, .ob-field2 { margin-bottom: 22px; }
.ob-field label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #101115;
    margin-bottom: 8px;
}
.ob-field input,
.ob-field select {
    width: 100%;
    height: 46px;
    padding: 0 40px 0 14px;
    border: 1.5px solid #ecf0f3;
    border-radius: 8px;
    font-size: 0.92rem;
    color: #101115;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.ob-field input { padding-right: 14px; }
.ob-field input::placeholder { color: #a0a6bc; }
.ob-field input:focus,
.ob-field select:focus {
    border-color: #f16126;
    box-shadow: 0 0 0 3px rgba(241,97,38,0.1);
}

.ob-select-wrap { position: relative; }
.ob-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #a0a6bc;
    pointer-events: none;
    font-size: 1rem;
}

/* Char count */
.ob-char-count {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #a0a6bc;
    margin-top: 4px;
}

/* Submit button (Edukon token) */
.ob-submit {
    width: 100%;
    height: 50px;
    background: #f16126;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.ob-submit:hover {
    background: #c94f1e;
    box-shadow: 0 6px 18px rgba(241,97,38,0.38);
    transform: translateY(-2px);
}
.ob-submit:disabled { background: #ecf0f3; color: #a0a6bc; cursor: not-allowed; transform: none; box-shadow: none; }

.ob-skip {
    background: none;
    border: none;
    color: #a0a6bc;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: underline;
    text-align: center;
    margin-top: 14px;
    width: 100%;
}
.ob-skip:hover { color: #555555; }

/* =========================================================
   ACCOUNT — same auth card shell helpers
   ========================================================= */
.find-tabs {
    display: flex;
    border-bottom: 2px solid #ecf0f3;
    margin-bottom: 22px;
}
.find-tab {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: #a0a6bc;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.find-tab.active,
.find-tab:hover {
    color: #f16126;
    border-bottom-color: #f16126;
}
.phone-row {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
}
.phone-row span { color: #a0a6bc; text-align: center; }
.field-ok { font-size: 0.8rem; color: #26c976; margin-top: 6px; }
.field-hint { font-size: 0.8rem; color: #f53b57; margin-top: 6px; line-height: 1.5; }
.form-group input[readonly] { background: #fafafa; color: #555; }
.sns-list { display: flex; flex-direction: column; gap: 12px; }
.sns-row { display: flex; align-items: center; gap: 12px; }
.sns-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sns-name { font-size: 0.92rem; font-weight: 700; color: #101115; }
.sns-account { font-size: 0.8rem; color: #555; }
.sns-tag { font-size: 0.78rem; font-weight: 700; color: #f16126; white-space: nowrap; }
.sns-btn {
    width: auto !important;
    min-width: 96px;
    height: 36px !important;
    margin-top: 0 !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    line-height: 36px;
}
.btn-outline {
    display: block;
    width: 100%;
    height: 50px;
    margin-top: 10px;
    border: 1.5px solid #ecf0f3;
    border-radius: 4px;
    background: #fff;
    color: #555;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    text-decoration: none;
}
.btn-outline:hover { border-color: #f16126; color: #f16126; }
.circle-letter { font-size: 16px; font-weight: 900; color: #fff; }

/* 아이디/비번 찾기 */
.auth-form {
    width: 100%;
    max-width: var(--form-max-width);
  }
   
  .auth-form__title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
   
  .auth-form__desc {
    margin-top: 12px;
    font-size: 14px;
    color: var(--color-text-desc);
    line-height: 1.6;
  }
   
  .field {
    margin-top: 32px;
  }
   
  .field__label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }
   
  .field__row {
    display: flex;
    align-items: stretch;
    gap: 8px;
  }
   
  .field__control {
    position: relative;
    flex: 1;
  }
   
  .field__input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-size: 15px;
    background: var(--color-bg);
  }
   
  .field__input--has-toggle {
    padding-right: 44px;
  }
   
  .field__input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
   
  .field__input--dashed {
    border-style: dashed;
  }
   
  .field__input--dashed:focus {
    border-style: solid;
  }
   
  .field__input.is-error {
    border-color: var(--color-primary);
  }
   
  .field__toggle {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-text);
    background: transparent;
  }
   
  .field__toggle svg {
    width: 20px;
    height: 20px;
  }
   
  .field__message {
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-gray-text-dark);
  }
   
  .field__message::before {
    content: "\2713";
    font-weight: 700;
    margin-right: 3px;
  }
   
  .field__message.is-success {
    color: var(--color-primary);
  }
   
  .field__message.is-error {
    color: var(--color-error);
  }

  label.error {
    color: var(--color-error);
    font-weight: 400;
  }
   
  .field__message.is-error::before {
    content: "\2716";
    display: inline-block;
    margin-right: 4px;
    color: #fff;
    background: var(--color-error);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    font-size: 8px;
    vertical-align: middle;
  }
   
  .field__hint {
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-gray-text-dark);
  }
   
  .field__link {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    color: var(--color-text);
    text-decoration: underline;
  }
   
  /* ---------- Password rule checklist ---------- */
  .rule-list {
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-gray-text-dark);
  }
   
  .rule-list__item {
    display: inline;
  }
   
  .rule-list__item::before {
    content: "\2713";
    margin-right: 3px;
    font-weight: 700;
  }
   
  .rule-list__item:not(:last-child)::after {
    content: ", ";
  }
   
  .rule-list__item.is-valid {
    color: var(--color-primary);
  }
   
  .rule-list__item.is-invalid {
    color: var(--color-error);
  }
   
  .rule-list__item.is-invalid::before {
    content: "\2716";
    display: inline-block;
    margin-right: 4px;
    color: #fff;
    background: var(--color-error);
    border-radius: 50%;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    font-size: 8px;
    vertical-align: middle;
  }

.field__row > .field__control {
    flex: 8 1 0; 
    min-width: 0; 
  }
  
  .field__row > button {
    flex: 2 1 0; 
  }
   
  /* ---------- Buttons ---------- */
  .btn {
    height: 52px;
    padding: 0 10px;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
 
  .btn:disabled {
    cursor: not-allowed;
  }
   
  .btn--outline {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    min-width: 90px;
  }
   
  .btn--gray {
    background: var(--color-gray-bg);
    color: var(--color-gray-text-dark);
    min-width: 90px;
  }
   
  .btn--primary {
    background: var(--color-primary-light);
    color: #ffffff;
  }
   
  .btn--primary.is-active,
  .btn--primary.is-static {
    background: var(--color-primary);
  }
   
  /* ---------- Action row (이전 / 다음 등) ---------- */
  .auth-form__actions {
    display: flex;
    gap: 8px;
    margin-top: 40px;
  }
   
  .auth-form__actions .btn {
    flex: 1;
  }
   
  /* ---------- Radio list (아이디 찾기 결과) ---------- */
  .id-list {
    margin-top: 24px;
  }
   
  .id-list__item + .id-list__item {
    margin-top: 20px;
  }
   
  .id-list__label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    cursor: pointer;
  }
   
  .id-list__label input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-radio-border);
    border-radius: 50%;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
  }
   
  .id-list__label input[type="radio"]:checked {
    border-color: var(--color-primary);
  }
   
  .id-list__label input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-primary);
  }
   
  /* ---------- Step visibility (find-id 2단계 위저드) ---------- */
  .step[hidden] {
    display: none;
  }

/* Footer */
#footer {width:100%;height:108px;background:#f2f2f2;margin-top:80px;*zoom:1;}
#footer .section {width:100%;margin:0 auto;padding-top:30px; display: flex; flex-direction: column; align-items: center; gap: 8px;}
#footer .section .bt_menu li a {font-size: 14px;}
#footer:after {content:" ";display:block;clear:both;}
#footer .copy {float:left; font-size:14px;}
#footer .bt_menu li {float:left;padding:0 0 0 6px;color:#999999;}
#footer  .bt_menu  li a:hover{color: #333; }

/* ---------- 회원 탈퇴 안내/설문 (account-withdraw.html) ---------- */
#withdraw-step2 { text-align: left; }
.withdraw-terms-text.chk-point{margin-bottom: 20px; }
.withdraw-terms { margin-bottom: 18px; }
.withdraw-terms > li + li { margin-top: 20px; }
.withdraw-terms-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #101115;
    margin-bottom: 8px;
}
.withdraw-terms-text {
    font-size: 0.85rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 6px;
}
.withdraw-terms-list {
    margin: 6px 0 6px 4px;
}
.withdraw-terms-list li {
    font-size: 0.85rem;
    color: #555555;
    line-height: 1.6;
}

.survey-field { margin-bottom: 18px; }
.survey-legend {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: #101115;
    margin-bottom: 8px;
}
.option-list { display: flex; flex-direction: column; gap: 8px; }
.option-list .checkbox-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #f16126;
    flex-shrink: 0;
}
.survey-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #ecf0f3;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #101115;
    background: #fff;
    font-family: inherit;
    resize: vertical;
    outline: none;
}
.survey-field textarea::placeholder { color: #a0a6bc; }
.survey-field textarea:focus {
    border-color: #f16126;
    box-shadow: 0 0 0 3px rgba(241,97,38,0.12);
}