/* 문의하기 — 히어로·GNB·press 탭과 동일한 가로 리듬 + 본문 카드 강조 */

body.contact-page{
  --contact-max:1200px;
  --contact-gutter:clamp(20px,4.2vw,56px);
  --contact-shell-pad:clamp(24px,3.6vw,44px);
}

.contact-page-hero.sub-hero.page-header{
  background-color:transparent;
  background-image:url("../images/contact-title-bg.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.page-header.contact-page-hero::after{
  z-index:1;
  background:linear-gradient(to top,rgba(2,10,30,.66) 0%,rgba(8,22,56,.38) 42%,rgba(5,15,40,.2) 78%,transparent 100%);
}
.contact-page-hero.sub-hero.page-header .page-header-content{z-index:2}

.contact-hero-lead{
  margin-top:12px;
  font-size:clamp(14px,1.15vw,17px);
  font-weight:500;
  color:rgba(255,255,255,.78);
  line-height:1.6;
  max-width:40rem;
}

/* Sticky steps — PR 탭과 톤 맞춤 */
.contact-progress-wrap{
  position:sticky;
  top:var(--gnb-h,80px);
  z-index:90;
  background:#f7faff;
  border-bottom:1px solid #dbe8fb;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
.contact-progress-inner{
  max-width:var(--contact-max);
  margin:0 auto;
  padding:0 var(--contact-gutter);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:68px;
  gap:0;
}
.contact-step-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px 0 0;
  position:relative;
}
.contact-step-item:not(:last-child)::after{
  content:"";
  display:block;
  width:36px;
  height:1px;
  background:linear-gradient(90deg,#c8daf5,transparent);
  margin-right:16px;
}
.contact-step-num{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid #c5d5e8;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:800;
  color:#7a8fb0;
  transition:all .22s;
  flex-shrink:0;
  background:var(--white);
}
.contact-step-label{
  font-size:13px;
  font-weight:600;
  color:#7a8fb0;
  transition:color .2s;
  white-space:nowrap;
}
.contact-step-item.active .contact-step-num{
  background:var(--blue-dim);
  border-color:var(--blue-dim);
  color:#fff;
  box-shadow:0 4px 14px rgba(13,74,158,.35);
}
.contact-step-item.active .contact-step-label{color:var(--text);font-weight:700}
.contact-step-item.done .contact-step-num{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,128,255,.28);
}
.contact-step-item.done .contact-step-label{color:var(--text-muted);font-weight:600}

/* Main — 전체 폭 배경, 콘텐츠는 공통 그리드 */
.contact-main{
  width:100%;
  margin:0;
  padding:56px var(--contact-gutter) 120px;
  background:
    radial-gradient(ellipse 85% 55% at 50% -8%,rgba(0,128,255,.09),transparent 58%),
    linear-gradient(180deg,#e8f0fb 0%,var(--gray) 28%,var(--gray) 100%);
}

.contact-shell{
  max-width:var(--contact-max);
  margin:0 auto;
  background:var(--white);
  border-radius:24px;
  border:1px solid rgba(0,128,255,.14);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 16px 56px rgba(24,32,56,.08),
    0 4px 20px rgba(0,64,160,.06);
  padding:var(--contact-shell-pad);
}

.contact-step-panel{display:none}
.contact-step-panel.active{display:block}

/* 섹션 라벨 — common .sec-label 계열 */
.contact-step-heading{
  font-size:13px;
  font-weight:700;
  letter-spacing:3px;
  color:var(--blue);
  text-transform:uppercase;
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.contact-step-heading::before{
  content:"";
  width:20px;
  height:1px;
  background:var(--blue);
  flex-shrink:0;
}
.contact-step-title{
  font-size:clamp(26px,2.6vw,38px);
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.18;
  margin-bottom:10px;
  color:var(--dark);
}
.contact-step-sub{
  font-size:clamp(15px,1.1vw,17px);
  color:var(--text-muted);
  margin-bottom:40px;
  line-height:1.65;
  max-width:52rem;
}
.contact-step-sub--tight{margin-bottom:22px}
.contact-panel--form .contact-form-grid{gap:14px 22px}
.contact-panel--form .contact-field-legend{margin-bottom:6px}
.contact-step-title-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px 18px;
  margin-bottom:10px;
}
.contact-step-title-row .contact-step-title{
  margin-bottom:0;
  min-width:0;
}
.contact-step-title-row .contact-btn-ghost{
  flex-shrink:0;
  align-self:center;
}

/* Type cards */
.contact-type-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px 18px;
}
/* 데스크톱: 기타 문의를 하단 3칸 너비로 확장 */
@media (min-width:901px){
  .contact-type-card[data-type="etc"]{
    grid-column:1 / -1;
  }
}
.contact-type-card{
  position:relative;
  background:var(--gray);
  border:2px solid var(--border);
  border-radius:16px;
  padding:28px 22px 26px;
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,transform .2s ease;
  text-align:left;
  overflow:hidden;
  font:inherit;
  color:inherit;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.contact-type-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(0,128,255,.08),transparent 55%);
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
}
.contact-type-card:hover{
  border-color:rgba(0,128,255,.35);
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(24,32,56,.07);
}
.contact-type-card:hover::before{opacity:1}
.contact-type-card.selected{
  border-color:var(--blue);
  background:linear-gradient(165deg,#f3f9ff 0%,#fff 55%);
  box-shadow:
    0 0 0 1px rgba(0,128,255,.12),
    0 12px 32px rgba(0,80,200,.12);
  transform:translateY(-1px);
}
.contact-type-card.selected::before{opacity:0}
.contact-type-icon{
  font-size:32px;
  margin-bottom:14px;
  display:block;
  position:relative;
  z-index:1;
  line-height:1;
}
.contact-type-name{
  display:block;
  font-size:15px;
  font-weight:800;
  color:var(--text);
  margin-bottom:8px;
  position:relative;
  z-index:1;
  letter-spacing:-.02em;
  line-height:1.35;
  white-space:normal;
  word-break:keep-all;
}
.contact-type-desc{
  display:block;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.55;
  position:relative;
  z-index:1;
  white-space:normal;
  word-break:keep-all;
}
.contact-type-check{
  position:absolute;
  top:14px;
  right:14px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .2s,transform .2s;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,128,255,.4);
}
.contact-type-card.selected .contact-type-check{opacity:1}

