/*
 * 면접 질문 랜딩 스타일 — 디자인 내보내기 `면접질문_최(수)종.zip` 원문을 이어 붙인 것.
 *   1) src/lib/dds-tokens.css            1~57, 63~72줄 (스크롤바 숨김 58~62줄은 뺐다 — 이 사이트는 스크롤바를 숨기지 않는다)
 *   2) src/app/screens/application-detail/style.css  351~352줄(.adq-intake) · 527~740줄(.ql-*)
 *   3) 이 파일 맨 끝 — 앱 셸 대신 이 페이지가 주는 여백(원본 단독 디자인 페이지 src/interview/style.css 와 같은 값)
 * 원문을 고칠 땐 zip 을 다시 풀어 같은 구간을 옮긴다. 손으로 고친 줄은 3) 뿐이다.
 */
/* ===========================================================================
 * DDS (Dotfive Design System) tokens — apps/superintern/jobtracker/app/index.css 1:1
 * ========================================================================= */
:root{
  --font-sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;

  /* primary scale */
  --p5:#f3f5ff; --p10:#e4e8ff; --p20:#bdc7ff; --p30:#8d9eff; --p40:#6c82ff;
  --p50:#516bff; --p60:#3f57e5; --p70:#2f41bb; --p80:#1b2e96; --p90:#0f1b65;

  /* brand button (figma Button 4537:1222) */
  --brand:#536efc; --brand-hover:#4258d1; --brand-soft:#e8eeff; --brand-soft-hover:#d4dfff;
  --brand-faint:#f5f7ff; --brand-border:#d4dfff; --brand-disabled:#91aaff;

  /* secondary / error / tertiary */
  --s5:#e8f6fd; --s10:#d3effe; --s20:#b5e5ff; --s60:#0091dd; --s70:#0073b0;
  --e5:#fee8e8; --e10:#fdd2d2; --e60:#da2e2e; --e70:#ba1c1c;
  --t5:#faf3d8; --t10:#f8ebb6; --t60:#928900;

  /* neutral (dds) */
  --n5:#f7f7f7; --n10:#ececec; --n20:#e0e0e0; --n30:#cccccc; --n40:#aaaaaa;
  --n50:#888888; --n60:#666666; --n70:#444444; --n80:#333333; --n90:#1c1c1c;

  /* tailwind v4 gray — 코드가 실제로 쓰는 값 */
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db; --g400:#99a1af;
  --g500:#6a7282; --g600:#4a5565; --g700:#364153; --g800:#1e2939; --g900:#111827; --g950:#030712;

  /* opacity (black α) */
  --o4:rgba(0,0,0,.04); --o8:rgba(0,0,0,.08); --o16:rgba(0,0,0,.16);
  --o24:rgba(0,0,0,.24); --o32:rgba(0,0,0,.32); --o48:rgba(0,0,0,.48);
  --o52:rgba(0,0,0,.52); --o64:rgba(0,0,0,.64); --o88:rgba(0,0,0,.88);

  --scrim:rgba(26,26,31,.5);

  /* shadow */
  --sh1:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);
  --sh2:0 1px 3px 0 rgba(0,0,0,.1),0 4px 6px 0 rgba(0,0,0,.05);
  --sh3:0 4px 6px 0 rgba(0,0,0,.05),0 10px 15px 0 rgba(0,0,0,.1);
  --sh4:0 10px 15px 0 rgba(0,0,0,.1),0 20px 25px 0 rgba(0,0,0,.1);

  /* radius */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-full:9999px;

  --sidebar-w:256px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--shell-bg);
  color:var(--o88);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.5;
}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--p40);outline-offset:2px}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico-sm{width:16px;height:16px}
.ico-lg{width:24px;height:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.adq-intake{margin:4px -8px -40px;display:flex;flex-direction:column;gap:16px}
.adq-intake > section{border-radius:var(--r-xl,20px);overflow:hidden}

/* ===========================================================================
 * 면접 질문 랜딩(.ql-*) — 사용자 시안 2026-09-22.
 * 색은 primary 램프(5/10/20/50/60)와 ink alpha 만. 배경 장식 = 옅은 라디얼 글로우 + 원 stroke.
 * 여백: 히어로 96/0 · 섹션 88 · 카드 24 · 카피 폭 max 560.
 * ========================================================================= */
.ql-kicker{margin:0;font-size:14px;line-height:22px;font-weight:600;color:var(--p50)}
.ql-h2{margin:12px 0 0;font-size:30px;line-height:42px;font-weight:700;color:var(--g900);letter-spacing:-.02em;text-wrap:pretty}
.ql-h2 em,.ql-h1 em,.ql-h3 em{font-style:normal;color:var(--p50)}
.ql-h2-sm{font-size:26px;line-height:38px}
.ql-desc{margin:16px 0 0;font-size:15px;line-height:26px;color:var(--o64);text-wrap:pretty}
.ql-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:var(--r-md);
  background:var(--p50);color:#fff;font-size:15px;line-height:24px;font-weight:600;box-shadow:none;
  transition:background-color .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out}
