/* JUNI IQ TEST v1.2.0
   소개·진행·결과 화면 공용. 바깥 폭은 juni-test-layout.css(.jt-site-shell) 기준 */

:root{
    --jiq-ink:#171D27;
    --jiq-sub:#5E6673;
    --jiq-mute:#98A0AE;
    --jiq-line:#E4E1DA;
    --jiq-bg:#F6F5F2;
    --jiq-card:#FFFFFF;
    --jiq-accent:#E8370D;
    --jiq-accent-soft:#FDEBE5;
    --jiq-ok:#2E8B67;
    --jiq-radius:18px;
}

.jiq-body{
    margin:0;
    padding:24px 0 0;
    background:var(--jiq-bg);
    color:var(--jiq-ink);
    font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
}
.jiq-body *{box-sizing:border-box}
.jiq-body [hidden]{display:none !important}

.jiq-shell,
.jiq-test{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}

/* 카드 */
.jiq-card{
    background:var(--jiq-card);
    border:1px solid var(--jiq-line);
    border-radius:var(--jiq-radius);
    padding:28px 24px;
    box-shadow:0 1px 2px rgba(23,29,39,.04);
}
.jiq-card h1{margin:0 0 10px;font-size:22px;line-height:1.35;letter-spacing:-.03em}
.jiq-card h2{margin:0 0 14px;font-size:17px;letter-spacing:-.02em}
.jiq-card h1 .fa,.jiq-card h2 .fa{color:var(--jiq-accent);margin-right:4px}
.jiq-center{text-align:center}

.jiq-eyebrow{margin:0 0 10px;color:var(--jiq-accent);font-size:12px;font-weight:800;letter-spacing:.14em}
.jiq-hero h1{font-size:32px;line-height:1.25;margin-bottom:14px}
.jiq-accent{color:var(--jiq-accent)}
.jiq-lead{margin:0 0 22px;color:var(--jiq-sub);font-size:15px;line-height:1.7}
.jiq-help{margin:0 0 18px;color:var(--jiq-sub);font-size:14px;line-height:1.65}
.jiq-note{margin:12px 0 0;color:var(--jiq-mute);font-size:12px;line-height:1.6}

/* 버튼 */
.jiq-actions{display:flex;flex-wrap:wrap;gap:10px}
.jiq-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;
    font:inherit;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;
    transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.jiq-btn:active{transform:translateY(1px)}
