/* reset */
html {font-size: clamp(8px, 2.5vw, 10px);}
body {font-size: max(1.4rem, 14px);font-family: 'Pretendard', sans-serif;color: #1a1f27;}
*, body, h1, h2, h3, h4, h5, h6, div, p, address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, hr, img {padding: 0;margin: 0;box-sizing: border-box;font-style: normal;letter-spacing: 0.1px;}
h2, h3, h4, p, span, input, textarea, select, li, b, strong, i, a, button, td {font-family: 'Pretendard', sans-serif;color: #1e1e23;}
h2, h3, h4 {font-weight: 600;letter-spacing: 0;}
a {text-decoration: none;color: #1E1E23;}
a, span, button, strong, b, i, label {display: inline-block;box-sizing: border-box;}
b, strong {font-weight: 700;}
button {border: none;background: transparent;cursor: pointer;}
ul, ol, li { list-style: none; }
table { margin: 0; padding: 0; border-spacing: 0; border: 0; }
img, fieldset { border: 0; vertical-align: top; }
textarea { overflow-y: auto; }
fieldset { display: block; }
.blind {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
input {appearance: none;-webkit-appearance: none; /* Safari ´ëÀÀ */-moz-appearance: none;cursor: pointer;border: none;}
input[type="radio"] {appearance: inherit;}
/* ´Þ·Â Ä¿½ºÅÒ */
input[type='date']::-webkit-calendar-picker-indicator {inset: 0;opacity: 0;position: absolute;width: 100%;height: 100%;cursor: pointer;}
input[type="date"] {color: transparent;}
input[type="date"]:focus, input[type="date"]:valid { color: #1E1E23; }

/* common */
:root {
  --primary: #3B82F6;
  --primary-strong: #2563EB;
  --secondary: #0A1A3F;
  --bg: #0D1B2A;
  --bg-2: #13263A;
  --surface: rgba(255,255,255,0.06);
  --surface-strong: rgba(255,255,255,0.08);
  --surface-soft: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.14);
  --text: #F8FAFC;
  --text-sub: rgba(248,250,252,0.74);
  --text-soft: rgba(248,250,252,0.58);
  --danger: #FF9B9B;
  --danger-strong: #FF7A7A;
  --danger-bg: rgba(255,122,122,0.12);
  --shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 8px;
  --container: 1200px;
}
.container { width: min(100% - 40px, var(--container)); margin: 0 auto; }
.section-features {padding-top: 80px;}
.section-notice {padding-top: 40px;}
.section-signup {padding-top: 40px;}
.section-head {text-align: center; margin-bottom: 24px;}
.section-head.left {text-align: left;}
.section-head h2 {margin: 0 0 10px; font-size: 36px; line-height: 1.25; color: #FFFFFF;}
.section-head p {margin: 0; color: rgba(248,250,252,0.68); font-size: 16px;}
.section-head-signup { margin-bottom: 22px;}
.section-head-signup h2 { color: #0A1A3F;}
.section-head-signup p { color: #5B6475;}
.eyebrow { display: inline-flex; align-items: center; margin-bottom: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(255,122,122,12%); color: #FF9B9B; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid rgba(255,255,255,40%); }
.btn { display: inline-flex;justify-content: center;align-items: center;min-height: 54px; padding: 0 24px;border-radius: var(--radius-sm);font-size: 16px;font-weight: 700;transition: transform .2s ease, background .2s ease, box-shadow .2s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-1px);}
.btn-primary {color: #fff;background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);box-shadow: 0 9px 30px rgba(37, 99, 235, 0.34);}
.btn-primary:hover {background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);}
.btn-primary:disabled {color: #ededed;background: #777;box-shadow: none;cursor: default;}
.btn-primary:disabled:hover {color: #ededed;background: #777;transform: translateY(0);}
.btn-secondary {color: #fff; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.08); box-shadow: none;}
.btn-secondary:hover {background: rgba(255,255,255,0.16);}
.btn-secondary-dark {background: #0A1A3F; border: 1px solid #0A1A3F; color: #fff;}
.btn-secondary-dark:hover {background: #08142f;}
.btn-block {width: 100%;}
.btn-large {min-height: 66px; font-size: 19px; padding: 0 36px;}

/* content */
body.ovf-h {height: 100vh;overflow: hidden;}
.urlsafe-signup-wrap {min-width: 340px;padding-bottom: 80px;background: linear-gradient(180deg, #0D1B2A 0%, #13263A 100%);}
.hero {position: relative; overflow: hidden; padding: 72px 0 72px; background: radial-gradient(circle at 82% 10%, rgba(255, 122, 122, 0.10), transparent 20%), radial-gradient(circle at 12% 0%, rgba(59, 130, 246, 0.18), transparent 26%), linear-gradient(180deg, #0D1B2A 0%, #13263A 100%);}
.hero::after {content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);}
.hero-inner {display: flex; justify-content: center;}
.hero-copy {width: 100%;text-align: center;}
.hero-copy h1 {font-size: 70px; line-height: 1.1; color: #FFFFFF; letter-spacing: -0.05em; font-weight: 700;}
.hero-copy h1 strong {color: #FF8A8A; font-weight: 700;}
.hero-desc {margin: 20px auto 0; color: rgba(248,250,252,0.74); font-size: 32px; line-height: 1.65;}
.hero-desc strong {color: #F7AF2E; font-weight: 900;}
.hero-actions {display: flex; flex-direction: column; align-items: center; gap: 12px;margin: 32px 0 0;}
.helper-text {margin: 0; font-size: 14px; color: rgba(248,250,252,0.60);}
.hero-points {display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 28px;}
.hero-chip {display: inline-flex; align-items: center; gap: 8px; padding: 8px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,40%); background: rgba(255,255,255,12%); font-size: 14px; color: #F8FAFC; font-weight: 500;}
.hero-chip:nth-child(1)::before {display: block;content: '';clear: both;width: 22px;height: 20px;background: url(../../images/hack/iconsearch.png) no-repeat center;background-size: 100%;}
.hero-chip:nth-child(2)::before {display: block;content: '';clear: both;width: 21px;height: 20px;background: url(../../images/hack/iconshield.png) no-repeat center;background-size: 100%;}
.hero-chip:nth-child(3)::before {display: block;content: '';clear: both;width: 19px;height: 23px;background: url(../../images/hack/iconreport.png) no-repeat center;background-size: 100%;}
.feature-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.feature-card, .notice-compact {background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,0.10); border-radius: var(--radius-lg); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); backdrop-filter: blur(6px);}
.signup-card {background: #ffffff; color: #111827; border: 1px solid #DCE3F0; border-radius: var(--radius-lg); box-shadow: 0 18px 34px rgba(0, 0, 0, 0.14);}
.feature-card {padding: 30px 28px;}
.feature-icon {width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(180deg, rgba(59,130,246,0.18) 0%, rgba(59,130,246,0.08) 100%); border: 1px solid rgba(255,255,255,0.08); font-size: 28px; margin-bottom: 18px;}
.feature-icon-svg img {width: 34px;display: block;}
.feature-icon-shield img {width: 42px;display: block;}
.feature-card h3 {margin: 0 0 10px; font-size: 22px; line-height: 1.3; color: #FFFFFF;}
.feature-card p {margin: 0; color: rgba(248,250,252,0.72); font-size: 16px;}
.notice-compact {max-width: 760px; margin: 0 auto; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,0.05);}
.notice-compact h3 { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: #FFFFFF;}
.notice-compact p {color: rgba(248,250,252,0.72); font-size: 12px; line-height: 1.6;}

.signup-wrap {max-width: 760px; margin: 0 auto;}
.signup-card {padding: 34px;}
.signup-form {display: grid; gap: 18px;}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.form-field label { display: block;min-width: 245px;margin-bottom: 8px; color: #0A1A3F; font-size: 15px; font-weight: 700;}
.form-field input, .form-field select {width: 100%; height: 54px; padding: 0 16px; border: 1px solid #DCE3F0; border-radius: 12px; background: #fff; color: #111827; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;}
.form-field .select-box {border: 1px solid #DCE3F0; border-radius: 12px;padding-right: 10px;}
.form-field .select-box select {border: none;}
.form-field input::placeholder {color: #97a0af; }
.form-field input:focus, .form-field select:focus {border-color: var(--primary); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.10); background: #fff;}
.form-field input:disabled,.form-field .select-box select:disabled {background: #f1f1f1;}
.form-rrn {display: flex;justify-content: space-between;align-items: center;gap: 10px;}
.rrn-back {display: flex;align-items: center;}
.rrn-mask {margin-left: 5px;letter-spacing: 3px;}

.phone-auth {height: 0;overflow: hidden;transition: 0.3s;}
.phone-auth.on {height: 110px;}
.phone-auth .btn-large {margin-top: 18px;background: #01db62;box-shadow: 0 9px 30px #01db6247;}
.phone-auth .btn-large img {height: 56px;}
.group-terms {padding: 0 12px 0 20px; border: 1px solid #DCE3F0; border-radius: 14px; background: #FBFCFE;}
.group-terms details {margin: 14px 0;}
.group-terms summary {font-size: 15px;cursor: pointer;list-style: none;}
.group-terms .terms__toggle {font-weight: 700;font-size: 15px;}
.group-terms .terms__toggle {position: relative;display: block;width: 100%;text-align-last: left;cursor: pointer;}
.group-terms .terms__toggle::after {position: absolute; right: 8px; top: 50%; display: block;content: ">"; transform: translateY(-50%) rotate(90deg); font-size: 20px; transition: transform 0.2s ease;}
.terms__toggle.on::after {right: 11px;transform: translateY(-50%) rotate(-90deg);}
.terms__content {transition: 0.3s;}
/* .terms__content.on {height: auto;} */
.group-terms .terms__subtitle {position: relative;font-weight: 600;}
.group-terms .terms__subtitle::after {position: absolute; right: 8px; top: 50%; display: block;content: ">"; transform: translateY(-50%) rotate(90deg); font-size: 20px; transition: transform 0.2s ease;}
details[open] .terms__subtitle::after {right: 11px;transform: translateY(-50%) rotate(-90deg);}
.terms__list .terms__btn {display: flex;align-items: center;justify-content: space-between;margin-top: 8px;width: 100%;padding-left: 4px;font-size: 14px;}
.terms__list .terms__btn::after {display: block;content: '>';clear: both;margin-right: 9px;font-size: 20px;}
.required-mark {color: #2563EB; font-weight: 700;}
.phone-auth .form-row {display: flex;}
.phone-auth .form-row .form-field {flex: 1;}
.phone-auth #authBtn {margin-top: 26px;width: 300px;height: 54px;}
.form-field .time {margin: 8px 0 0 2px;font-size: 13px;color: #5B6475;}
.form-field .time span {margin-left: 2px;color: #5B6475;}

/* °¡ÀÔ¿Ï·á */
.urlsafe-complete-wrap {background: linear-gradient(180deg, #0D1B2A 0%, #13263A 100%); color: #fff; display: flex; align-items: center; justify-content: center; height: 100vh; text-align: center;}
.urlsafe-complete-wrap .wrap {padding: 0 20px;}
.complete-desc {font-size: 15px; color: rgba(255, 255, 255, 0.7); line-height: 1.6;}
.complete-desc strong {color: #9FC3FF;}
.complete-tit {font-size: 30px; margin: 0 0 14px; font-weight: 800; letter-spacing: -0.03em;}
.complete-img {width: 180px; margin: 0 auto 30px; display: block; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.4));}
.urlsafe-complete-wrap .footer-note strong {color: #9FC3FF}
.urlsafe-complete-wrap .btn-primary {margin-top: 28px;}
.footer-inner {margin-top: 28px;width: 100%;}
.footer-note {color: rgba(255, 255, 255, 0.7);}
.footer-note + .footer-note {margin-top: 10px;}

/* popup */
.pop-wrap {display: none;}
.pop-wrap.on {display: block;}
.dim {position: fixed;width: 100%;height: 100%;background: #000;opacity: 0.6;}
.pop-box {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;}
.pop-full {height: 100%;background: #fff;}
.pop-center {position: relative;top: 50%;left: 50%;display: flex;flex-direction: column;;border-radius: 30px;width: 50%;max-width: 500px;height: 35%;min-height: 250px;padding: 20px;background: #fff;transform: translate(-50%, -50%);}
.popup-head {display: flex;justify-content: space-between;align-items: center;text-align: center;height: 50px;padding: 0 2rem;}
.popup-head .tit-page {flex: 1;display: flex;align-items: center;justify-content: center;font-size: 18px;}
.pop-center .pop-tit {font-size: 18px;text-align: center;}
.pop-center .pop-txt {margin-top: 14px;font-size: 16px;text-align: center;}
.pop-center .pop-content {flex: 1;display: flex;flex-direction: column-reverse;justify-content: space-evenly;margin: 30px auto 20px;min-height: 120px;}
.pop-center .pop-content .qr-img {margin: 18px auto 0;width: 88%;}
.btn-pop-close {position: absolute;top: 15px;right: 17px;width: 24px;height: 24px;background: url(../../images/hack/btnClose.svg) no-repeat center center / contain;}
.pop-full .txt_agree_box {height: calc(100% - 50px);padding: 3rem 2rem;font-size: 16px;overflow-y:  auto;}
.pop-full .txt_agree_box p {margin-top: 10px;}
.btn-pop {width:100%;height:50px;min-height: 50px;font-size:15px; color:#fff; display:flex; justify-content: center; align-items: center; border-radius: 25px;background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);}
.pop-center.qr {min-height: 290px;} 

@media (max-width: 768px) {
  .section {padding: 40px 0;}
  .section-features {padding-top: 36px; padding-bottom: 16px;}
  .section-notice {padding-top: 8px; padding-bottom: 14px;}
  .section-signup {padding-top: 10px; padding-bottom: 40px;}
  .hero {padding-top: 44px; padding-bottom: 56px;}
  .hero-copy h1 {font-size: 48px; line-height: 1.10;}
  .hero-desc {font-size: 17px;}
  .section-head h2 {font-size: 30px;}
  .feature-grid, .form-row {grid-template-columns: 1fr;}
  .phone-auth #authBtn {width: 160px;}
}
@media (max-width: 540px) {
  .phone-auth .form-row {display: block;}
  .phone-auth.on {height: 190px;}
  .phone-auth #authBtn {margin-top: 20px;width: 100%;}

}
@media (max-width: 480px) {
  .container {width: min(100% - 24px, var(--container));}
  .section {padding: 34px 0;}
  .section-features {padding-top: 28px; padding-bottom: 12px;}
  .section-notice {padding-top: 6px; padding-bottom: 10px;}
  .section-signup {padding-top: 8px; padding-bottom: 34px;}
  .hero-copy h1 {font-size: 35px; line-height: 1.16;}
  .hero-desc {font-size: 15px; line-height: 1.55;}
  .section-head h2 {font-size: 26px;}
  .feature-card, .signup-card {padding: 24px; border-radius: 20px;}
  .btn, .btn-large {width: 100%;}
  .sticky-cta {display: block;}
  .hero-chip {width: 100%; justify-content: center;}
  .notice-compact {padding: 12px 14px;}
  .notice-compact h3 {font-size: 13px;}
  .notice-compact ul {font-size: 11px;}
  .eyebrow {font-size: 12px;}
  .complete-tit {font-size: 26px;}
  .complete-desc {font-size: 14px;}
  .form-field input, .form-field select {padding: 0 10px;}
  .group-terms {padding: 16px 12px 16px 14px;}
  .group-terms .terms__toggle {font-size: 14px;}
  .group-terms .terms__toggle::after {right: 3px;}
  .group-terms .terms__subtitle::after {right: 1px;}
  details[open] .terms__subtitle::after {right: 3px;}
  .group-terms summary {font-size: 14px;}
  .pop-center {width: 65%;min-width: 250px;}
  .pop-center .pop-content {margin: 10px auto;justify-content: center;}
}