.ql-cta:hover{background:var(--p60)}
.ql-cta:active{transform:translateY(1px)}
.ql-cta .ico{width:16px;height:16px;stroke-width:2.4}
.ql-cta-sm{height:54px;padding:0 32px;border-radius:var(--r-sm,8px);font-size:16px;box-shadow:none}

/* 배경 장식 — 원 stroke 와 글로우. 어느 섹션에서도 텍스트 뒤로 간다 */
.ql-ring{position:absolute;border-radius:9999px;border:1px solid var(--p20);pointer-events:none}
.ql-glow{position:absolute;border-radius:9999px;pointer-events:none;filter:blur(2px)}

/* ① 히어로 */
.ql-hero{position:relative;overflow:hidden;min-height:calc(100dvh - 382px);display:flex;flex-direction:column;
  padding:clamp(40px,6vh,96px) 32px 0;text-align:center;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(228,232,255,.95) 0%, rgba(228,232,255,0) 72%),
    linear-gradient(180deg,#F6F7FF 0%,#FBFBFF 100%)}
.ql-glow-l{left:-200px;top:-120px;width:560px;height:560px;background:radial-gradient(circle,rgba(189,199,255,.55) 0%,rgba(189,199,255,0) 68%)}
.ql-glow-r{right:-160px;bottom:-220px;width:520px;height:520px;background:radial-gradient(circle,rgba(228,232,255,1) 0%,rgba(228,232,255,0) 70%)}
.ql-hero-in{position:relative;display:flex;flex-direction:column;align-items:center;max-width:720px;margin:auto auto 0}
.ql-h1{margin:0;font-size:40px;line-height:56px;font-weight:700;color:var(--g900);letter-spacing:-.025em;text-wrap:balance}
.ql-sub{margin:20px 0 0;font-size:16px;line-height:28px;color:var(--o64);text-wrap:pretty}
.ql-sub strong{color:var(--o88);font-weight:600}
.ql-hero-in .ql-cta{margin-top:36px}
.ql-hint{margin:14px 0 0;font-size:13px;line-height:20px;color:var(--o48)}

/* 지표 스트립 — 히어로 아래 경계에 걸친다 */
.ql-strip{position:relative;max-width:880px;margin:clamp(32px,5vh,72px) auto 0;background:#fff;border:1px solid var(--g200);border-bottom:0;
  border-radius:var(--r-lg,16px) var(--r-lg,16px) 0 0;box-shadow:0 -6px 24px rgba(81,107,255,.06)}
.ql-stats{margin:0;padding:clamp(24px,3vh,36px) 24px clamp(26px,3.4vh,40px);list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ql-stats li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 8px;min-width:0}

.ql-stat-n{margin:0;font-size:30px;line-height:38px;font-weight:700;color:var(--g900);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ql-stat-n small{font-size:14px;line-height:20px;font-weight:600;color:var(--o64);margin-left:2px}
.ql-stat-l{margin:0;font-size:13px;line-height:20px;color:var(--o52);text-align:center;text-wrap:pretty}

/* ② 후기 — 좌 카피 / 우 2열 카드(위아래로 사라지게 mask) */
.ql-voice{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,560px);gap:128px;align-items:center;justify-content:center;
  padding:0 clamp(72px,12%,160px);background:var(--p5)}
.ql-voice-copy{padding:64px 0}
.ql-voice-copy{align-self:center}
.ql-voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;height:620px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
/* 열마다 카드가 두 벌 — 첫 벌 높이만큼 움직이면 이어진다. 두 열은 반대 방향 */
.ql-col{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;animation:ql-flow 36s linear infinite}
.ql-col-2{animation-direction:reverse;animation-duration:42s}
.ql-col-in{display:flex;flex-direction:column;gap:14px;padding-bottom:14px}
.ql-voice:hover .ql-col{animation-play-state:paused}
@keyframes ql-flow{to{transform:translateY(-50%)}}
.ql-card{padding:16px 16px 14px;border-radius:var(--r-md,12px);background:#fff;box-shadow:var(--sh1)}
/* 별점 — 글리프(★)는 뾰족해서 쓰지 않는다. 라운드 코너 별 SVG 5개(채움 4 + 회색 1) */
.ql-stars{display:flex;align-items:center;gap:2px}
.ql-stars svg{width:14px;height:14px;fill:#FFB200;stroke:none;display:block}
.ql-stars svg.off{fill:#D9DEE8}
.ql-card-t{margin:10px 0 0;font-size:14px;line-height:21px;font-weight:700;color:var(--g900);letter-spacing:-.01em}
.ql-card-b{margin:8px 0 0;font-size:12px;line-height:19px;color:var(--o64);text-wrap:pretty}
/* "— 윤O연 님" 한 줄. 분야 태그·아바타·인용부호는 없다 */
.ql-card-who{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:12px;line-height:18px;font-weight:500;color:var(--o52)}
.ql-dash{flex:none;width:12px;height:1px;background:var(--o24)}

/* ③ 여정 — 탭 3개 · 좌 설명 / 우 목업 */
.ql-journey{padding:80px 56px 88px;background:linear-gradient(180deg,#fff 0%,#F7F8FF 100%)}
.ql-journey-head{text-align:center;max-width:640px;margin:0 auto}
/* 좌 55 / 우 45 — 우측 목업 패널의 시각적 무게를 좌측 여백으로 상쇄한다 */
.ql-journey-body{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:48px;align-items:start;max-width:960px;margin:64px auto 0}
.ql-steps{display:flex;flex-direction:column;height:100%;min-height:0;padding-bottom:42px}
.ql-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--g200)}
.ql-tab{position:relative;height:44px;padding:0 8px;font-size:15px;line-height:22px;font-weight:500;color:var(--o64);transition:color .15s ease-out}
.ql-tab:hover{color:var(--o88)}
.ql-tab[aria-selected="true"]{color:var(--g900);font-weight:700}
.ql-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--p50)}
/* 첫 탭은 왼쪽 정렬선에 맞춘다 — 밑줄이 컬럼 시작에서 출발 */
.ql-tab:first-child{padding-left:0}
.ql-step{margin:42px 0 0;flex:none;min-height:0}
.ql-step-k{margin:0;font-size:15px;line-height:24px;font-weight:700;letter-spacing:0;color:var(--p50)}
.ql-h3{margin:6px 0 0;font-size:23px;line-height:34px;font-weight:700;color:var(--g900);letter-spacing:-.02em;text-wrap:pretty}
.ql-steps .ql-cta{flex:none;margin:52px 0 0;align-self:flex-start}
.ql-journey-body > .ql-steps,.ql-journey-body > .ql-mock-wrap{align-self:stretch}

.ql-mock-wrap{position:relative;overflow:hidden;padding:36px 40px;border-radius:var(--r-xl,20px);height:400px;display:flex;align-items:center;
  background:
    radial-gradient(80% 60% at 70% 20%, rgba(228,232,255,.9) 0%, rgba(228,232,255,0) 70%),
    linear-gradient(160deg,#F6F7FF 0%,#EEF1FF 100%)}
.ql-arc{position:absolute;border-radius:9999px;border:1px solid rgba(81,107,255,.16);pointer-events:none}
.ql-arc-1{width:720px;height:720px;left:-360px;top:-500px}
.ql-arc-2{width:640px;height:640px;left:-240px;top:-480px;border-color:rgba(81,107,255,.1)}
.ql-mock{position:relative;width:100%;max-width:400px;max-height:100%;overflow:hidden;margin:0 auto;padding:20px 22px;border-radius:var(--r-lg,16px);background:#fff;box-shadow:var(--sh3);
  animation:ql-in .28s ease-out}
@keyframes ql-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ql-mock[hidden]{display:none}
.ql-mock[hidden] *{animation:none !important}
.ql-mock-h{margin:0;display:flex;align-items:center;gap:8px;font-size:15px;line-height:24px;font-weight:600;color:var(--g900)}
.ql-mock-h i{width:8px;height:8px;border-radius:9999px;background:var(--p50)}
.ql-mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--g200);font-size:14px;line-height:22px}
.ql-mock-row span{color:var(--o52)}
.ql-mock-row strong{font-weight:600;color:var(--g900)}
.ql-mock-h + .ql-mock-row{margin-top:8px}
.ql-mock-ta{margin-top:16px;padding:16px 18px;border-radius:var(--r-md);background:var(--g100);font-size:14px;line-height:24px;color:var(--o88)}
.ql-mock-ta-sm{font-size:13px;line-height:22px}
.ql-caret{display:inline-block;width:1.5px;height:16px;margin-left:2px;vertical-align:-3px;background:var(--o64);animation:ql-blink 1.1s steps(1) infinite;will-change:opacity}
@keyframes ql-blink{50%{opacity:0}}
.ql-mock-steps{margin:16px 0 4px;padding:0;list-style:none;display:flex;align-items:center;gap:0}
.ql-mock-steps li{display:flex;align-items:center;gap:6px;font-size:12px;line-height:18px;font-weight:500;color:var(--o32)}
.ql-mock-steps li + li::before{content:"";width:24px;height:1px;background:var(--g200);margin:0 8px}
.ql-mock-steps li span{width:8px;height:8px;border-radius:9999px;background:currentColor}
.ql-mock-steps li[data-on="true"]{color:var(--p60);font-weight:600}
.ql-mock-steps li[data-on="true"] span{animation:ql-pulse 1.4s ease-in-out infinite}
.ql-mock-steps li[data-done="true"]{color:var(--o52)}
@keyframes ql-pulse{50%{transform:scale(.6);opacity:.5}}
.ql-mock-q{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px 16px;border:1px solid var(--g200);border-radius:var(--r-md)}
.ql-mock-q p{margin:0;flex:1;font-size:14px;line-height:22px;font-weight:600;color:var(--g900);text-wrap:pretty}
.ql-mock-n{flex:none;font-size:12px;line-height:22px;font-weight:700;color:var(--o32);font-variant-numeric:tabular-nums}
.ql-mock-tag{flex:none;height:22px;padding:0 8px;border-radius:9999px;background:var(--n5);font-size:11px;line-height:22px;font-weight:600;color:var(--o64)}

/* ④ 마무리 밴드 — 원 stroke 두 개가 오른쪽에서 겹친다 */
.ql-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px;
  margin:0 -24px;border-radius:0 !important;padding:72px 56px;background:var(--p10)}
.ql-band-copy{position:relative;max-width:560px}
.ql-band .ql-cta{position:relative;flex:none}

@media (max-width:1100px){
  .ql-hero{padding-top:80px}
  .ql-h1{font-size:34px;line-height:48px}
  .ql-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:20px}
  .ql-stats li:nth-child(3){border-left:0}
  .ql-voice{grid-template-columns:1fr;gap:32px;padding:56px 32px}
  .ql-voice-grid{grid-template-columns:1fr;max-height:520px}
  .ql-col-2{margin-top:0}
  .ql-journey-body{grid-template-columns:1fr;gap:32px}
  .ql-band{flex-direction:column;align-items:flex-start;padding:56px 32px}
}

