/* 자동 생성 파일 — 원본 redesign/inquiry/inquiry.css · 반영 redesign/_tools/release.js. 여기서 직접 고치지 말 것 */
/* inquiry/inquiry.css — 도입 상담 C안(결정 79). 토큰·헤더 구조·푸터는 ../d3/d.css
   구성: 헤더(이 페이지만 검정 유리, 상담 화면 위에 겹침) → 상담 화면 한 장(왼쪽 540 잉크: 제목 · 도입 상담 패스 / 오른쪽 흰: 대화로 채우기 | 직접 적기) → 푸터
   900px 이하: 위(이름표 · 제목 · 접힌 패스 요약) → 아래(대화/직접 적기), 신청 버튼은 화면 아래 고정 띠 */
.iq { --nav-h: 76px; --pad-x: max(var(--gutter), calc(50vw - 720px)); }

/* ── 헤더 — 검정 유리(공용 헤더 구성 그대로, 모양만) ── */
.iq .d-nav { background: rgba(22, 24, 29, .6); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); color: #e3e5ea; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .iq .d-nav { background: #16181d; } }
@media (prefers-reduced-transparency: reduce) { .iq .d-nav { background: #16181d; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.iq .d-logo img { content: url("../../images/logo-white.png"); }   /* 흰 로고(같은 크기 1762×696) */
.iq .d-nav-links a, .iq .d-nav-login { color: #e3e5ea; }
.iq .d-nav-links a:hover, .iq .d-nav-login:hover { color: #fff; }
.iq .d-nav-sep { background: rgba(255, 255, 255, .2); }
.iq .d-nav-links a[aria-current="page"], .iq .d-nav-login[aria-current="page"], .iq .d-nav-dlinks a[aria-current="page"] { color: #fff; }   /* 검정 유리: 현재 위치 글자 = 흰색 + 밑줄 */
.iq .d-nav-pill--ink { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24); color: #fff; }
.iq .d-nav-pill--ink:hover { background: rgba(255, 255, 255, .16); }
.iq .d-nav-burger { color: #fff; }
.iq .d-nav-drawer { background: #16181d; }
.iq .d-nav-dlinks a { color: #e3e5ea; }
.iq .d-nav-pill--line { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); color: #fff; }

/* ── 상담 화면 — 왼쪽 잉크(화면 왼쪽 끝까지) · 오른쪽 흰(화면 오른쪽 끝까지), 내용은 1440 안. 헤더 높이만큼 위로 겹침 ── */
.iq .iq-c { display: grid; grid-template-columns: minmax(540px, calc(50% - 180px)) minmax(0, 1fr); min-height: max(760px, 100vh); margin-top: calc(var(--nav-h) * -1); }
.iq .iq-l { background: radial-gradient(70% 45% at 0% 100%, rgba(59, 74, 107, .6), transparent 72%), var(--ink); color: #fff; }
.iq .iq-l-in { padding: calc(var(--nav-h) + 64px) 40px 36px var(--pad-x); }   /* 첫 이름표 = 헤더 아래 64(결정 78 규칙, 모바일 40) */
.iq .iq-ey { font-size: var(--t-ey); font-weight: 600; color: var(--on-ink-brand); line-height: 1.4; }
.iq .iq-h1 { margin-top: 10px; font-size: 40px; font-weight: 700; line-height: 1.18; letter-spacing: -0.025em; }   /* 폼 페이지 제목(결정 87 예외) — 회원가입과 같은 단계 · 줄간격 · 자간 */
.iq .iq-h1 .ln, .iq .iq-lead .ln { display: block; }
.iq .iq-g { background: linear-gradient(100deg, #fff 10%, #ffc2da 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.iq .iq-h1 .iq-g { display: inline-block; }
.iq .iq-lead { margin-top: 12px; font-size: var(--t-lead); line-height: 1.6; color: var(--t-lead-c-ink); }

/* 도입 상담 패스 */
.iq .iq-pass { margin-top: 22px; padding: 20px; border-radius: 24px; background: linear-gradient(160deg, #2b2f39, #1c1f26); box-shadow: inset 0 0 0 1px #333743, 0 24px 60px rgba(0, 0, 0, .35); }
.iq .iq-pass-sum { display: none; }
.iq .iq-pass-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.iq .iq-pass-k { font-size: var(--t-lab); font-weight: 600; color: #e3e5ea; }
.iq .iq-pass-n { flex: none; padding: 4px 11px; border-radius: 999px; background: rgba(255, 143, 187, .14); font-size: var(--t-cap); font-weight: 600; color: var(--on-ink-brand); font-variant-numeric: tabular-nums; }
.iq .iq-pass-n.is-done { background: var(--on-ink-brand); color: var(--ink); }
.iq .iq-pass-big { display: grid; justify-items: start; width: 100%; margin-top: 8px; padding: 6px 10px; border: 0; border-radius: 14px; background: transparent; color: #fff; text-align: left; font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.iq .iq-pass-big:hover { background: rgba(255, 255, 255, .04); }
.iq .iq-pass-big.is-asking { box-shadow: inset 0 0 0 1.5px var(--on-ink-brand); }
.iq .iq-pass-plan { background: linear-gradient(100deg, #fff 10%, #ffc2da 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff; }
.iq .iq-pass-plan.is-empty, .iq .iq-pass-vol.is-empty { background: none; -webkit-text-fill-color: #5a5e68; color: #5a5e68; }
.iq .iq-cells { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 10px; }
.iq .iq-cell { position: relative; display: grid; align-content: start; gap: 4px; min-width: 0; min-height: 62px; padding: 10px 14px; border: 0; border-radius: 14px; background: #262a33; color: inherit; text-align: left; transition: background .2s; }
.iq .iq-cell--wide { grid-column: 1 / -1; }
.iq .iq-cell-k { padding-right: 24px; font-size: var(--t-lab); font-weight: 600; line-height: 1.4; color: #8d929c; }
.iq .iq-cell-v { font-size: var(--t-sub); font-weight: 700; line-height: 1.45; color: #5a5e68; overflow-wrap: anywhere; }
.iq .iq-cell-ck { position: absolute; top: 11px; right: 11px; display: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ai); }
.iq .iq-cell-ck::after { content: ""; position: absolute; left: 6px; top: 5px; width: 7px; height: 4px; border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg); }
.iq .iq-cell.is-asking { box-shadow: inset 0 0 0 1.5px var(--on-ink-brand); }
.iq .iq-cell.is-asking .iq-cell-v { color: var(--on-ink-brand); }
.iq .iq-cell.is-on { background: #fff; }
.iq .iq-cell.is-on .iq-cell-k { color: var(--ink-3); }
.iq .iq-cell.is-on .iq-cell-v { color: var(--ink); }
.iq .iq-cell.is-on .iq-cell-ck { display: block; }
.iq .iq-cell:not(.is-on):hover { background: #2c3039; }
.iq .is-pop { animation: iq-pop .5s ease-out; }
@keyframes iq-pop { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
.iq .iq-cell:focus-visible, .iq .iq-pass-big:focus-visible { outline: 2px solid var(--on-ink-brand); outline-offset: 2px; }

/* 신청 */
.iq .iq-go { display: grid; gap: 8px; margin-top: 14px; }
.iq .iq-agree { display: flex; align-items: flex-start; gap: 8px; font-size: var(--t-sub); line-height: 1.5; color: #c4c8d0; cursor: pointer; }
.iq .iq-agree input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--on-ink-brand); }
.iq .iq-agree a { color: #e3e5ea; text-underline-offset: 3px; }
.iq .iq-btn { width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-size: var(--t-body); font-weight: 600; box-shadow: 0 12px 28px rgba(200, 17, 90, .35);   /* CTA 버튼 = 52 · 본문 · 600(모든 페이지 같음) */ transition: background .2s, color .2s, box-shadow .2s; }
.iq .iq-btn:hover:not(:disabled) { background: var(--brand-deep); }
.iq .iq-btn:disabled { background: #2e3139; color: #5a5e68; box-shadow: none; cursor: not-allowed; }
.iq .iq-btn.is-busy { opacity: .8; }
.iq .iq-go-note { font-size: var(--t-cap); line-height: 1.5; color: #8d929c; text-align: center; }
.iq .iq-pass.is-ready .iq-go-note { color: #e3e5ea; }
.iq .iq-err { font-size: var(--t-cap); color: var(--on-ink-brand); text-align: center; }
.iq .iq-status { font-size: var(--t-cap); text-align: center; }
.iq .iq-status.ok { color: #e3e5ea; }
.iq .iq-status.err { color: var(--on-ink-brand); }

/* ── 오른쪽 — 머리(AI 이어링 · 작성 방식 토글) + 대화 / 직접 적기. 높이 = 화면(왼쪽이 더 길면 그만큼), 안쪽 스크롤 ── */
.iq .iq-r { display: flex; flex-direction: column; min-width: 0; padding: calc(var(--nav-h) + 24px) var(--pad-x) 28px 40px; background: var(--surface); contain: size; }
.iq .iq-r-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 14px; }
.iq .iq-av { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ai); color: #fff; }
.iq .iq-av svg { width: 22px; height: 22px; }
.iq .iq-who { display: grid; min-width: 0; margin-right: auto; line-height: 1.35; }
.iq .iq-who b { font-size: 16px; font-weight: 700; color: var(--ai); }
.iq .iq-who span { font-size: 13px; color: var(--ink-3); }
.iq .iq-mode { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg); }
.iq .iq-mode-knob { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(22, 24, 29, .1); transition: transform .3s cubic-bezier(.3, .7, .2, 1), width .3s cubic-bezier(.3, .7, .2, 1); }
.iq .iq-mode button { position: relative; z-index: 1; min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-size: 14.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.iq .iq-mode button.is-on { color: var(--ink); }
.iq .iq-p[hidden] { display: none; }
.iq .iq-p--chat { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
.iq .iq-msgs { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 8px 2px 16px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px); mask-image: linear-gradient(to bottom, transparent 0, #000 60px); }   /* 위쪽 60px은 흐려지며 잘림 */
.iq .iq-msgs > :first-child { margin-top: auto; }
.iq .iq-msgs { display: flex; flex-direction: column; }
.iq .iq-row { display: flex; flex-direction: column; margin-top: 12px; }
.iq .iq-row--u { align-items: flex-end; }
.iq .iq-row--a { align-items: flex-start; }
.iq .iq-bub { max-width: 82%; padding: 11px 15px; border-radius: 18px; font-size: 15.5px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.iq .iq-row--a .iq-bub { background: var(--face); color: var(--ink); border-bottom-left-radius: 6px; }
.iq .iq-row--u .iq-bub { background: #0a6fd6; color: #fff; border-bottom-right-radius: 6px; }   /* 방문자(고객) 말풍선 = 파랑 */
.iq .iq-bub.is-html { white-space: normal; }
.iq .iq-bub.is-html p + p { margin-top: 6px; }
.iq .iq-bub a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.iq .iq-pl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; margin: 0; }
.iq .iq-pl + .iq-pl { margin-top: 6px; }
.iq .iq-pl .v { min-width: 0; }
.iq .iq-pl .k { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.iq .iq-pl .k--ring { background: var(--ai); color: #fff; }   /* 이어링 = 남색 면 흰 글자(사용자 요청) */
.iq .iq-pl .k--talk { background: var(--brand); color: #fff; }   /* 이어톡 = 브랜드 면 흰 글자 */
.iq .iq-typing { display: inline-flex; gap: 4px; padding: 6px 0; }
.iq .iq-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a9fa8; animation: iq-blink 1s infinite; }
.iq .iq-typing i:nth-child(2) { animation-delay: .15s; }
.iq .iq-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes iq-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.iq .iq-opts { display: flex; flex-wrap: wrap; gap: 6px; max-width: 92%; margin-top: 8px; }
.iq .iq-opt { display: inline-flex; align-items: baseline; gap: 6px; min-height: 36px; padding: 7px 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #d6d9df; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); text-align: left; }
.iq .iq-opt small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.iq .iq-opt:hover:not(:disabled) { background: var(--bg); }
.iq .iq-opts.is-old, .iq .iq-cform.is-old { opacity: .45; }
.iq .iq-opts.is-old .iq-opt, .iq .iq-cform.is-old * { cursor: default; }
.iq .iq-cform { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: min(100%, 460px); margin-top: 8px; padding: 14px; border-radius: 16px; background: var(--bg); }
.iq .iq-cf { display: grid; gap: 5px; min-width: 0; }
.iq .iq-cf span { font-size: var(--t-lab); font-weight: 600; color: var(--ink-2); }
.iq .iq-cf b { color: var(--brand); }
.iq .iq-cf input { width: 100%; min-width: 0; padding: 10px 12px; border: 0; border-radius: 10px; background: #fff; font: inherit; font-size: var(--t-body); color: var(--ink); }
.iq .iq-cf input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.iq .iq-cf-err { grid-column: 1 / -1; font-size: var(--t-cap); color: var(--brand-deep); }
.iq .iq-cf-go { grid-column: 1 / -1; justify-self: end; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--t-body); font-weight: 700; }
.iq .iq-foot { padding-top: 10px; }
.iq .iq-faq { display: flex; align-items: flex-start; gap: 10px; }
.iq .iq-faq-k { flex: none; padding-top: 7px; font-size: var(--t-lab); font-weight: 600; color: var(--ink-3); }
.iq .iq-faq-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.iq .iq-qchip { padding: 6px 12px; border: 0; border-radius: 999px; background: var(--bg); font-size: var(--t-sub); font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.iq .iq-qchip:hover { background: #e8eaee; }
.iq .iq-inp { display: flex; gap: 8px; margin-top: 10px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--bg); }
.iq .iq-inp:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.iq .iq-inp input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--t-body); color: var(--ink); outline: none; }
.iq .iq-inp button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; }
.iq .iq-inp button svg { width: 18px; height: 18px; }

/* 직접 적기 */
.iq .iq-p--form { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 4px 2px 12px; }
.iq .iq-form { display: grid; gap: 18px; }
.iq .iq-form-note { font-size: var(--t-sub); line-height: 1.6; color: var(--ink-2); }
.iq .iq-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.iq .iq-f, .iq .iq-fg { display: grid; gap: 7px; min-width: 0; align-content: start; }
.iq .iq-f-k { font-size: var(--t-lab); font-weight: 600; color: var(--ink-2); }
.iq .iq-f-k b { color: var(--brand); }
.iq .iq-f-k small { margin-left: 4px; font-size: var(--t-cap); font-weight: 500; color: var(--t-cap-c); }
.iq .iq-f input, .iq .iq-f textarea { width: 100%; min-width: 0; padding: 12px 14px; border: 0; border-radius: 12px; background: #f7f8fa; font: inherit; font-size: var(--t-body); color: var(--ink); }
.iq .iq-f textarea { resize: vertical; line-height: 1.6; }
.iq .iq-f input:focus, .iq .iq-f textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.iq .iq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.iq .iq-chip { padding: 8px 14px; border: 0; border-radius: 999px; background: #f7f8fa; font-size: var(--t-sub); font-weight: 600; line-height: 1.4; color: var(--ink-2); }
.iq .iq-chip:hover { background: #eceef2; }
.iq .iq-chip.is-on { background: var(--ink); color: #fff; }
.iq .iq-chip:focus-visible, .iq .iq-opt:focus-visible, .iq .iq-qchip:focus-visible, .iq .iq-mode button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ── 좁은 화면 ── */
@media (max-width: 1100px) {
  .iq .iq-c { grid-template-columns: 480px minmax(0, 1fr); }
  .iq .iq-l-in { padding-right: 32px; }
  .iq .iq-r { padding-left: 32px; }
  .iq .iq-h1 { font-size: 36px; }
  .iq .iq-pass-big { font-size: 28px; }
}
@media (max-width: 900px) {
  .iq { padding-bottom: 168px; }   /* 아래 고정 신청 띠만큼 */
  .iq .iq-c { display: block; min-height: 0; }
  .iq .iq-l-in { padding: calc(var(--nav-h) + 64px) var(--gutter) 24px; }
  .iq .iq-h1 { font-size: 32px; }
  .iq .iq-pass { margin-top: 20px; padding: 0; background: none; box-shadow: none; }
  .iq .iq-pass-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 12px 18px; border: 0; border-radius: 16px; background: linear-gradient(160deg, #2b2f39, #1c1f26); box-shadow: inset 0 0 0 1px #333743; color: #fff; font-size: var(--t-body); font-weight: 700; text-align: left; }
  .iq .iq-pass-chev { flex: none; width: 9px; height: 9px; margin-top: -4px; border-right: 2px solid #c4c8d0; border-bottom: 2px solid #c4c8d0; transform: rotate(45deg); transition: transform .2s; }
  .iq .iq-pass.is-open .iq-pass-chev { margin-top: 4px; transform: rotate(-135deg); }
  .iq .iq-pass-body { display: none; margin-top: 8px; padding: 18px; border-radius: 20px; background: linear-gradient(160deg, #2b2f39, #1c1f26); box-shadow: inset 0 0 0 1px #333743; }
  .iq .iq-pass.is-open .iq-pass-body { display: block; }
  .iq .iq-go { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 8px; margin: 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: #16181d; box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
  .iq .iq-r { contain: none; padding: 20px var(--gutter) 28px; }
  .iq .iq-p--chat { flex: none; height: 600px; }
  .iq .iq-p--form { flex: none; overflow: visible; }
  .iq .iq-mode { width: 100%; }
  .iq .iq-mode button { flex: 1; }
}
@media (max-width: 760px) { .iq .iq-l-in { padding-top: calc(var(--nav-h) + 40px); } .iq { --nav-h: 64px; } .iq .iq-h1 { font-size: 30px; } .iq .iq-pass-big { font-size: 26px; } }
@media (max-width: 560px) {
  .iq .iq-grid2, .iq .iq-cform { grid-template-columns: minmax(0, 1fr); }
  .iq .iq-p--chat { height: 560px; }
  .iq .iq-bub { max-width: 88%; font-size: 15px; }
  .iq .iq-faq { flex-direction: column; gap: 6px; }
  .iq .iq-faq-k { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .iq .is-pop, .iq .iq-typing i { animation: none; }
  .iq .iq-mode-knob, .iq .iq-cell, .iq .iq-btn, .iq .iq-pass-chev { transition: none; }
}

/* ── 결정 82: 오른쪽 = 옅은 회색 바탕 + 가운데 흰 카드(최대 760 · 둥근 28), 카드 맨 위 큰 두 칸 탭. 대화가 길어지면 카드 안에서만 스크롤 ── */
.iq .iq-c { min-height: max(780px, 100vh); }   /* 카드 최소 640 + 위(헤더 + 32) · 아래 32 */
.iq .iq-r { align-items: stretch; padding: calc(var(--nav-h) + 32px) var(--pad-x) 32px 40px; background: var(--bg); }   /* 왼쪽 = 패스 카드와 잉크 끝 사이 여백(40)과 같게, 오른쪽 = 페이지 오른쪽 여백(헤더 버튼 끝선) — 사용자 요청 */
.iq .iq-card { flex: 1 1 0; display: flex; flex-direction: column; width: 100%; min-height: 0; border-radius: 28px; background: var(--surface); box-shadow: 0 0 0 1px #e3e5ea, 0 18px 50px rgba(22, 24, 29, .08); overflow: hidden; }
.iq .iq-mode { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; width: auto; margin: 20px 20px 0; padding: 6px; border-radius: 18px; background: var(--bg); }
.iq .iq-mode button { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 0; padding: 12px 14px; border-radius: 14px; text-align: left; white-space: normal; transition: background .2s, box-shadow .2s; }
.iq .iq-mode button.is-on { background: #fff; box-shadow: 0 2px 10px rgba(22, 24, 29, .08); }
.iq .iq-mode-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--ink-3); transition: background .2s, color .2s; }
.iq .iq-mode-ic svg { width: 20px; height: 20px; }
.iq .iq-mode button.is-on .iq-mode-ic { background: var(--ink); color: #fff; }
.iq .iq-mode-t { display: grid; gap: 2px; min-width: 0; }
.iq .iq-mode-t b { font-size: var(--t-body); font-weight: 700; line-height: 1.35; color: var(--ink-3); }
.iq .iq-mode button.is-on .iq-mode-t b { color: var(--ink); }
.iq .iq-mode-t small { font-size: var(--t-cap); font-weight: 500; line-height: 1.4; color: #8d929c; }
.iq .iq-card .iq-p--chat { padding: 0 24px 20px; }
.iq .iq-card .iq-p--form { padding: 18px 24px 20px; }
@media (max-width: 1100px) { .iq .iq-r { padding-left: 32px; } }   /* 1100 이하 왼쪽 패스 오른쪽 여백 32와 같게 */
@media (max-width: 900px) {
  .iq .iq-r { padding: 16px; background: var(--surface); }   /* 좁은 화면: 회색 바탕 없이 카드가 화면 폭(좌우 16) */
  .iq .iq-card { flex: none; }
  .iq .iq-mode { margin: 12px 12px 0; }
  .iq .iq-mode-t small { display: none; }
  .iq .iq-mode button { grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; }
  .iq .iq-mode-ic { width: 34px; height: 34px; border-radius: 10px; }
  .iq .iq-mode-ic svg { width: 18px; height: 18px; }
  .iq .iq-card .iq-p--chat { padding: 0 16px 16px; }
  .iq .iq-card .iq-p--form { padding: 16px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .iq .iq-mode button, .iq .iq-mode-ic { transition: none; } }

/* ── 결정 84: 문제 여러 개 · 되돌리기 · 칸 눌러 다시 묻기 ── */
.iq .iq-pass-big { display: grid; justify-items: start; gap: 2px; width: 100%; margin-top: 8px; padding: 0; background: none; }
.iq .iq-pass-big:hover { background: none; }
.iq .iq-big-b { position: relative; display: inline-flex; align-items: baseline; gap: 10px; max-width: 100%; padding: 2px 10px; border: 0; border-radius: 12px; background: transparent; color: #fff; font: inherit; font-size: 32px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; text-align: left; }
.iq .iq-big-b:hover { background: rgba(255, 255, 255, .05); }
.iq .iq-big-b.is-asking { box-shadow: inset 0 0 0 1.5px var(--on-ink-brand); }
.iq .iq-big-b.is-asking .iq-pass-plan, .iq .iq-big-b.is-asking .iq-pass-vol { background: none; -webkit-text-fill-color: var(--on-ink-brand); color: var(--on-ink-brand); }
.iq .iq-big-b:focus-visible { outline: 2px solid var(--on-ink-brand); outline-offset: 2px; }
.iq .iq-cell-edit { display: none; font-size: var(--t-cap); font-weight: 600; line-height: 1.4; letter-spacing: 0; color: var(--ai); white-space: nowrap; }
.iq .iq-cell .iq-cell-edit { position: absolute; top: 11px; right: 12px; }   /* 체크 자리(오른쪽 위)에 — 보일 땐 체크 숨김 */
.iq .iq-big-b .iq-cell-edit { align-self: center; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #e3e5ea; }
@media (hover: hover) {
  .iq .iq-cell.is-on:hover .iq-cell-edit, .iq .iq-cell.is-on:focus-visible .iq-cell-edit, .iq .iq-big-b.is-on:hover .iq-cell-edit, .iq .iq-big-b.is-on:focus-visible .iq-cell-edit { display: inline-block; }
  .iq .iq-cell.is-on:hover .iq-cell-ck, .iq .iq-cell.is-on:focus-visible .iq-cell-ck { display: none; }
}
@media (hover: none) { .iq .iq-cell.is-on .iq-cell-edit, .iq .iq-big-b.is-on .iq-cell-edit { display: inline-block; } .iq .iq-cell.is-on .iq-cell-ck { display: none; } }
.iq .iq-pass.is-locked .iq-cell-edit { display: none !important; }
.iq .iq-pass.is-locked .iq-cell, .iq .iq-pass.is-locked .iq-big-b { cursor: default; }
.iq .iq-cell[data-cell="pain_points"] .iq-cell-v { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* 첫 항목 + 외 n개, 두 줄 넘으면 말줄임(요청) */   /* 첫 항목 + 외 n개, 넘치면 말줄임(요청) */
.iq .iq-cell.is-on .iq-cell-k { padding-right: 52px; }
.iq .iq-cell.is-asking .iq-cell-ck { display: none; }
/* 대화 — 여러 개 고르기 · 다 골랐어요 · 되돌리기 */
.iq .iq-opt.is-on { background: var(--ink); box-shadow: none; color: #fff; }
.iq .iq-opt.is-on small { color: rgba(255, 255, 255, .7); }
.iq .iq-opt--done { background: var(--brand); box-shadow: none; color: #fff; }
.iq .iq-opt--done:hover:not(:disabled) { background: var(--brand-deep); }
.iq .iq-opt--done:disabled { background: #eceef2; color: #9a9fa8; cursor: default; }
.iq .iq-opts.is-old .iq-opt--done { background: #eceef2; color: #9a9fa8; }
.iq .iq-undo { margin-top: 6px; padding: 4px 11px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5ea; font-size: var(--t-cap); font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.iq .iq-undo:hover { background: var(--bg); color: var(--ink); }
.iq .iq-undo:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 직접 적기 — 문제 직접 입력 칸 */
.iq .iq-pain-free { width: 100%; margin-top: 8px; padding: 12px 14px; border: 0; border-radius: 12px; background: #f7f8fa; font: inherit; font-size: var(--t-body); color: var(--ink); }
.iq .iq-pain-free:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.iq .iq-pain-free[hidden] { display: none; }
@media (max-width: 1100px) { .iq .iq-big-b { font-size: 28px; } }
@media (max-width: 760px) { .iq .iq-big-b { font-size: 26px; } }

/* ── 2026-10-08: 동의 전 신청 버튼(꺼진 모양, 누르면 동의 안내) · 대화 안 도움말 표 카드 · 이동 링크 ── */
.iq .iq-btn.is-off, .iq .iq-btn.is-off:hover { background: #2e3139; color: #5a5e68; box-shadow: none; cursor: not-allowed; }
.iq .iq-tc { margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e3e5ea; }
.iq .iq-bub.is-html .iq-tc + p, .iq .iq-bub.is-html p + .iq-tc { margin-top: 8px; }
.iq .iq-tc-k { font-size: var(--t-lab); font-weight: 700; line-height: 1.4; color: var(--ink-2); }
.iq .iq-tc-t { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.iq .iq-tc-t td { padding: 7px 0; border-top: 1px solid #eceef2; vertical-align: top; }
.iq .iq-tc-t td:first-child { padding-right: 12px; font-weight: 600; color: var(--ink); }
.iq .iq-tc-t td:last-child { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.iq .iq-tc-t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.iq .iq-tc-g { margin-top: 8px; font-size: var(--t-cap); font-weight: 600; color: var(--ink-3); }
.iq .iq-tc-chs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.iq .iq-tc-chs span { padding: 2px 9px; border-radius: 999px; background: var(--bg); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink-2); }
.iq .iq-links { display: flex; flex-wrap: wrap; gap: 6px; max-width: 92%; margin-top: 8px; }
.iq .iq-opt--go { background: var(--ink); box-shadow: none; color: #fff; text-decoration: none; }
.iq .iq-opt--go:hover { background: #2c3039; color: #fff; }
.iq .iq-opt--go::after { content: "→"; margin-left: 2px; font-weight: 600; }

/* 모바일 글자 한 단계 더 작게(2026-10-12) — 폰에서 꽉 차 읽기 버겁다는 의견. 토큰(type.css)을 안 쓰는 고정 크기만 여기서 줄임 */
@media (max-width: 600px) {
  html body.iq .iq-l-in .iq-h1 { font-size: 27px; }
  html body.iq .iq-msgs .iq-row .iq-bub, html body.iq .iq-pass .iq-pass-sum .iq-pass-sum-t, html body.iq .iq-mode-t b { font-size: 14px; }
  html body.iq .iq-row .iq-opts .iq-opt { font-size: 13.5px; }
}

/* 첫 화면 한 화면에 맞춤(2026-10-12, PC만) — 들어오자마자 스크롤 없이 왼쪽 상담 패스 · 오른쪽 대화가 다 보이게(높이가 낮을수록 촘촘하게) */
@media (min-width: 1101px) {
  .iq .iq-c { min-height: 100vh; min-height: 100svh; height: 100vh; height: 100svh; }
  .iq .iq-l { display: flex; flex-direction: column; }
  .iq .iq-l-in { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--nav-h) + 24px); padding-bottom: 24px; }
}
@media (min-width: 1101px) and (max-height: 960px) {
  .iq .iq-cell { min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .iq .iq-cells { margin-top: 8px; }
  .iq .iq-go { margin-top: 10px; }
  .iq .iq-pass { margin-top: 18px; }
  .iq .iq-r { padding-top: calc(var(--nav-h) + 20px); padding-bottom: 20px; }
}
@media (min-width: 1101px) and (max-height: 880px) {
  .iq .iq-l-in { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 16px; }
  .iq .iq-h1 { font-size: 32px; }
  .iq .iq-lead { margin-top: 10px; font-size: 15px; }
  .iq .iq-pass { padding: 16px; margin-top: 14px; }
  .iq .iq-pass-big { margin-top: 4px; }
  .iq .iq-cell { padding-top: 6px; padding-bottom: 6px; }
  .iq .iq-btn { min-height: 46px; }
  .iq .iq-mode button { padding-top: 8px; padding-bottom: 8px; }
}
@media (min-width: 1101px) and (max-height: 800px) { .iq .iq-go-note { display: none; } .iq .iq-lead { display: none; } .iq .iq-pass { margin-top: 18px; } }
/* 도움말 버튼(2026-10-12 모든 페이지) — 좁은 화면에서는 아래 고정 신청 띠 위로 */
@media (max-width: 1100px) { .iq .hw { bottom: calc(150px + env(safe-area-inset-bottom)); } }
@media (min-width: 1101px) { .iq .iq-r { padding-right: 100px; } }   /* 오른쪽 아래 도움말 버튼(60)이 대화 카드 모서리를 덮지 않게 */
/* 휴대폰 가로(높이 560 이하): 아래 고정 신청 띠가 화면 절반을 덮던 것 → 동의 · 버튼 한 줄로 낮게, 안내 줄 숨김(2026-10-12) */
@media (max-width: 1100px) and (max-height: 560px) {
  .iq .iq-go { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 40%); align-items: center; gap: 12px; padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .iq .iq-go .iq-btn { min-height: 44px; }
  .iq .iq-go-note { display: none; }
  .iq { padding-bottom: 80px; }
  .iq .hw { bottom: calc(76px + env(safe-area-inset-bottom)); }
}