@charset "utf-8";
/* ===================================================
   EXPERNET 2026 - Download Page Styles (download.css)
   =================================================== */

/* ── 전체 레이아웃: container 안에서 카드형 2컬럼 ── */
.dl-page {
  display: flex;
  align-items: stretch;
  border-radius: 1.25rem;
  overflow: hidden;
}

/* ── 왼쪽 폼 패널 (60%) ── */
.dl-left {
  flex: 0 0 60%;
  background: #fff;
  border-right: 1px solid var(--color-border);
}
.dl-left-inner {
  padding: 3rem 3rem 3rem 3rem;
}

/* 뒤로가기 */
.dl-back {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 2rem;
  transition: color .18s;
}
.dl-back:hover { color: var(--color-primary); }

/* 헤더 */
.dl-header { margin-bottom: 2rem; }
.dl-step {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  padding: .2rem .65rem;
  border-radius: var(--radius-full);
  margin-bottom: .6rem;
}
.dl-header h1 {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.dl-file-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: .875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.dl-file-card p:not(.dl-file-title) {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: 1.45;
}
.dl-vendor-tag {
  font-size: .75rem;
  color: var(--color-text-muted);
}

/* ── 폼 필드 ── */
.dl-field-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.125rem;
}
.dl-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.dl-field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: .3rem;
}
.dl-field label .req { color: var(--color-accent); }
.dl-field input {
  width: 100%;
  padding: .6875rem .875rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-family: inherit;
  color: var(--color-text);
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
  outline: none;
  box-sizing: border-box;
}
.dl-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.dl-field input.is-error {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229,62,62,.12);
}

/* ── 상담 체크박스 ── */
.dl-consult-check {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  margin-bottom: 1rem;
  font-size: .875rem;
  color: var(--color-text-muted);
}
.dl-consult-check input { display: none; }
.dl-check-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
  background: #fff;
}
.dl-consult-check input:checked + .dl-check-box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.dl-consult-check input:checked + .dl-check-box::after {
  content: '';
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
}

/* ── 개인정보 안내 ── */
.dl-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .75rem;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: .75rem .875rem;
  margin-bottom: 1.375rem;
  line-height: 1.55;
}
.dl-privacy-note i { flex-shrink: 0; color: var(--color-primary); margin-top: 1px; }

/* ── 제출 버튼 ── */
.dl-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9375rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background .18s;
  font-family: inherit;
}
.dl-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 85%, #000);
}
.dl-submit:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.dl-submit .dl-submit-loading { display: none; }
.dl-submit.is-loading .dl-submit-text  { display: none; }
.dl-submit.is-loading .dl-submit-loading { display: flex; align-items: center; gap: .4rem; }

.dl-spin { animation: dlSpin .8s linear infinite; display: inline-block; }
@keyframes dlSpin { to { transform: rotate(360deg); } }

/* ── 메시지 ── */
.dl-msg {
  margin-top: .875rem;
  font-size: .8125rem;
  border-radius: var(--radius-md);
  padding: .625rem .875rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  line-height: 1.45;
}
.dl-msg-error   { color: #c53030; background: #fff5f5; border-left: 3px solid #e53e3e; }
.dl-msg-success { color: #276749; background: #f0fff4; border-left: 3px solid #38a169; }

/* ── 오른쪽 정보 패널 (40%) ── */
.dl-right {
  flex: 0 0 40%;
  background: linear-gradient(160deg, #0d1829 0%, #0f2040 60%, #0a1628 100%);
  overflow-y: auto;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── 벤더 카드 ── */
.dl-vendor-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.dl-vendor-logo-wrap {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  background: rgba(255,255,255,.95);
  border-radius: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .75rem;
  overflow: hidden;
}
.dl-vendor-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.dl-vendor-body { flex: 1; min-width: 0; }
.dl-vendor-badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(99,179,237,.18);
  color: #90cdf4;
  border: 1px solid rgba(99,179,237,.28);
  border-radius: var(--radius-full);
  padding: .15rem .6rem;
  margin-bottom: .45rem;
}
.dl-vendor-body h2 {
  font-size: 1.125rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .45rem;
}
.dl-vendor-body p {
  font-size: .8125rem;
  color: rgba(255,255,255,.68);
  line-height: 1.6;
  margin-bottom: .75rem;
}
.dl-vendor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin-bottom: .75rem;
}
.dl-vendor-tags span {
  font-size: .68rem;
  font-weight: 600;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  border-radius: var(--radius-full);
  padding: .18rem .55rem;
  border: 1px solid rgba(255,255,255,.14);
}
.dl-vendor-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: #90cdf4;
  text-decoration: none;
  transition: color .18s;
}
.dl-vendor-link:hover { color: #bee3f8; }

/* ── 정책 박스 ── */
.dl-policy-box {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .875rem;
  padding: 1.25rem 1.375rem;
}
.dl-policy-box h3 {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .875rem;
  font-weight: 700;
  color: #90cdf4;
  margin-bottom: .75rem;
}
.dl-policy-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.dl-policy-box li {
  position: relative;
  padding-left: 1rem;
  font-size: .78rem;
  color: rgba(255,255,255,.62);
  line-height: 1.55;
}
.dl-policy-box li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,.3);
  font-weight: 900;
}
.dl-policy-box li strong { color: rgba(255,255,255,.9); }

/* ── 파트너 그리드 ── */
.dl-partners-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.32);
  margin-bottom: .875rem;
}
.dl-partners-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
}
.dl-partner-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .5rem;
  padding: .625rem .3rem .5rem;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .15s;
}
.dl-partner-item:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
}
.dl-partner-item.is-active {
  background: rgba(99,179,237,.15);
  border-color: rgba(99,179,237,.4);
}
.dl-partner-item img {
  width: 32px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .8;
}
.dl-partner-item strong {
  font-size: .62rem;
  font-weight: 700;
  color: rgba(255,255,255,.75);
}
.dl-partner-item span {
  font-size: .58rem;
  color: rgba(255,255,255,.4);
  text-align: center;
  line-height: 1.3;
}

/* ── 반응형 ── */
@media (max-width: 960px) {
  .dl-page {
    flex-direction: column;
    border-radius: .875rem;
  }
  .dl-left  { flex: none; border-right: none; border-bottom: 1px solid var(--color-border); }
  .dl-left-inner { padding: 2rem 1.75rem; }
  .dl-right { flex: none; padding: 2rem 1.75rem; }
  .dl-partners-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 600px) {
  .dl-left-inner { padding: 1.75rem 1.25rem; }
  .dl-right { padding: 1.75rem 1.25rem; }
  .dl-vendor-card { flex-direction: column; }
  .dl-row2 { grid-template-columns: 1fr; }
  .dl-partners-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 400px) {
  .dl-left-inner  { padding: 1.25rem 1rem; }
  .dl-right       { padding: 1.25rem 1rem; }
  .dl-header h1   { font-size: 1.375rem; }
  .dl-partners-grid { grid-template-columns: repeat(3, 1fr); }
  .dl-vendor-logo-wrap { width: 56px; height: 56px; padding: .5rem; }
  .dl-vendor-body h2   { font-size: 1rem; }
}