/* 여정 목업 · STEP 02 — HR 전문가 진행 카드 */
.ql-mock-hr{display:flex;align-items:center;gap:12px}
.ql-av-lg{width:40px;height:40px;font-size:15px}
.ql-mock-hn{margin:0;font-size:15px;line-height:24px;font-weight:600;color:var(--g900)}
.ql-mock-hd{margin:0;font-size:12px;line-height:18px;color:var(--o52)}
.ql-mock-pill{margin-left:auto;height:28px;padding:0 12px;border-radius:9999px;background:var(--p10);color:var(--p60);font-size:12px;line-height:28px;font-weight:600}
.ql-mock-todo{margin:18px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.ql-mock-todo li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:22px;color:var(--o64)}
.ql-mock-todo li[data-on="true"]{color:var(--p60);font-weight:600}
.ql-todo-c{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:9999px;background:var(--p10);color:var(--p60)}
.ql-todo-c .ico{width:13px;height:13px;stroke-width:3}
.ql-todo-spin{width:20px;height:20px;margin:0 2px;border-radius:9999px;border:2px solid var(--p10);border-top-color:var(--p50);animation:ql-spin 1s linear infinite;will-change:transform}
@keyframes ql-spin{to{transform:rotate(360deg)}}
.ql-mock-bar{margin-top:18px;height:6px;border-radius:9999px;background:var(--g200);overflow:hidden}
.ql-mock-bar i{display:block;width:66%;height:100%;border-radius:9999px;background:var(--p50);animation:ql-fill 1.2s ease-out}
@keyframes ql-fill{from{width:8%}}
.ql-mock-note{margin:10px 0 0;font-size:12px;line-height:18px;color:var(--o52)}