.jiq-btn-primary{background:var(--jiq-ink);color:#fff}
.jiq-btn-primary:hover,.jiq-btn-primary:focus-visible{background:var(--jiq-accent)}
.jiq-btn-primary:disabled{background:#C9CDD3;cursor:not-allowed}
.jiq-btn-ghost{background:#fff;color:var(--jiq-ink);border-color:var(--jiq-line)}
.jiq-btn-ghost:hover,.jiq-btn-ghost:focus-visible{border-color:var(--jiq-accent);color:var(--jiq-accent)}
.jiq-btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.jiq-block{width:100%;margin-top:6px}

/* 메타 칩 */
.jiq-meta{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.jiq-meta li{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--jiq-bg);color:var(--jiq-sub);font-size:13px;font-weight:700}
.jiq-meta .fa{color:var(--jiq-accent)}

/* 유형 목록 */
.jiq-types{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:10px}
.jiq-types li{counter-increment:t;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 14px;border-radius:12px;background:var(--jiq-bg);font-size:14px}
.jiq-types li::before{content:counter(t);display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--jiq-ink);color:#fff;font-size:12px;font-weight:800}
.jiq-types span{color:var(--jiq-mute);font-size:13px}
.jiq-story p{margin:0;color:var(--jiq-sub);font-size:14px;line-height:1.75}
.jiq-tips{margin:0;padding:0;list-style:none;color:var(--jiq-sub);font-size:14px;line-height:1.9}
.jiq-tips .fa{width:20px;color:var(--jiq-accent)}
.jiq-note-top{margin-top:0}
.jiq-notice ul,.jiq-rules{margin:0;padding-left:18px;color:var(--jiq-sub);font-size:14px;line-height:1.75}
.jiq-rules{list-style:none;padding:0;margin:0 0 18px}
.jiq-rules .fa{width:18px;color:var(--jiq-accent)}

/* 진행 헤더 */
.jiq-test-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px}
.jiq-brand{color:var(--jiq-ink);text-decoration:none;font-weight:900;letter-spacing:.12em;font-size:15px}
.jiq-brand .fa{color:var(--jiq-accent)}
.jiq-status{display:flex;align-items:center;gap:14px;font-size:14px;color:var(--jiq-sub)}
.jiq-count strong{color:var(--jiq-ink);font-size:17px}
.jiq-timer{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--jiq-line);font-variant-numeric:tabular-nums}
.jiq-timer b{color:var(--jiq-ink)}
.jiq-timer.is-warn{border-color:var(--jiq-accent);background:var(--jiq-accent-soft)}
.jiq-timer.is-warn b,.jiq-timer.is-warn .fa{color:var(--jiq-accent)}
.jiq-progress{height:6px;border-radius:999px;background:#E9E6DF;overflow:hidden}
.jiq-progress-bar{height:100%;width:0;background:var(--jiq-accent);transition:width .25s ease}

.jiq-select select{
    width:100%;min-height:52px;padding:0 16px;border:1px solid var(--jiq-line);border-radius:14px;
    background:#fff;font:inherit;font-size:16px;color:var(--jiq-ink);margin-bottom:18px;
}
.jiq-select select:focus{outline:2px solid var(--jiq-accent);outline-offset:1px}
.jiq-loading{margin:12px 0 0;color:var(--jiq-mute);font-size:13px;text-align:center}
.jiq-loading[hidden]{display:none}

/* 문항 */
.jiq-kicker{margin:0 0 6px;color:var(--jiq-accent);font-size:12px;font-weight:800;letter-spacing:.14em}
.jiq-prompt{font-size:18px !important}
.jiq-figure{display:flex;justify-content:center;margin:18px 0 22px}
.jiq-svg svg{display:block;width:100%;height:auto;max-width:340px}
.jiq-seq{margin:0;padding:22px 18px;width:100%;border-radius:14px;background:var(--jiq-bg);text-align:center;font-size:clamp(20px,5.4vw,28px);font-weight:800;letter-spacing:.04em;word-break:keep-all}
.jiq-input{
    width:100%;min-height:56px;padding:0 18px;border:2px solid var(--jiq-line);border-radius:14px;
    font:inherit;font-size:22px;font-weight:800;text-align:center;color:var(--jiq-ink);background:#fff;
}
.jiq-input:focus{outline:none;border-color:var(--jiq-accent)}

.jiq-answer-choice,.jiq-answer-multi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.jiq-answer-multi{grid-template-columns:repeat(5,minmax(0,1fr))}
.jiq-option{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
    padding:10px 6px 8px;border:2px solid var(--jiq-line);border-radius:14px;background:#fff;cursor:pointer;
    transition:border-color .12s,box-shadow .12s,background .12s;
}
.jiq-option svg{display:block;width:100%;height:auto;max-width:90px}
.jiq-option-key{font-size:13px;font-weight:800;color:var(--jiq-sub)}
.jiq-option:hover,.jiq-option:focus-visible{border-color:#BFC4CB}
.jiq-option.is-picked{border-color:var(--jiq-accent);background:var(--jiq-accent-soft);box-shadow:0 0 0 3px rgba(232,55,13,.12)}
.jiq-option.is-picked .jiq-option-key{color:var(--jiq-accent)}
.jiq-pick-hint{margin:12px 0 0;text-align:center;color:var(--jiq-sub);font-size:13px;font-weight:700}

.jiq-nav{display:flex;justify-content:space-between;gap:10px}
.jiq-nav .jiq-btn{flex:1}

.jiq-dots{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px}
.jiq-dot{
    min-height:30px;border:1px solid var(--jiq-line);border-radius:8px;background:#fff;
    color:var(--jiq-mute);font:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
.jiq-dot.is-done{background:var(--jiq-ink);border-color:var(--jiq-ink);color:#fff}
.jiq-dot.is-current{outline:2px solid var(--jiq-accent);outline-offset:1px}

.jiq-spinner{width:44px;height:44px;margin:4px auto 16px;border:4px solid #EEE9E1;border-top-color:var(--jiq-accent);border-radius:50%;animation:jiq-spin .8s linear infinite}
@keyframes jiq-spin{to{transform:rotate(360deg)}}

/* 결과 */
.jiq-result-hero{text-align:center}
.jiq-score{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:6px 0 4px}
.jiq-score span{font-size:22px;font-weight:900;color:var(--jiq-mute);letter-spacing:.1em}
.jiq-score strong{font-size:84px;line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--jiq-ink)}
.jiq-band{margin:10px 0 4px;font-size:20px;font-weight:900;color:var(--jiq-accent)}
.jiq-band-text{margin:0;color:var(--jiq-sub);font-size:14px}
.jiq-gauge{max-width:420px;margin:22px auto 0}
.jiq-gauge-track,.jiq-bar-track{height:10px;border-radius:999px;background:#EEEAE3;overflow:hidden}
.jiq-gauge-fill,.jiq-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#F4A27F,var(--jiq-accent))}
.jiq-gauge-scale{display:flex;justify-content:space-between;margin-top:6px;color:var(--jiq-mute);font-size:11px;font-weight:700}
.jiq-meta-result{justify-content:center}
.jiq-bars{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.jiq-bar-head{display:flex;justify-content:space-between;margin-bottom:6px;font-size:14px;font-weight:700}
.jiq-bar-head b{color:var(--jiq-sub);font-variant-numeric:tabular-nums}
.jiq-retry{padding-top:40px;padding-bottom:40px}
.jiq-retry-icon{font-size:54px;line-height:1;color:var(--jiq-accent);margin-bottom:14px}
.jiq-actions-center{justify-content:center}
.jiq-copied{margin:10px 0 0;color:var(--jiq-ok);font-size:13px;font-weight:700}

@media(max-width:600px){
    .jiq-body{padding-top:16px}
    .jiq-card{padding:22px 16px;border-radius:16px}
    .jiq-hero h1{font-size:26px}
    .jiq-actions .jiq-btn{flex:1 1 100%}
    .jiq-answer-choice{grid-template-columns:repeat(2,minmax(0,1fr))}
    .jiq-answer-multi{grid-template-columns:repeat(3,minmax(0,1fr))}
    .jiq-option svg{max-width:100px}
    .jiq-dots{grid-template-columns:repeat(8,minmax(0,1fr))}
    .jiq-score strong{font-size:68px}
}

/* =========================================================
   COLOR POINT v1.2.0
   JUNI COLOR TEST 공통 무드: 카드 상단 레인보우, 메인 타이틀 크기·레인보우 글자
   ========================================================= */
:root{
    --jiq-rainbow:linear-gradient(90deg,#D94A4A,#F47C5C,#D9A621,#2E8B67,#38AFC3,#315A7D,#7A5AA6,#D96C8A);
    --jiq-rainbow-text:linear-gradient(90deg,#D94A4A 0%,#F47C5C 25%,#D9A621 45%,#38AFC3 68%,#7A5AA6 100%);
}

/* 카드 상단 포인트 */
.jiq-card{position:relative;overflow:hidden}
.jiq-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--jiq-rainbow)}
.jiq-notice::before{height:3px;opacity:.55}

/* 메인 히어로: 다른 테스트 메인과 같은 중앙 정렬·타이틀 크기 */
.jiq-hero{padding:50px 44px;text-align:center}
.jiq-hero .jiq-eyebrow{font-size:13px}
.jiq-hero h1{margin:0 0 16px;font-size:clamp(31px,6vw,46px);line-height:1.23;letter-spacing:-.035em}
.jiq-hero .jiq-lead{max-width:560px;margin-left:auto;margin-right:auto}
.jiq-hero .jiq-actions,.jiq-hero .jiq-meta{justify-content:center}
.jiq-color-dots{display:flex;justify-content:center;gap:7px;margin:0 0 22px}
.jiq-color-dots span{width:14px;height:14px;border-radius:50%;background:var(--dot)}
.jiq-rainbow{
    display:inline-block;
    background:var(--jiq-rainbow-text);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
}

/* 카드 제목 아이콘을 카드마다 다른 색으로 */
.jiq-shell > .jiq-card:nth-of-type(5n+1) h2 .fa{color:#F47C5C}
.jiq-shell > .jiq-card:nth-of-type(5n+2) h2 .fa{color:#2E8B67}
.jiq-shell > .jiq-card:nth-of-type(5n+3) h2 .fa{color:#38AFC3}
.jiq-shell > .jiq-card:nth-of-type(5n+4) h2 .fa{color:#7A5AA6}
.jiq-shell > .jiq-card:nth-of-type(5n+5) h2 .fa{color:#D96C8A}

/* 유형 번호 원도 레인보우 순서로 */
.jiq-types li:nth-child(1)::before{background:#D94A4A}
.jiq-types li:nth-child(2)::before{background:#D9A621}
.jiq-types li:nth-child(3)::before{background:#2E8B67}
.jiq-types li:nth-child(4)::before{background:#38AFC3}
.jiq-types li:nth-child(5)::before{background:#7A5AA6}

/* 진행바·게이지·유형별 막대 */
.jiq-progress-bar{background:var(--jiq-rainbow);background-size:720px 100%}
.jiq-gauge-fill,.jiq-bar-fill{background:var(--jiq-rainbow-text)}
.jiq-result-hero .jiq-score strong{
    background:linear-gradient(180deg,#171D27 55%,#4b3a6b);
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

@media(max-width:600px){
    .jiq-hero{padding:36px 22px}
}