.contact-next-wrap{
  margin-top:36px;
  display:flex;
  justify-content:flex-end;
}

/* Selected type bar */
.contact-selected-bar{
  width:100%;
  background:linear-gradient(180deg,#f6faff,#fff);
  border:2px solid rgba(0,128,255,.18);
  border-radius:14px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
  cursor:pointer;
  font:inherit;
  text-align:left;
  transition:border-color .2s,box-shadow .2s,transform .2s;
  box-shadow:0 4px 16px rgba(0,64,140,.06);
}
.contact-selected-bar:hover{
  border-color:var(--blue);
  box-shadow:0 8px 24px rgba(0,80,200,.1);
  transform:translateY(-1px);
}
.contact-bar-icon{font-size:22px;line-height:1}
.contact-bar-info{flex:1;min-width:0}
.contact-bar-name{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.contact-bar-change{
  font-size:12px;
  font-weight:700;
  color:var(--blue);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.contact-type-block{
  margin-top:8px;
  padding-top:0;
  border-top:none;
}
.contact-type-block[hidden]{display:none!important}
.contact-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.contact-field-hint{
  font-size:12px;
  color:var(--text-muted);
  line-height:1.5;
  margin:2px 0 8px;
}
.contact-type-block + .contact-form-grid{
  margin-top:8px;
}
.contact-fieldset{
  border:none;
  margin:0;
  padding:0;
  min-width:0;
}
.contact-field-legend{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  padding:0;
  margin-bottom:10px;
}
.contact-option-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 16px;
}
.contact-option-row--grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.contact-option-row--plan{
  display:flex;
  flex-wrap:wrap;
}
/* 마케팅 제휴 > 구독자/팔로워 규모: 한 줄 정렬 */
#contactTypeBlockMarketing .contact-option-row--plan{
  display:flex;
  flex-wrap:wrap;
}
/* 서비스 제휴 > 월 활성 사용자(MAU): 한 줄 정렬 */
#contactTypeBlockService .contact-option-row--plan{
  display:flex;
  flex-wrap:wrap;
}
.contact-option-row--few{
  display:flex;
  flex-wrap:wrap;
}
.contact-opt{
  font-size:11px;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.04em;
  margin-left:6px;
  text-transform:none;
}

