/* ================================================================
   inquiry.css — 온라인 문의 (탭형) · 고급 모노톤 톤앤매너
   가로 1440 기준 · slate-900(#0f172a) 단색 럭셔리
   ================================================================ */
:root{ --ink:#0f172a; --line:#e2e8f0; --muted:#64748b; }

/* ===== HERO (full-width dark) ===== */
.iq-hero{
  position:relative;
  background:
    radial-gradient(1200px 420px at 78% -10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(900px 380px at 12% 120%, rgba(255,255,255,.05), transparent 55%),
    #0b1120;
  color:#fff;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.iq-hero::before{ /* 미세 그리드 텍스처 */
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(900px 400px at 50% -20%, #000, transparent 75%);
          mask-image:radial-gradient(900px 400px at 50% -20%, #000, transparent 75%);
  pointer-events:none;
}
.iq-hero-inner{ max-width:1440px; margin:0 auto; padding:84px 4% 92px; position:relative; z-index:1; }
.iq-hero-eyebrow{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.72rem; font-weight:800; letter-spacing:.22em;
  color:#cbd5e1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  padding:.5rem 1rem; border-radius:99px; font-family:'Outfit',sans-serif;
}
.iq-hero-title{
  margin-top:1.5rem; font-size:clamp(2rem,3.6vw,3.25rem); font-weight:900;
  letter-spacing:-.03em; line-height:1.22; color:#fff;
}
.iq-hero-sub{ margin-top:1.25rem; color:#94a3b8; font-size:1.05rem; line-height:1.85; font-weight:500; }

/* ===== WRAP ===== */
.iq-wrap{ max-width:1280px; margin:0 auto; padding:0 4%; }
.iq-card{
  position:relative; margin-top:-52px; z-index:5;
  background:#fff; border:1px solid var(--line); border-radius:28px;
  box-shadow:0 40px 90px -50px rgba(15,23,42,.55), 0 2px 6px rgba(15,23,42,.04);
  overflow:hidden;
}

/* ===== TABS ===== */
.iq-tabs{
  position:relative; display:flex; gap:.25rem; flex-wrap:nowrap;
  padding:.5rem; background:#f8fafc; border-bottom:1px solid var(--line);
}
.iq-tab{
  position:relative; z-index:2; flex:1 1 0; min-width:0;
  padding:.95rem .9rem; border-radius:16px; cursor:pointer;
  font-size:.95rem; font-weight:800; color:var(--muted);
  background:transparent; border:none; transition:color .25s ease; white-space:nowrap;
}
.iq-tab:hover{ color:#1e293b; }
.iq-tab.on{ color:#fff; }
.iq-tab-ink{
  position:absolute; z-index:1; top:.5rem; left:0; height:calc(100% - 1rem);
  background:var(--ink); border-radius:16px; width:0;
  box-shadow:0 10px 24px -10px rgba(15,23,42,.6);
  transition:transform .42s cubic-bezier(.16,1,.3,1), width .42s cubic-bezier(.16,1,.3,1);
}

/* ===== BODY ===== */
.iq-body{ padding:2.4rem clamp(1.25rem,4vw,2.8rem) 2.8rem; }

/* 슬로건 */
.iq-slogan{ display:flex; gap:1.1rem; align-items:flex-start; margin-bottom:2rem; }
.iq-slogan.swap{ animation:iqSwap .5s cubic-bezier(.16,1,.3,1); }
@keyframes iqSwap{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
.iq-slogan-ico{
  flex:0 0 auto; width:56px; height:56px; border-radius:18px;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 16px 32px -16px rgba(15,23,42,.7);
}
.iq-slogan-eyebrow{
  display:inline-block; font-family:'Outfit',sans-serif; font-size:.68rem; font-weight:800;
  letter-spacing:.2em; color:#94a3b8; margin-bottom:.35rem;
}
.iq-slogan-title{ font-size:1.5rem; font-weight:900; letter-spacing:-.02em; color:#0f172a; line-height:1.35; }
.iq-slogan-desc{ margin-top:.55rem; color:#64748b; font-size:.96rem; line-height:1.75; font-weight:500; }

/* ===== FORM ===== */
.iq-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem 1.25rem; }
.iq-col-2{ grid-column:1 / -1; }
.iq-field{ display:flex; flex-direction:column; }
.iq-field label{ font-size:.85rem; font-weight:800; color:#334155; margin-bottom:.5rem; }
.iq-field label .req{ color:#0f172a; }
.iq-field label .opt{ font-weight:600; color:#94a3b8; font-size:.78rem; margin-left:.3rem; }

#iq input[type=text], #iq input[type=email], #iq input[type=tel], #iq textarea{
  width:100%; padding:.95rem 1.05rem; border:1.5px solid var(--line); border-radius:14px;
  font-weight:600; color:#1e293b; background:#fff; transition:border-color .15s, box-shadow .15s;
  font-size:.98rem;
}
#iq input::placeholder, #iq textarea::placeholder{ color:#cbd5e1; font-weight:500; }
#iq input:focus, #iq textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(15,23,42,.07);
}
#iq textarea{ resize:vertical; min-height:120px; line-height:1.6; }
/* 파라미터로 잠긴(읽기전용) 입력칸: 원래 글자색 유지 + 빗금 배경으로 잠금 표시 */
#iq input[readonly]{ color:#1e293b; cursor:not-allowed; border-style:dashed; border-color:#cbd5e1;
  background-color:#f8fafc;
  background-image:repeating-linear-gradient(45deg, rgb(100 116 139 / 3%) 0, rgb(100 116 139 / 7%) 6px, transparent 6px, #00000000 13px); }
#iq input[readonly]:focus{ border-color:#cbd5e1; box-shadow:none; }

.iq-extra{ animation:iqSwap .4s cubic-bezier(.16,1,.3,1); }

/* 첨부 */
.iq-drop{
  display:flex; align-items:center; gap:.7rem; cursor:pointer;
  border:1.5px dashed var(--line); border-radius:14px; padding:1rem 1.1rem;
  color:#64748b; font-weight:700; font-size:.92rem; transition:.18s;
}
.iq-drop:hover{ border-color:#94a3b8; background:#f8fafc; color:#334155; }
.iq-drop iconify-icon{ font-size:1.15rem; }
.iq-filechip{
  display:flex; align-items:center; gap:.6rem; margin-top:.65rem;
  background:#f1f5f9; border:1px solid var(--line); border-radius:12px;
  padding:.65rem .9rem; font-weight:700; color:#1e293b; font-size:.88rem;
}
.iq-filechip > span{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.iq-filechip iconify-icon{ color:#64748b; font-size:1.05rem; }
.iq-filechip button{ color:#94a3b8; transition:color .15s; }
.iq-filechip button:hover{ color:#e11d48; }

/* honeypot / hidden file input */
.iq-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

/* 개인정보 */
.iq-privacy{
  margin-top:1.8rem; font-size:.78rem; line-height:1.85; color:#94a3b8;
  background:#f8fafc; border:1px solid var(--line); border-radius:14px;
  padding:1rem 1.15rem; max-height:140px; overflow-y:auto;
}
.iq-agree{ display:flex; align-items:flex-start; gap:.55rem; margin-top:1rem; cursor:pointer; }
.iq-agree input{ margin-top:.15rem; width:18px; height:18px; accent-color:#0f172a; flex:0 0 auto; cursor:pointer; }
.iq-agree span{ font-size:.9rem; font-weight:700; color:#475569; }
.iq-agree .req{ color:#0f172a; }

.iq-err{ margin-top:.9rem; color:#e11d48; font-weight:700; font-size:.9rem; }

/* 제출 버튼 */
.iq-submit{
  width:100%; margin-top:1.5rem; padding:1.15rem; border:none; cursor:pointer;
  background:var(--ink); color:#fff; font-weight:900; font-size:1.05rem; border-radius:18px;
  display:flex; align-items:center; justify-content:center; gap:.55rem;
  transition:transform .2s var(--ease-custom,cubic-bezier(.16,1,.3,1)), background-color .25s, box-shadow .25s;
  box-shadow:0 18px 40px -18px rgba(15,23,42,.7);
}
.iq-submit iconify-icon{ transition:transform .25s; }
.iq-submit:hover{ background:#1e293b; transform:translateY(-2px); }
.iq-submit:hover iconify-icon{ transform:translateX(4px); }
.iq-submit.loading{ opacity:.65; pointer-events:none; }

/* 완료 화면 */
.iq-done{ text-align:center; padding:2rem 0 1rem; animation:iqSwap .5s cubic-bezier(.16,1,.3,1); }
.iq-done-ico{
  width:72px; height:72px; border-radius:50%; margin:0 auto 1.4rem;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2rem;
  box-shadow:0 20px 44px -20px rgba(15,23,42,.7);
}
.iq-done h2{ font-size:1.7rem; font-weight:900; letter-spacing:-.02em; color:#0f172a; margin-bottom:.7rem; }
.iq-done p{ color:#64748b; line-height:1.8; font-weight:500; }
.iq-done-home{ display:inline-block; margin-top:1.6rem; color:#94a3b8; font-weight:800; font-size:.92rem; transition:color .2s; }
.iq-done-home:hover{ color:#0f172a; }

/* ===== TRUST STRIP ===== */
.iq-trust{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
  margin:2.2rem 0 0; padding:0;
}
.iq-trust-item{
  display:flex; align-items:center; gap:.85rem;
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.1rem 1.25rem;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.iq-trust-item:hover{ transform:translateY(-2px); border-color:#cbd5e1; box-shadow:0 16px 36px -24px rgba(15,23,42,.4); }
.iq-trust-item iconify-icon{ font-size:1.9rem; color:#0f172a; flex:0 0 auto; }
.iq-trust-item div{ display:flex; flex-direction:column; }
.iq-trust-item b{ font-size:.92rem; font-weight:900; color:#0f172a; letter-spacing:-.01em; }
.iq-trust-item span{ font-size:.78rem; color:#94a3b8; font-weight:600; margin-top:.1rem; }

/* ===== Responsive ===== */
@media (max-width:768px){
  .iq-hero-inner{ padding:60px 6% 76px; }
  .iq-grid{ grid-template-columns:1fr; }
  .iq-tabs{ flex-wrap:wrap; }
  .iq-tab{ flex:1 1 45%; text-align:center; font-size:.86rem; padding:.8rem .6rem; }
  .iq-tab-ink{ display:none; }
  .iq-tab.on{ color:#fff; background:var(--ink); border-radius:14px; }
  .iq-body{ padding:1.8rem 1.25rem 2rem; }
  .iq-slogan-title{ font-size:1.25rem; }
  .iq-trust{ grid-template-columns:1fr; }
}