/* 여정 목업 · STEP 03 — 질문 아코디언(눌러서 열어 본다) */
.ql-mock-hr-sm{justify-content:space-between}
.ql-mock-chip{height:32px;padding:0 12px;border-radius:var(--r-sm);background:var(--n5);font-size:13px;line-height:32px;font-weight:500;color:var(--o64)}
.ql-mock-qs{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.ql-mock-qi{border:1px solid var(--g200);border-radius:var(--r-md);background:#fff;transition:border-color .15s ease-out,background-color .15s ease-out}
.ql-mock-qi[data-open="true"]{border-color:var(--p30);background:var(--p5)}
.ql-mock-qb{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;text-align:left;cursor:pointer}
.ql-mock-qb em{font-style:normal;font-size:13px;line-height:20px;color:var(--o32);font-variant-numeric:tabular-nums}
.ql-mock-qb span{flex:1;font-size:13px;line-height:20px;font-weight:600;color:var(--g900)}
.ql-mock-qb b{font-weight:400;font-size:16px;line-height:20px;color:var(--o32)}
.ql-mock-qa{margin:0;padding:0 14px 12px 38px;font-size:12px;line-height:19px;color:var(--o52);display:none}
.ql-mock-qi[data-open="true"] .ql-mock-qa{display:block}

/* ④ 마무리 밴드 — fill 원 + stroke 원 조형(스크린샷 7) */
.ql-band{background:linear-gradient(90deg,#F3F4FF 0%,#EEF0FF 100%)}
.ql-band-c1,.ql-band-c2,.ql-band-c3{position:absolute;border-radius:9999px;pointer-events:none}
.ql-band-c1{right:calc(-4% - 70px);top:-120%;width:720px;height:720px;background:rgba(81,107,255,.07)}
.ql-band-c2{right:-16%;top:22%;width:1100px;height:1100px;background:transparent;border:56px solid rgba(81,107,255,.06)}
.ql-band-c3{display:none}
.ql-kicker-en{font-size:14px;line-height:22px;font-weight:600;letter-spacing:0;color:var(--p50)}
/* 여정 본문은 제목 바로 아래 — 위계 간격 14 */
.ql-step .ql-desc{margin-top:12px;font-size:15px;line-height:26px}

/* 전문가 설계 목업 — 프로필은 실제 일러스트 이미지 */
.ql-av-img{flex:none;width:44px;height:44px;border-radius:9999px;object-fit:cover;background:var(--p5);display:block}


/* ===========================================================================
 * 랜딩 시안 C — 타이틀을 위로 올리고, 수치 스트립 대신 도착 질문 목록을 히어로 하단에 미리 보여준다.
 * #adQIntake[data-ql-variant="preview"] 로 갈아탄다(Tweaks). 나머지 섹션은 A 와 같다.
 * ========================================================================= */
.ql-preview{display:none}
#adQIntake:not([data-ql-variant="stats"]) .ql-strip{display:none}
[data-ql-variant="preview"] .ql-hero{padding:clamp(64px,9vh,128px) 32px 0;height:max(560px,calc(100dvh - 333px));min-height:0;
  display:flex;flex-direction:column;justify-content:flex-start}
[data-ql-variant="preview"] .ql-preview{margin-top:auto}
[data-ql-variant="preview"] .ql-sub{display:none}
[data-ql-variant="preview"] .ql-hero-in .ql-cta{margin-top:28px}
[data-ql-variant="preview"] .ql-preview{position:relative;display:block;flex:1 1 0;min-height:0;width:100%;max-width:840px;margin:clamp(48px,7vh,88px) auto 0;
  overflow:hidden;padding:28px 28px 28px;background:#fff;border:1px solid var(--g200);border-bottom:0;text-align:left;
  display:flex;flex-direction:column;
  border-radius:var(--r-lg,16px) var(--r-lg,16px) 0 0;
  box-shadow:0 -1px 4px rgba(120,128,168,.06),0 -6px 18px rgba(120,128,168,.08),0 -12px 32px rgba(150,158,200,.10)}
[data-ql-variant="preview"] .ql-preview-list li:nth-child(n+5){display:none}
[data-ql-variant="preview"] .ql-preview-list{flex:1 1 auto;min-height:0;justify-content:space-between;gap:14px;margin-top:20px}
/* 5개를 다 깔고 아래쪽만 그라디언트로 풀린다 */
.ql-preview-t{margin:0;font-size:17px;line-height:28px;font-weight:700;color:var(--g900)}
.ql-preview-d{margin:2px 0 0;font-size:13px;line-height:20px;color:var(--o52)}
.ql-preview-list{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ql-preview-list li{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid var(--g200);border-radius:var(--r-md);background:#fff}
.ql-preview-list em{flex:none;font-style:normal;font-size:12px;line-height:20px;font-weight:600;color:var(--o32);font-variant-numeric:tabular-nums}
.ql-preview-list span{font-size:14px;line-height:22px;font-weight:600;color:var(--g900);text-wrap:pretty}

/* ===========================================================================
 * 3) 이 사이트 전용 — 앱에서는 `.ad-scroll` 이 32px 패딩을 주고 `.adq-intake` 가 음수 마진으로 상쇄한다.
 * 단독 페이지에서는 원본 디자인 페이지(src/interview/style.css)처럼 바깥 24px · 음수 마진 0 으로 둔다.
 * 마무리 밴드(.ql-band)의 margin:0 -24px 은 이 24px 을 상쇄해 좌우 끝까지 닿는다.
 * ========================================================================= */
body{background:#fff}
.iq-page{display:block;padding:24px 24px 0}
.iq-page .adq-intake{margin:0}
/* 히어로 높이 — 원본 `calc(100dvh - 333px)` 의 333 은 앱 상단바·탭 높이다. 이 페이지의 위쪽은
   헤더 80 + 바깥 여백 24 뿐이라 같은 "첫 화면을 채운다" 의도로 128(= 80 + 24 + 아래 여유 24)을 뺀다.
   333 을 그대로 두면 질문 미리보기 카드가 1.5줄만 보인다(1440×900 실측). */
.iq-page [data-ql-variant="preview"] .ql-hero{height:max(560px,calc(100dvh - 128px))}
/* 예상 질문 카드 간격 — 원문은 space-between 이라 화면이 높을수록 벌어졌다(900 → 17px · 1080 → 67px 실측).
   14px 로 고정하고 남는 높이는 카드 아래로 둔다(2026-09-28 사용자 결정). */
.iq-page [data-ql-variant="preview"] .ql-preview-list{justify-content:flex-start;gap:14px}
/* 원문은 5번째 질문을 숨긴다(li:nth-child(n+5)) — 간격을 고정하니 카드 아래가 비어서 5개 모두 보인다(사용자 결정).
   화면이 낮으면 카드가 히어로 아래 경계에서 잘리는 원래 모양 그대로다. */
.iq-page [data-ql-variant="preview"] .ql-preview-list li:nth-child(n+5){display:flex}

/* 직군 이름 전환 — 「OO 직군에서 자주 나오는 질문이에요」의 OO 가 위로 밀려 올라가며 바뀐다.
   자리(.ql-role-slot)가 한 줄 높이로 잘라 주고, 스크립트가 data-state 를 out → in 으로 바꾼다. */
.ql-role-slot{display:inline-flex;overflow:hidden;vertical-align:bottom;height:20px}
.ql-role{display:inline-block;font-weight:600;color:var(--p60);transition:transform .32s ease-out,opacity .32s ease-out}
.ql-role[data-state="out"]{transform:translateY(-100%);opacity:0}
.ql-role[data-state="pre"]{transform:translateY(100%);opacity:0;transition:none}
@media (prefers-reduced-motion: reduce){ .ql-role{transition:none} }