/* Form */
.contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px 28px;
}
.contact-form-grid--common{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 16px;
}
.contact-field-full{grid-column:1 / -1}
#contactCompanyRow{margin-top:8px}
.contact-field-label{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.01em;
}
.contact-req{color:var(--blue);margin-left:2px}
/* 필수 미입력 시 강조 (팝업 대신) */
.contact-field.contact-has-error .contact-field-label{color:#b71c1c}
.contact-field.contact-has-error input:not([type="checkbox"]):not([type="radio"]),
.contact-field.contact-has-error textarea,
.contact-field.contact-has-error select{
  border-color:#e53935;
  background:#fff8f8;
  box-shadow:0 0 0 1px rgba(229,57,53,.22);
}
.contact-field.contact-has-error input:focus:not([type="checkbox"]):not([type="radio"]),
.contact-field.contact-has-error textarea:focus,
.contact-field.contact-has-error select:focus{
  border-color:#c62828;
  box-shadow:0 0 0 2px rgba(229,57,53,.28);
}
.contact-fieldset.contact-has-error .contact-field-legend{color:#b71c1c}
.contact-fieldset.contact-has-error .contact-option,
.contact-fieldset.contact-has-error .contact-check{
  border-color:#e53935;
}
.contact-fieldset.contact-has-error .contact-option:has(input:checked),
.contact-fieldset.contact-has-error .contact-check:has(input:checked){
  border-color:var(--blue);
}
label.contact-agree.contact-has-error{
  border-color:#e53935;
  background:#fff8f8;
  box-shadow:0 0 0 1px rgba(229,57,53,.22);
}
#contactTypeGrid.contact-has-error{
  outline:2px solid #e53935;
  outline-offset:4px;
  border-radius:16px;
}
/* 텍스트·이메일·전화·셀렉트만 — fieldset 안 체크/라디오는 제외 */
.contact-field input:not([type="checkbox"]):not([type="radio"]),
.contact-field textarea,
.contact-field select{
  font-family:inherit;
  font-size:15px;
  color:var(--text);
  background:var(--gray);
  border:2px solid var(--border);
  border-radius:10px;
  padding:13px 16px;
  outline:none;
  width:100%;
  transition:border-color .16s,background .16s,box-shadow .16s;
}
.contact-field input:not([type="checkbox"]):not([type="radio"])::placeholder,
.contact-field textarea::placeholder{color:#94a3b8;font-size:14px}
.contact-field input:not([type="checkbox"]):not([type="radio"]):hover,
.contact-field textarea:hover,
.contact-field select:hover{
  border-color:#b8cce8;
  background:var(--white);
}
.contact-field input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-field textarea:focus,
.contact-field select:focus{
  border-color:var(--blue);
  background:var(--white);
  box-shadow:0 0 0 4px rgba(0,128,255,.12);
}
.contact-field textarea{
  resize:vertical;
  min-height:96px;
  line-height:1.6;
}

/* 선택 타일 — 네이티브 라디오/체크는 숨기고 카드만 표시 */
.contact-option,
.contact-check{
  position:relative;
  justify-content:flex-start;
  text-align:left;
  gap:0;
}
.contact-option input[type="radio"],
.contact-check input[type="checkbox"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
  opacity:0;
}
.contact-option{
  display:inline-flex;
  align-items:center;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  padding:9px 12px;
  min-height:0;
  width:auto;
  white-space:nowrap;
  background:var(--gray);
  border:2px solid var(--border);
  border-radius:10px;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.contact-option:hover{
  border-color:#c5d5e8;
  background:var(--white);
}
.contact-option:has(input:checked){
  border-color:var(--blue);
  background:#eef6ff;
  box-shadow:0 0 0 1px rgba(0,128,255,.12);
}
.contact-option:focus-within{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.contact-check{
  display:inline-flex;
  align-items:center;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
  font-weight:600;
  padding:9px 12px;
  min-height:0;
  width:auto;
  white-space:nowrap;
  background:var(--gray);
  border:2px solid var(--border);
  border-radius:10px;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.contact-check:hover{
  border-color:#c5d5e8;
  background:var(--white);
}
.contact-check:has(input:checked){
  border-color:var(--blue);
  background:#eef6ff;
  box-shadow:0 0 0 1px rgba(0,128,255,.12);
}
.contact-check:focus-within{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.contact-check-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.contact-check-grid--tight{
  display:flex;
  flex-wrap:wrap;
}
.contact-fieldset .contact-field-legend{
  float:none;
  width:100%;
}

.contact-form-foot{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.contact-agree{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  cursor:pointer;
  position:relative;
  padding:11px 14px;
  border:2px solid var(--border);
  border-radius:10px;
  background:var(--gray);
  transition:border-color .18s,background .18s,box-shadow .18s;
  flex:1;
  min-width:min(100%,220px);
}
.contact-agree:hover{
  border-color:#c5d5e8;
  background:var(--white);
}
.contact-agree:has(input:checked){
  border-color:var(--blue);
  background:#eef6ff;
  box-shadow:0 0 0 1px rgba(0,128,255,.1);
}
.contact-agree:focus-within{
  outline:2px solid var(--blue);
  outline-offset:2px;
}
.contact-agree input[type="checkbox"]{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
  opacity:0;
}
.contact-agree-copy{flex:1;min-width:0}
.contact-agree-copy strong{
  display:block;
  font-size:13px;
  color:var(--text);
  line-height:1.45;
  margin-bottom:6px;
}
.contact-agree-list{
  margin:0;
  padding-left:16px;
  color:var(--text-muted);
  font-size:12px;
  line-height:1.5;
}
.contact-agree-list li{margin:0 0 3px}
.contact-agree-list li:last-child{margin-bottom:0}
.contact-agree-list a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.contact-agree-list a:hover{color:#0066cc}
.contact-agree-check{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:6px;
  border:2px solid #b5c7df;
  background:#fff;
  margin-top:2px;
  position:relative;
}
.contact-agree:has(input:checked) .contact-agree-check{
  border-color:var(--blue);
  background:#eaf4ff;
}
.contact-agree:has(input:checked) .contact-agree-check::after{
  content:"";
  position:absolute;
  left:6px;
  top:2px;
  width:6px;
  height:11px;
  border:solid var(--blue);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.contact-form-actions{
  display:flex;
  flex-direction:column;
  flex:0 0 auto;
  align-self:stretch;
  align-items:flex-end;
  justify-content:stretch;
  gap:0;
}
.contact-form-actions .contact-btn-primary{
  flex:1 1 auto;
  width:auto;
  min-width:168px;
  min-height:0;
  font-size:clamp(15px,1.05vw,17px);
  padding:15px 28px;
}
.contact-form-actions .contact-btn-primary svg{
  width:17px;
  height:17px;
}
.contact-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.contact-form-error{
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:10px;
  background:#fff5f5;
  border:1px solid #f5c2c7;
  color:#b71c1c;
  font-size:14px;
  line-height:1.5;
}
.contact-form-error[hidden]{display:none!important}
.contact-form-note{
  font-size:12px;
  color:var(--text-muted);
  margin-top:12px;
  text-align:right;
  line-height:1.5;
}
.contact-message-help{
  margin-top:12px;
  margin-bottom:0;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(0,128,255,.28);
  background:linear-gradient(180deg,#f2f8ff 0%, #ffffff 100%);
  color:#0b4c9c;
  font-size:13px;
  font-weight:700;
  line-height:1.6;
  box-shadow:0 4px 14px rgba(0,88,190,.08);
}
.contact-message-help::before{
  content:"안내";
  display:inline-block;
  margin-right:8px;
  padding:2px 8px;
  border-radius:999px;
  background:#0b63ce;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  vertical-align:1px;
}

/* Success */
.contact-success-box{
  background:linear-gradient(180deg,#fafcff,#fff);
  border:2px solid rgba(0,128,255,.12);
  border-radius:22px;
  padding:clamp(48px,8vw,76px) clamp(24px,5vw,40px);
  text-align:center;
  max-width:560px;
  margin:0 auto;
  box-shadow:0 8px 36px rgba(24,32,56,.06);
}
.contact-success-icon{
  width:72px;
  height:72px;
  border-radius:50%;
  background:linear-gradient(145deg,var(--light-blue),#e0efff);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 26px;
  font-size:32px;
  border:1px solid rgba(0,128,255,.12);
}
.contact-success-title{
  font-size:clamp(22px,2.2vw,28px);
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:12px;
  color:var(--dark);
}
.contact-success-sub{
  font-size:15px;
  color:var(--text-muted);
  line-height:1.7;
  margin-bottom:32px;
}
.contact-success-meta{
  background:var(--gray);
  border-radius:12px;
  padding:20px 22px;
  margin-bottom:32px;
  text-align:left;
  border:1px solid var(--border);
}
.contact-meta-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:13px;
  padding:6px 0;
}
.contact-meta-row span:first-child{color:var(--text-muted);flex-shrink:0}
.contact-meta-row span:last-child{font-weight:700;color:var(--text);text-align:right}

/* Buttons — 사이트 포인트 컬러 */
.contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:inherit;
  font-size:14px;
  font-weight:700;
  border-radius:10px;
  padding:14px 24px;
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s,color .18s,box-shadow .18s;
  border:none;
  letter-spacing:-.01em;
}
.contact-btn svg{width:15px;height:15px;opacity:.85;flex-shrink:0}
.contact-btn-primary{
  background:var(--blue);
  color:#fff;
  box-shadow:0 6px 20px rgba(0,128,255,.28);
}
.contact-btn-primary:hover:not(:disabled){
  background:#0070e6;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,128,255,.35);
}
.contact-btn-primary:disabled{
  opacity:.42;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.contact-btn-ghost{
  background:var(--white);
  color:var(--text-muted);
  border:2px solid var(--border);
}
.contact-btn-ghost:hover{
  background:var(--gray);
  color:var(--text);
  border-color:#c5d5e8;
}
.contact-success-reset{width:100%}

@media (max-width:900px){
  .contact-type-grid{grid-template-columns:repeat(2,1fr)}
  .contact-form-grid--common{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  body.contact-page{--contact-shell-pad:22px 18px 28px}
  .contact-main{padding-top:56px;padding-bottom:100px}
  .contact-type-grid{grid-template-columns:1fr;gap:12px}
  .contact-type-card{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:20px 18px 18px;
  }
  .contact-type-icon{font-size:28px;margin-bottom:12px}
  .contact-type-name{
    font-size:15px;
    margin-bottom:6px;
    line-height:1.4;
  }
  .contact-type-desc{
    font-size:13px;
    line-height:1.55;
    width:100%;
  }
  .contact-form-grid{grid-template-columns:1fr;gap:18px}
  .contact-form-grid--common{grid-template-columns:1fr}
  .contact-field-full{grid-column:1}
  .contact-step-label{display:none}
  .contact-step-item:not(:last-child)::after{width:22px;margin-right:10px}
  .contact-form-foot{flex-direction:column;align-items:stretch}
  .contact-form-actions{
    width:100%;
    align-items:stretch;
  }
  .contact-form-actions .contact-btn-primary{
    flex:0 0 auto;
    width:100%;
    min-height:52px;
  }
}

@media (max-width:400px){
  .contact-type-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .contact-opt{font-size:13px;padding:8px 12px}
  .contact-step-num{font-size:12px;width:30px;height:30px}
}