:root {
    --color-ink: #0F172A;
    --color-body: #475569;
    --color-muted: #94A3B8;
    --color-line: #E2E8F0;
    --color-surface: #F8FAFC;
    --color-primary: #2563EB;
    --color-primary-dark: #1D4ED8;
    --container: 1120px;
    --header-h: 76px;
}

* {box-sizing: border-box;}
html {scroll-behavior: smooth; scroll-padding-top: var(--header-h);}
body {
    margin: 0;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', 'Segoe UI', Roboto, sans-serif;
    color: var(--color-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a {color: inherit; text-decoration: none;}
ul {list-style: none; margin: 0; padding: 0;}
img {max-width: 100%; display: block;}
h1, h2, h3, h4, h5, h6 {margin: 0; color: var(--color-ink);}

.width_con {width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px;}

.btn {display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 22px; border-radius: 8px; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer; border: 1px solid transparent; transition: background .15s ease, color .15s ease, border-color .15s ease;}
.btn--primary {background: var(--color-primary); color: #fff;}
.btn--primary:hover {background: var(--color-primary-dark);}
.btn--outline {background: transparent; color: var(--color-ink); border-color: var(--color-line);}
.btn--outline:hover {border-color: var(--color-muted);}
.btn--block {width: 100%;}

main {padding-top: var(--header-h);}

/* ---------- hero ---------- */
.hero {background: linear-gradient(180deg, var(--color-surface), #fff);}
.hero__inner {padding: 120px 24px 96px; text-align: center;}
.hero__eyebrow {margin: 0 0 14px; font-size: 0.875rem; font-weight: 700; color: var(--color-primary);}
.hero__title {font-size: clamp(1.8rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.35;}
.hero__desc {margin: 20px auto 0; max-width: 560px; font-size: 1rem;}
.hero__actions {display: flex; justify-content: center; gap: 12px; margin-top: 32px;}

/* ---------- generic section ---------- */
.section {padding: 88px 0;}
.section--alt {background: var(--color-surface);}
.section__title {font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; text-align: center;}
.section__desc {margin: 12px 0 0; text-align: center; color: var(--color-muted);}

.board_empty {padding: 60px 0; text-align: center; font-size: 0.9rem; line-height: 1.3rem; color: #999;}

.page {display: flex; justify-content: center; margin: 30px 0 0 0;}
.paging ul {display: flex; align-items: center; gap: 6px;}
.paging li {display: flex;}
.paging li a,
.paging li span {display: flex; justify-content: center; align-items: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 4px; background: #EBEFF2; font-size: 0.8rem; line-height: 1.2rem; color: #212121;}
.paging li a {cursor: pointer;}
.paging li a:hover {background: #E0E0E0;}
.paging li.on span {background: #212121; color: #fff; font-weight: 700;}
.paging li.paging_nav a {background: transparent; color: #666; font-weight: 600;}
.paging li.paging_nav a:hover {background: transparent; text-decoration: underline;}

/* ---------- features ---------- */
.feature-grid {display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top:48px;}
.feature-card {padding:32px 24px; border:1px solid var(--color-line); border-radius:12px; background:#fff;}
.feature-card__icon {width:44px; height:44px; border-radius:10px; background:#EEF2FF; color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:16px;}
.feature-card__title {font-size:1.05rem; font-weight:700;}
.feature-card__desc {margin-top:8px; font-size:0.9rem; color:var(--color-body);}

/* ---------- pricing ---------- */
.pricing-grid {display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top:48px; align-items:stretch;}
.pricing-card {position:relative; display:flex; flex-direction:column; padding:32px 28px; border:1px solid var(--color-line); border-radius:12px; background:#fff;}
.pricing-card--featured {border-color:var(--color-primary); box-shadow:0 8px 24px rgba(37,99,235,.12);}
.pricing-card__badge {position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--color-primary); color:#fff; font-size:0.7rem; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap;}
.pricing-card__name {font-size:0.95rem; font-weight:700; color:var(--color-muted);}
.pricing-card__price {margin-top:12px; font-size:1.9rem; font-weight:800; color:var(--color-ink);}
.pricing-card__price span {font-size:0.85rem; font-weight:600; color:var(--color-muted);}
.pricing-card__price-original {margin:12px 0 0; font-size:0.9rem; font-weight:600; color:var(--color-muted); text-decoration:line-through;}
.pricing-card__price-original + .pricing-card__price {margin-top:2px;}
.pricing-card__price span.pricing-card__event-badge {display:inline-block; margin-left:8px; padding:2px 9px; background:#FEF2F2; color:#DC2626; font-size:0.7rem; font-weight:700; border-radius:999px; vertical-align:middle;}
.pricing-card__desc {margin-top:8px; font-size:0.85rem; color:var(--color-muted);}
.pricing-card__features {margin:20px 0 0; display:flex; flex-direction:column; gap:10px; font-size:0.85rem; flex:1;}
.pricing-card .btn {margin-top:24px;}

/* ---------- faq ---------- */
.faq-list {max-width:720px; margin:48px auto 0; display:flex; flex-direction:column; gap:12px;}
.faq-item {border:1px solid var(--color-line); border-radius:10px; background:#fff; padding:4px 20px;}
.faq-item summary {padding:16px 0; font-weight:700; color:var(--color-ink); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker {display:none;}
.faq-item summary::after {content:'+'; flex-shrink:0; font-size:1.2rem; color:var(--color-muted); transition:transform .15s ease;}
.faq-item[open] summary::after {transform:rotate(45deg);}
.faq-item p {margin:0 0 16px; font-size:0.9rem; color:var(--color-body);}

/* ---------- inquiry (상담신청) ---------- */
.inquiry-form {max-width:480px; margin:40px auto 0; display:flex; flex-direction:column; gap:14px;}
.inquiry-form input,
.inquiry-form textarea {padding:12px 14px; border:1px solid var(--color-line); border-radius:8px; font-size:0.9rem; font-family:inherit; width:100%;}
.inquiry-form textarea {resize:vertical; min-height:100px;}
.inquiry-form .btn {margin-top:4px;}

/* ---------- apply (회원가입/서비스신청) ---------- */
.apply-steps {display:grid; grid-template-columns: repeat(4, 1fr); gap:20px; margin:48px 0 40px;}
.apply-step {text-align:center; padding:20px;}
.apply-step__num {width:36px; height:36px; margin:0 auto 12px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.9rem;}
.apply-step__title {font-size:0.9rem; font-weight:700; color:var(--color-ink);}
.apply-step__desc {margin-top:4px; font-size:0.8rem; color:var(--color-muted);}
.apply-cta {text-align:center; margin-top:8px;}

@media (max-width: 860px) {
    .feature-grid, .pricing-grid {grid-template-columns: 1fr;}
    .apply-steps {grid-template-columns: repeat(2, 1fr);}
}

/* ---------- signup ---------- */
.signup-wrap {max-width: 640px; margin: 0 auto; padding: 72px 24px 120px;}
.signup-card {background: #fff; border: 1px solid var(--color-line); border-radius: 16px; padding: 40px;}
.signup-title {text-align: center; font-size: 1.5rem;}
.signup-desc {text-align: center; color: var(--color-muted); margin: 8px 0 32px; font-size: 0.9rem;}

.form-group {margin-bottom: 18px;}
.form-group label {display: block; font-size: 0.85rem; font-weight: 700; color: var(--color-ink); margin-bottom: 6px;}
.form-group input {width: 100%; padding: 12px 14px; border: 1px solid var(--color-line); border-radius: 8px; font-size: 0.9rem; font-family: inherit;}
.form-group input:focus {outline: none; border-color: var(--color-primary);}
.form-group .field-hint {margin-top: 6px; font-size: 0.78rem; color: var(--color-muted);}
.form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.form-error {margin-bottom: 20px; padding: 12px 16px; background: #FEF2F2; border: 1px solid #FCA5A5; color: #DC2626; border-radius: 8px; font-size: 0.85rem;}

.form-domain-preview {display: flex;}
.form-domain-preview input {border-radius: 8px 0 0 8px;}
.form-domain-suffix {display: flex; align-items: center; padding: 0 14px; border: 1px solid var(--color-line); border-left: none; border-radius: 0 8px 8px 0; background: var(--color-surface); font-size: 0.85rem; color: var(--color-muted); white-space: nowrap;}

.signup-success {text-align: center; padding: 40px 0;}
.signup-success__icon {font-size: 2.5rem; margin-bottom: 16px;}

/* ---------- login ---------- */
.login-wrap {max-width: 420px;}
.login-card .btn--block {width: 100%; margin-top: 8px;}
.login-foot {text-align: center; margin: 24px 0 0; font-size: 0.85rem; color: var(--color-muted);}
.login-foot a {color: var(--color-primary); font-weight: 700;}

/* ---------- signup wizard ---------- */
.wizard-progress {margin-bottom: 28px;}
.wizard-progress__bar {height: 6px; background: var(--color-line); border-radius: 999px; overflow: hidden;}
.wizard-progress__bar span {display: block; height: 100%; width: 33.33%; background: var(--color-primary); border-radius: 999px; transition: width .25s ease;}
.wizard-progress__label {margin: 8px 0 0; text-align: right; font-size: 0.78rem; color: var(--color-muted);}
.wizard-step__title {font-size: 1.1rem; margin-bottom: 22px;}
.wizard-actions {display: flex; justify-content: space-between; align-items: center; margin-top: 8px;}
.wizard-actions .btn {min-width: 96px;}

/* ---------- product select (service-apply - 항상 잠긴 상태로만 표시, 그리드/변경 UI 없음) ---------- */
.product-locked {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--color-primary); border-radius: 10px; background: #EEF2FF;}
.product-locked__info {display: flex; flex-direction: column; gap: 2px;}
.product-locked__name {font-weight: 700; color: var(--color-ink);}
.product-locked__price {font-size: 0.9rem; font-weight: 800; color: var(--color-primary);}

@media (max-width: 560px) {
    .signup-card {padding: 28px 20px;}
    .form-row {grid-template-columns: 1fr;}
}

/* ---------- drag & drop upload (공개 페이지용, admin.css의 어드민 톤과는 별도 팔레트) ---------- */
.upload-drop {position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px 16px; border: 2px dashed var(--color-line); border-radius: 10px; text-align: center; cursor: pointer; background: var(--color-surface); transition: border-color .15s ease, background .15s ease;}
.upload-drop:hover {border-color: var(--color-primary);}
.upload-drop.is-dragover {border-color: var(--color-primary); background: #EEF2FF;}
.upload-drop.is-uploading {opacity: .6; pointer-events: none;}
.upload-drop.has-file {border-style: solid; border-color: #16A34A; background: #F0FDF4;}
.upload-drop input[type="file"] {display: none;}
.upload-drop .upload-hint {font-size: 0.8rem; color: var(--color-muted);}
.upload-drop .upload-preview {display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; color: var(--color-ink); word-break: break-all;}
.upload-drop .upload-thumb {max-width: 140px; max-height: 100px; object-fit: cover; border: 1px solid var(--color-line); border-radius: 6px;}
.upload-drop .upload-remove {margin-top: 2px; padding: 4px 12px; font-size: 0.75rem; border: 1px solid #DC2626; color: #DC2626; background: #fff; border-radius: 6px; cursor: pointer;}

/* ---------- footer ---------- */
.footer {background: var(--color-ink); color: #CBD5E1;}
.footer__inner {padding: 64px 0 32px;}
.footer__top {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 40px;}
.footer__logo {font-size: 1.25rem; font-weight: 800; color: #fff; margin: 0 0 10px;}
.footer__desc {margin: 0; font-size: 0.875rem; color: #94A3B8; max-width: 360px;}
.footer__links {display: flex; flex-wrap: wrap; gap: 12px 28px;}
.footer__links a {font-size: 0.875rem; color: #CBD5E1;}
.footer__links a:hover {color: #fff;}
.footer__divider {border: none; border-top: 1px solid rgba(255,255,255,.1); margin: 0;}
.footer__bottom {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 28px;}
.footer__biz {display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8rem; color: #64748B;}
.footer__biz li:not(:last-child)::after {content: '|'; margin-left: 14px; color: #334155;}
.footer__copy {margin: 0; font-size: 0.8rem; color: #64748B;}

@media (max-width: 720px) {
    .footer__inner {padding: 48px 0 28px;}
    .footer__bottom {flex-direction: column; align-items: flex-start;}
}